TASK: Define runtime CSS variables for plugins

[mhsdesign]

closes: #3431
closes: #3422

Hi, sorry yes i know this is confusing.

This file currently is not the actual source of the used css variables in the UI, as we have packages/build-essentials/src/styles/styleConstants.js
So why do i say currently? can i look into the future? As a matter of fact yes.
We are currently in the Neos Ui branch 7.3 8.0 8.1 or 8.2,
beginning with Neos 8.3 we will start to use this file here as actual source of truth (see #3366)

So you are still wondering why we introduced it into 7.3? Let me explain...
In the 7.3 to 8.2 time the webpack neos-ui-extensibility plugin bundler actually replaces all the css variables as into the bundled plugincode,
but starting with Neos 8.3 the webpack adapter doesnt do this anymore (because of overhead) and also because this would require that we have a separate esbuild extensibility plugin to do the same.
As you might now we dont even have an esbuild plugin, you can just rely on the alias map of the neos-ui-extensibility and might even be able to use it in rollup of webpack5.
So to provide an easy migration, we expose the css variables as real runtime variables, that way they can also be consumed as such.
The reason we backported the runtime variables to Neos 7.3 is to reduce overhead for plugin authors, so they can use the new 8.3 extensibility bundlers but their plugins are compatible with Neos 7.3 too

What I did

How I did it

How to verify it

[mhsdesign]

see slack discussion: https://neos-project.slack.com/archives/C0U0KEGDQ/p1678005415642609

and @Sebobo and me also talked about this and we agreed upon this solution

[mhsdesign]

For older instances like 5.3 you can easily make it compatible with newer plugins, which depend on the runtime css variables by including the css variables in your stylecheets neosui yaml config

Settings.yaml

Neos:
  Neos:
    Ui:
      resources:
        stylesheets:
          'HotFix.CssVariables':
            resource: resource://Vendor.Site/Public/cssVariables.css

cssVariables.css

copy the contents of https://github.com/neos/neos-ui/blob/e4080d6bb1a14a2c5eb843109ee82af38b84c8cf/cssVariables.css

[Sebobo]

@mhsdesign with the lowercase thing I actually mentioned the hex color values, not the variable names. It just looks a bit sloppy right now. Even though it was like that before.

But beside that fine by reading.

[mhsdesign]

ahh i see, but i indeed meant the casing too ^^ (also that way people are bit more scared to use it and they should be :P )

lets just say its not our prettiest api