Let's make tutor-indigo and tutor-contrib-branding compatible

[angonz]

The objective of tutor-contrib-branding is to make small or medium size, incremental changes to a base theme. It works fine starting from the default open-edx theme.

However we need to disable tutor-indigo in order to make tutor-contrib-branding plugin work. The reason is that both touch same files in the container images.

We would like to make tutor-indigo compatible with tutor-contrib-branding, so we can use Indigo as a base theme and make changes on top of it.

A small example: If you enable both plugins you will have this result in the MFE Dockerfile:

 1: RUN mkdir /openedx/brand-openedx
 2: COPY ./brand-openedx /openedx/brand-openedx
 3: 
 4: RUN npm install '@edx/brand@file:/openedx/brand-openedx'
 5: 
 6: ENV CPPFLAGS=-DPNG_ARM_NEON_OPT=0
 7: ENV PACT_SKIP_BINARY_INSTALL=true
 8: RUN --mount=type=cache,target=/root/.npm,sharing=shared npm clean-install --no-audit --no-fund --registry=$NPM_REGISTRY
 9: 
10: RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.2.2'

Lines 1-4 are added by tutor-contrib-branding, which installs @edx/brand from a local file. Line 8 install the MFE Line 10 is added by Indigo, overwriting the branding package.

[regisb]

@HammadYousaf01 FYI I had a conversation with Andrès on Friday about the lessons that Indigo could learn from tutor-contrib-branding. The branding package is clearly easier than Indigo to modify some of the design variables. They achieve that via configuration settings, which I'd like to avoid, for different reasons. But Indigo should make it easy to identify the important SCSS variables, and to edit them.

Here's a scenario that I would like us to achieve:

1. Open Figma, where we load the design tokens of Indigo.
2. Customize design tokens in Figma
3. See the changes in real time in Indigo.

Is such a scenario possible?