feat(elements): add light- & dark-mode configuration

[tohega]

Closes #1057

Theme switch example (highlighted green only for the accordion--expanded component currently):

2023-11-27.12-08-55.mp4

Notes:

• Define new primary/neutral/alert colors in our global styles.scss
• Enable our inovex Elements components to be theme aware by using CSS variables ( var(--inovex-elements-p-1); instead of theme.$p-1;).
• Switch the css class in the landingpage and storybook to .inovex-elements-theme & .inovex-elements-theme-dark
• Disabled all features for production using isInDevEnvironment flag

TODOS for 100% light- & dark-mode support

1. Add a dark theme color pallete covering all our neutral, primary and alert colors to our global styles.scss in the elements package

2. Stencil Components: Switch to CSS variables for light- & dark theme support (enables theme-awareness at runtime)

3. Design two new Ino-Icons for theme switch on landingpage: sun & moon icon (light & dark ino-switch toggle)

[janivo]

TODO: check MDC mixin compatibility

[MariaLStefan]

This is a great start for switching between light and dark theme!
The approach of using a second theme-color-pallet with the same names as the given light-theme is great, because we won't need to introduce more variables.

But i have the concern, that we won't have a dark theme-color-pallet which will perfectly match with the light-theme colors.

Because some components might work which their light-theme colors in dark mode but some might need bigger adjustments which won't perfectly fit across all other components.

If we won't find a fitting dark-theme-color-pallet I would suggest to store the component colors as variable (e.g. $ino-accordion-bg-color) which will choose, according to the selected theme, what color should be displayed. This will allow a fine granular adjustment of all colors.

Example:
ino-accordion-colors.scss(holds only accordion colors) or ino-components-colors.scss(holds colors of every component)

.inovex-elements-theme-light {
 $ino-accordion-bg-color: theme.$p-2;
 $ino-accordion-icon-color: theme.$p-5;
 $ino-accordion-text-color: theme.$n-11;
 ...
}

.inovex-elements-theme-dark {
 $ino-accordion-bg-color: theme.$n-8;
 $ino-accordion-icon-color: theme.$p-5;
 $ino-accordion-text-color: theme.$white;
 ...
}

But with smaller deviation we won't need this procedure.

Waiting for #1058 and dark-theme-pallet