[Proposal] Make Indigo the default Open edX Theme
Overview
Make the Indigo Theme the default visual theme for the Open edX Platform.
Problem
Currently the Open edX project maintains a set of default styles and colors that are not the default for tutor. Tutor then overrides these with forks of various branding packages and the Indigo base theme. This leads to the maintenance of two themes where we only really need one default and it results in double work and confusion for anyone who might need to modify the theme further. For example, there have been many cases where we have tested and designed new features using the default Open edX theme and would only find out that they did not work as expected when we examine the sandboxes for the next named release, a time lag of weeks to months after the initial work had been completed.
Use Cases
As an operator I want to know and modify the current default values for various sass and django templates.
As a developer I want to update visuals or layout for the Open edX Platform experience.
You might think the change is to update the default theme in edx-platform but the change is in fact in a tutor brand/theme repo.
Proposed Solution/Implementation Plan
Perform an a11y assessment and public UI/UX testing of the theme.
Correct any issues that are found.
Merge upstream changes from the tutor forked header/footer/brand into the
openedxcore repos.Merge the Indigo theme into the edx-platform repo so that it lives in the core system.
Deprecate the current default theme and replace it with Indigo as the new default.
Update figma base artifacts so that they are using the Indigo theme defaults
Long term Maintenance/Ownership
This should reduce the long term ownership burden of the theming resources for the Open edX platform. The resources currently dedicated to maintaining and improving the indigo theme would put their energy towards helping maintain and improve the new default theme (Indigo) as a part of the Open edX community. This set of resources would not be able to handle all maintenance and design work but should be able to help with routine maintenance and result in us not splitting our resources between themes.
Other Considerations
Accessibility
I’m not currently sure about the accessibility compliance of the Tutor Indigo theme, before it became the default, we would need to do this assessment and correct any issues that prevent the theme from being compliant with WCAG 2.2 AA compliance.
Relevant Links
Comments
“As an operator I want to know and modify the current default values for various sass and django templates.”
Are these plugin default values or theme color related default values?
My understanding is that these would be the default sass/css and other values that are defined as a part of the theme color and style.
"…the change is in fact in a tutor brand/theme repo."
Can you please elaborate this? Will the templates and images of Indigo have to be pushed upstream?
As a part of this change, we would merge the base indigo theme into edx-platform as the new default theme. Changes to forked MFEs or related style repos would get upstreamed as the default upstream.
“Deprecate the current default theme.”
Will the existing edx-platform styling files (inclusive of templates and image files) be overriden / replaced or will there just be appends to the styling files?
The existing files would be replaced with the indigo ones though we could have both themes available for some time to allow people to transition.
Additionally, the current Indigo theme doesn’t style the following MFEs: ora-grading, grading, communications, and authoring.
What do you think would be the expectation for these MFEs?
I would expect that moving forward we would update the styles of those to match the indigo defaults. This would be considered normal maintenance/improvement of repos and so the changes should be free of controversy and be quick to apply. As a part of this proposal, I am NOT suggesting that we pick up the work of updating the places that aren’t currently styled. That work can still happen incrementally in the future.
What are the reasons for having Indigo versus continuing to maintain the default theme? Alternatively if Tutor used the default theme instead of Indigo what is lost or impacted?
I see that one of the proposed solution steps is to review the a11y and UX/ UI implications of this proposal, but if we can find a way of bringing that review into the proposal review it might help with the above question.
(Note: At first glance it feels like less work to make Tutor’s default theme the existing open edx default and then simply make theme updates as desired to that over swapping themes and assessing all theme changes all in one project/ effort. )
@Marco Morales - this is a valid question, Marco. I think the initial reasoning was that those who upgraded to Redwood and Sumac would be using the Indigo theme by default, so users (on instances that don’t have a custom theme) are starting to become familiar with this theme. The issue is really in the mismatch between our testing environments being in the Open edX theme and the Release itself being in the Indigo theme. UI/UX issues crop up when we start testing the release (in Indigo) items that we had previously tested in the Open edX theme. But I hear your question about why make the Indigo theme the default at all - I’m going to try to do a little digging to see who among our users are using the indigo theme, so we have a little more data…
@Felipe Montoya and @Cassie Zamparini - I see you reacted to Marco’s question - do you share similar concerns? Would you be able to elaborate more?
@Chelsea Rathbun
My queries echoed Marco’s questions / statements:
What are the reasons for having Indigo versus continuing to maintain the default theme? Alternatively if Tutor used the default theme instead of Indigo what is lost or impacted?
I see that one of the proposed solution steps is to review the a11y and UX/ UI implications of this proposal, but if we can find a way of bringing that review into the proposal review it might help with the above question.
I’m trying to understand the reasoning behind this approach.
Also my concern is that we’re currently designing new features that are based on the Open edX theme, while at the same time, the UX/UI Working Group is focusing on streamlining elements of the current theme, starting with ‘icons.' So as a community are we making the best use of our time if we’re considering changing the theme? Also, where does Paragon fit into these plans? Is the goal still to use it as the foundation for all of our designs? @Brian Smith explained in the UX/UI WG that it does leverage Paragon to some degree - but we’ve been talking as a group about potentially updating Paragon with a dedicated Open edX theme so we need to know what we’re working towards (cc. @Sam Daitzman)
To summarise - I’m not sure I fully understand how everything comes together from a design perspective. So would appreciate your thoughts…
This may have already been discussed in the Core Product WG, so apologies if this has been outlined before.
**Update: @Chelsea Rathbun We discussed this proposal during our UX/UI workshop today, primarily in the last 15 minutes of the call. We thought it might be helpful for you to watch the recording, and it could also be worth discussing it further at our next UX/UI Working Group. I’ll leave it to our group’s leads, @Sam Daitzman and @Asma Ahmed (Unlicensed) , to arrange this if needed.
Thanks, @Cassie Zamparini! Added to the agenda for next working group meeting: https://openedx.atlassian.net/wiki/spaces/COMM/pages/4830101507
Happy to share the recording as well once it’s finished processing
@Chelsea Rathbun Here is the meeting recording: https://drive.google.com/file/d/12TKgO1vlbjLddC5cf0fokadHnZczEUgh/view
I noticed something while doing Teak testing that made me think about the
review the a11y and UX/ UI implications of this proposal
part of this. I was having a hard time reading the buttons on the “Data Download” tab on the Instructor Dashboard when using Indigo, so I decided to do a side by side comparison with the default theme.
@Brian Smith - Question for you - do you happen to know if the Indigo theme supports design tokens?
Short answer: It does not.
Longer answer:
I’ll start by nitpicking semantics a bit here: the question is better worded as “does the Indigo theme use design tokens?” It does not. The only custom theme I know of that is currently using design tokens is https://github.com/edx/elm-theme
It also does not make sense for the Indigo theme to use design tokens yet, because we have not merged design tokens support into the MFEs yet.
Which brings me to what I assume is another piece of the question: “Will the Indigo theme work when design tokens support lands in all the MFEs?” It will not. Indigo uses scss variables, which have been replaced with css variables in the version of Paragon that supports design tokens.
I know of 2 possible ways to update Indigo to work once design token support lands in MFEs:
* Update Indigo to use design tokens (recommended)
* Update Indigo to use css variables directly
Hopefully that helps! If you have more questions I’m more than happy to answer them!
Hey Feanil, this looks like a great proposal. I hope to discuss this in our upcoming Product Working Group meeting. I just have a few clarification questions.
“As an operator I want to know and modify the current default values for various sass and django templates.”
1. Are these plugin default values or theme color related default values?
"…the change is in fact in a tutor brand/theme repo."
2. Can you please elaborate this? Will the templates and images of Indigo have to be pushed upstream?
“Deprecate the current default theme.”
3. Will the existing edx-platform styling files (inclusive of templates and image files) be overriden / replaced or will there just be appends to the styling files?
Additionally, the current Indigo theme doesn’t style the following MFEs: ora-grading, grading, communications, and authoring.
4. What do you think would be the expectation for these MFEs?
I hope to understand your proposed plan and thank you in advance!