Setting up design-tokens from style-dictionary

[sergei-maertens]

Related to open-formulieren/open-forms#1603

This PR moves (some of the) CSS variables to a dedicated design-tokens repository and integrates it in our build/development toolchain.

The design-tokens repository is included as git submodule so we have a consistent and predictable path. This lets us use yarn workspaces (npm has them too) which automatically deals with the yarn link behaviour for local development, letting us use the local source code as if it was a package installed from npm. Changes in the resulting stylesheet are picked up by webpack, which re-compiles when needed.

The build and start scripts also ensure that a build of the submodule is created so that the resulting CSS files can be included.

TODO

• Use the index.css with theme class name rather than root.css which emits tokens under the :root {...} pseudo-selector
• Find a way to publish the package with workspaces. Using workspaces with yarn requires private: true, which prevents us from building and publishing the package to npm. This may actually be a good thing so we properly divide the src up into local-development tooling vs. what is actually needed in production - we now switch entrypoints between index.js and sdk.js instead.

[sergei-maertens]

Submodules in CI are a bit annoying it seems, applying https://stackoverflow.com/a/50299434 now

[sergei-maertens]

The multiple nesting levels are really problematic - style-dict merges everything together and then stops at the first level where a value is detected. See also amzn/style-dictionary#366

This requires you to take great care in naming your design tokens and structuring them!