.Possible Figma token tooling, to pull in the code source of truth into the design files. Need to explore figma tokens plugins in more details
.Need to sync with Kshitj on tokens duplication/overlap
Design tokens represented as JSON files.
Converted to CSS variables and SCSS variables, etc.
Demo:
Dark/light mode on example MFE
Some components have dark mode variants already
Some components don’t and will need updates.
[Adam] For dark theme, would we intend to use the variant (by prop) or override the CSS variable?
Vlad: Both?
We may need to move away from dark variants props.
Single topic meeting to address tokens overlap/approach/duplication of effort with edX.org, Open edX and blended contributors
Is there a consistent gradation of colors? can we accommodate contrast ratios? Example, 5 grades of contrast, top is stark black and white, paragraph strong, medium contrast isnext down, not pulling as much attention or crowd, next grade if you need to read this you can but its less important, and lowest grade, non conformant and less than 3:1 contrast. disabled in light should look disabled in dark. W3C contrast model is a little off with teal and certain shades or orange. Should there be symmetry in the numbers? Should there be semantically conformant contrast
Who do we talk to about general design changes? E.g., “Can we move this button down?”
Gabe: to get input from the broader design team. (e.g., a designer who is more familiar with the product area).
Action items
Add action items to close the loop on open questions or discussion topics:
Start conversation in PWG slack about design tokens implementation and drive to set up a meeting between blended dev, 2U, and open edX engineering and design stakeholders. Adam Stankiewicz to start in PWG