2022-10-05 Meeting notes

20 min

Demo of design tokens

@Vladyslav Zadorozhnii

• .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

5 min

Layout component

@Vladyslav Zadorozhnii

• How is browser default size affected by this? No impact, maybe taller container

•  

• 
  
  

5 min

Horizontal Card Image Cap min width

@Ben Warzeski (Deactivated)

• We will add a new prop to the Card to remove width constraints

2 minutes

@Adolfo Brandes

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).