[Jeff] constrain input to be valid (only typing the characters that can be used for hex, and must be 6 characters, or 3)
[Brian] underlying component has rounding error built in and we can’t completely avoid it
[Brian] default should be #fff
5-10 min
Utility functions to embed in the Paragon
@Vladyslav Zadorozhnii
On the previous discussions there was a decision that utility function related to any of Paragon components can be added to the Paragon repo.
Notes:
Some util functions are generic / not really related to Paragon design system itself. In these cases, the util functions should likely live in @edx/frontend-platform/utils.
Is the util function specific to design system? If, yes, include in Paragon.
Form Validation functions?
Vlad to share out in FWG Slack to solicit more feedback / additional util function ideas.
Intended to be a standalone “Accessibility” page under the “Guides” section on the docs site.
May want to bring other details from the PWG principles.
Design Tokens status update
@Felipe Montoya
What is the status of DT project and how will it impact the next Open edX release (Redwood in particular)
Notes:
Some MFEs have already been updated but there is more work to be done, cutting over from alpha to beta
RG is making incremental progress on design tokens CLI and other related bug fixes.
[Brian] willing to take on the coordination of the work between Q and R releases
Concerns: peer dependency.
@Adam Stankiewicz
Create beta cutover
Cheatsheet of “what’s left”
Design tokens for Paragon contributors
Example for consumers
@Vladyslav Zadorozhnii to send open design-tokens PRs from other repos.
Brian/Adam to work together to get the “what’s left” cheatsheet over the line.
[Jeff] is there a story to help with CSS translations
[Adam] tokens in theory we could extend the tokens framework to transform json tokens into whatever CSS properties we need, but it outside of the core paragon (this is more of a 2U/edX issue right now).
@Jeff Witt (Deactivated) @Adam Stankiewicz @David Joy (Deactivated)
Adapt Paragon for Frontastic use? Or style Frontastic using Paragon CSS?
Notes:
Frontastic comes with off-the-shelf UI component but a11y and style consistency may be a concern.
Could copy/paste style properties but this may be a maintenance concern long-term.
Could use design tokens to expose CSS variables using the same style properties in Paragon.
Could use design tokens to generate custom CSS class names using the same style properties in Paragon.
Frontastic also supports custom integrated components that can supply its data but still rely on Paragon components.
Design wants to stay synched to how this work develops, if we need to change the way we think about anything or how we use components in Figma
Competition
@Jeff Witt (Deactivated)
What alternatives might we consider?
Notes:
We have already planned our way out of using Bootstrap to support runtime theming more broadly
Having more than 1 LMS will always have inconsistency in the UI
Maintainability across 2U systems
Most DS’s don’t have the level of feature support that ours does today (ie DataTable)
General consensus from this group is that Paragon is still the right thing to use because we would be reinventing the same solutions we’ve already created, even if we buy the most robust new design system/component library
We have some heavy duty customizations in components today, and consider web components in rearchitecting, wrapping react components into web components
Adobe spectrum system
Tailwind vs Bootstrap theyre very different from eachother
tailwind.config.js to modify values vs. Bootstra' SCSS variable overrides
Design tokens could possibly generate tailwind.config.js.
Should there be a Product Management / business voice in this conversation?
We can’t make a decision about this within 2U/edX in a vacuum; Open edX likely would remain on Paragon if 2U/edX decided to move against it (which would still introduce brand inconsistencies).
If we were to “burn it all to the ground and start over on edX.org, would Paragon still be the right thing to use?