2025-03-12 Meeting notes

@Sam Daitzman

Paragon has three color sets: brand colors, core colors, and utility colors. We are proposing adding a fourth set of colors to be used in cases where a color palette is necessary to distinguish between objects in a set.

The colors in this set are ordered so that colors that appear similar in the most common color blindness types are not next to each other, and the colors we propose follow the same 100-900 shade system.

This proposal was drafted by @Edward Byun: https://openedx.atlassian.net/wiki/x/F4ANIgE

Notes:

• [Brian]

  • Naming

    • Currently named colorN-{level}.

    • What is the expected (semantic) name for these color sets?

    • The {level} is parity with Paragon's current color palette.

    • With design tokens, theme authors should be able to override these tokens in their custom brand packages.

• [Kevin]

  • Scenarios for when the proposed color palette should be used

    • More easily distinguish between types of things on the page

    • E.g., helpful to visually identity distinctions; for a11y, color alone is not enough for perceivability.

    • Are there instances where color-alone isn’t sufficient?

  • Would a smaller set of colors be easier to work with regarding a11y permutations, etc.?

  • Do we need more explicit usage guidelines?

• [Adam]

  • [clarification] This proposal is additive; it’s not updating the color sets in the existing palette? How does this fit in with the desire to update the entire default Open edX Paragon theme’s color palette to address existing a11y issues?

    • Yes, additive.

    • We want to incrementally add this set, but do not intend to modify the existing Paragon colors; will be tackled on its own!

  • Implications for the Paragon docs site

    • Perhaps show an example of how this proposal would impact the Paragon docs site “Colors” page to see how it fits into the overall color palette.

  • Is this technically a breaking change?

    • If Open edX MFEs start using the new color palette, do brand packages need to update accordingly?

    • The breaking change would be once the MFE starts using the new color palette sets.

• How does this proposal move forward / next steps?

  • “Here's where MFEs are defining their own colors”

  • PR or Figma for how this impacts the Paragon docs site colors page

    • Could be part of the proposal, nice to have a functional artifact!

@Adam Stankiewicz (on behalf of Sundas Noreen

tl;dr; Form.Control, when auto-filled`, positions its floatingLabel overlaying the auto-filled value, given the value is not “applied” to the input yet until the user takes some action. This makes it difficult to parse the input.

Open

Proposed fix:

https://github.com/openedx/paragon/pull/3451#issuecomment-2700491014

Corresponding PR:

https://github.com/openedx/frontend-app-authn/pull/1431

Notes:

• [Adam’s questions]

  • Should the detection of auto-fill live in Paragon itself, vs. relying on consumers passing isAutoFill prop, with potentially different logic?

    • [Brian] Yes.

  • Have other approaches been considered beyond MutationObserver? For example, a simpler implementation might be relying on void CSS transition rule and listening to the animationstart event in JS. See StackOverflow post for example.

    • [Brian] Solution should easy to maintain and understand.

      • Example: https://www.npmjs.com/package/detect-autofill-react

        • [Adam] Only 3 weekly downloads; some risk in using it directly; but can be an example!

        • [Brian] are there addtl use cases covered by this NPM package compared to the SO approach?

• Next steps

  • @Adam Stankiewicz Respond to PR with feedback from this PWG.

@Brian Smith

Can we support Paragon 23 in footer/header in a non-breaking way?

See https://github.com/openedx/frontend-component-footer/pull/303#discussion_r1989613263

Notes:

• Technical feasibility?

  • Yes, it’s possible. But do we want to do it?

• Goal

  • Avoid breaking needing to create alpha branches

    • E.g., in header/footer packages?

    • Transition-only.

  • [Adam] Is it only temporary while the migration to CSS variables occurs?

    • [Brian] Once it lands, we would remove the CSS variable fallback.

@Adam Stankiewicz

https://github.com/openedx/paragon/pull/3470

Open

Next Steps:

• @Adam Stankiewicz to write up broader question as GH issue

• @Brian Smith to review PR