Initialize Tokens 2.0 #1790
Initialize Tokens 2.0 #1790
Conversation
edburyenegren-okta
requested review from
a team,
ganeshsomasundaram-okta,
KevinGhadyani-Okta and
kamronbatmanghelich-okta
as code owners
| @@ -1,14 +1,28 @@ | |||
| { | |||
There was a problem hiding this comment.
This file consolidates all border tokens.
| @@ -0,0 +1,32 @@ | |||
| { | |||
| "palette": { | |||
There was a problem hiding this comment.
currently, these map to what's available in MUI. however, the palette proposed by Vis has many more tokens, and their use cases are clearer.
@taylorridgway-okta is currently reviewing our actual use cases for various hues to make better abstractions.
For now, I am partial to leaving these as-is and refactoring them as we implement the rebranded UI. that might make discoverability simpler.
| "comment": "Branded text color, primarily used within button", | ||
| "value": "{palette.primary.main.value}" | ||
| }, | ||
| "sub": { |
There was a problem hiding this comment.
Naming here is really tricky, we currently name them Primary and Secondary. I've floated Prominent and Recessive in the past, but realize this is a description of the hierarchy not their use.
Subordinate makes sense once I think about it, but I'm not sure it's super intuitive.
Want to make sure we're intentional about how the recessive gray text is named. What do you think @gretchen-okta ?
There was a problem hiding this comment.
+1
We use subtitle and caption in other places. It'd be nice to get consistent there.
MUI uses subtitle, but we can override that / add a new type.
There was a problem hiding this comment.
To look at it as a system... is the recessive gray text 600 and we also need a 700? Is the recessive use (600?) secondarily used vs 900 as primary?
When 700 is added so we have a scale of 3....
Main (900)
Light (700)
Lightest (600)
OR
Primary (900)
Secondary (now 700)
Tertiary (600; this use is unique in our taxonomy so far)
Prominent could be interpreted as more important than primary/main...like headline/subtitle?
The other use of primary and secondary color is for icon tokens. If we change text, do icon need to shift so we describe values and use in a similar way?
There was a problem hiding this comment.
I'm not too attached to having second-order variants share similar names unless it's straightforward. I would like to stay away from hierarchies when it comes to functional tokens because they're arbitrary.
body, heading, and bodyInverse seem clear and likely won't show up anywhere outside of typography.
danger makes to me, since the use case is clear.
I think primary was named as such simply because it matches our palette.primary, but it doesn't really spell out the case. action might be more intuitive.
Re: sub, I think I'm most partial to either subtitle (potentially confusing but matches MUI) and caption (not a 1:1 use case, but doesn't rely on hierarchy).
This contrasts with Button, where the primary variant indicates an in-UI hierarchy of importance.
There was a problem hiding this comment.
@edburyenegren-okta I don't know if I can get typography scale/use (like subtitle, body small) aligned with color tokens... Should I try to align color uses with color? Suggestions above either align with icon color tokens (primary, secondary) or hue/primary, error, warning, success (main, light, lightest)
A third idea:
900 could easily be body
but
700 = tag labels, table column headers, and areas of system design ...label feels closer than subheading or header to describe use of these cases
600 = secondary, supporting content in the UI to set it back a level hierarchically ....body light (related to body small?)
There was a problem hiding this comment.
I'm not too attached to having second-order variants share similar names unless it's straightforward. I would like to stay away from hierarchies when it comes to functional tokens because they're arbitrary.
body,heading, andbodyInverseseem clear and likely won't show up anywhere outside oftypography.
dangermakes to me, since the use case is clear.I think
primarywas named as such simply because it matches ourpalette.primary, but it doesn't really spell out the case.actionmight be more intuitive.Re:
sub, I think I'm most partial to eithersubtitle(potentially confusing but matches MUI) andcaption(not a 1:1 use case, but doesn't rely on hierarchy).This contrasts with Button, where the
primaryvariant indicates an in-UI hierarchy of importance.
I think I can get behind use of color but can we tweak a few:
body
bodyInverse
error (more consistent vs danger)
link (if that's what we mean by action for typography color)
- if we are naming by use, then I can't tell where subtitle or caption are used because we really don't have them? Would 'label' work (for 700 use case of tag label and table column header?
There was a problem hiding this comment.
error works for me! Button might be the only case we use "danger" because it's a user action rather than user-facing info.
link might be misleading because we also use it for Tabs and some Buttons.
caption/sub/secondary - I just did a quick inventory. We use this for:
- Field hints
- legalese
- actual captions (e.g. the
figcaptionunder an image or graph) - keyboard keys /
kbd - Chips (disabled text & icons)
- IconButton (disabled)
- Link (monochrome hover)
- List Subheaders (e.g. option groups in Select or Menu)
- Table footers, headers, and sort indicators
This isn't representative of the latest Rebrand UI color usage; however, the fact that they may change is probably a good indicator that they may need different tokens even if they coincidentally share the same value.
| "value": "{hue.neutral.600.value}" | ||
| }, | ||
| "danger": { "value": "{palette.danger.main.value}" } | ||
| }, |
There was a problem hiding this comment.
Also flagging: it's incredibly likely that we add another token for text at 700. Need to find a way to describe use case(s) to help with tokenization
There was a problem hiding this comment.
Ok, will revert to danger and action to cover more use cases:
body
bodyInverse
danger
action
Can caption/sub/secondary be 'secondary'? There are so many varied uses, it needs to be broad...
| "dark": { "value": "{hue.neutral.900.value}" } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Pretty sure this looks good, just want to make absolutely sure that main will always be 3.0:1 and below contrast ratio a11y requirement and won't be used, for example, for text anywhere.
edburyenegren-okta
force-pushed
the
ee/tokens-2-color
branch
from
634ed1d to
743e685
Compare
edburyenegren-okta
force-pushed
the
ee/tokens-2-color
branch
from
5f58185 to
46d5e7d
Compare
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
Description
This is a WIP PR for initializing the new
odyssey-design-tokensschema.Current changes
border; removescolor/borderfont; removescolor/textcolor/backgroundtokenscolor/palettetohuecolor/functionaltopalette(matching MUI use)paletteschema to match MUIspacetospacing; moves0key to0value (matching MUI use)ToDo