Summary of Changes

This implements the naming conventions agreed on in the maintainers last meeting. Not sure it's been published yet so attached below for those wondering:

We aim for a hierarchy for css variables, we want to go from blocks to more specific use cases. E.G. 

--modal-border-color: red;
--overlay-bg-color: #e2e2e2; 
--standard-font-color: #020202;

If it is for a specific part of Joomla, we prefix the value with the area, e.g.

--com-media-overlay-bg: var(--overlay-bg-color, ‘#fff’);
--mod-articles-font-color: var(--standard-font-color, ‘#000’);
--calendar-bg-color: var(--standard-bg-color);  // This is for fields such as the calendar field where they aren't specific to anb area in core

If a view is loaded in a modal then overrides should be applied at that level using existing classes rather than on :root e.g.

.modal.view-media-grid {
  --com-media-overlay-bg: orange;
}

Additionally it adds a CSS var that I missed when moving all the variables into the media manager _variables file and moves com_media ones into a dedicated file as this seemed to be preferred when comparing the media and calendar implementations.

Testing Instructions

No visible changes

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed