elements icon indicating copy to clipboard operation
elements copied to clipboard

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

Open TobiasHeimGalindo opened this issue 1 year ago • 1 comments

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 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)

TobiasHeimGalindo avatar Nov 27 '23 11:11 TobiasHeimGalindo

TODO: check MDC mixin compatibility

janivo avatar Dec 05 '23 14:12 janivo