elements
elements copied to clipboard
feat(elements): add light- & dark-mode configuration
Closes #1057
Theme switch example (highlighted green only for the accordion--expanded component currently):
https://github.com/inovex/elements/assets/81302108/56816cb5-db5c-4910-8171-c7dfaa5b49bc
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 oftheme.$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
isInDevEnvironmentflag
TODOS for 100% light- & dark-mode support
-
Add a dark theme color pallete covering all our neutral, primary and alert colors to our global styles.scss in the elements package
-
Stencil Components: Switch to CSS variables for light- & dark theme support (enables theme-awareness at runtime)
-
Design two new Ino-Icons for theme switch on landingpage: sun & moon icon (light & dark ino-switch toggle)
TODO: check MDC mixin compatibility