Theming - refactor current approach

[thrbnhrtmnn]

Description / User Story

There are multiple topics, we can improve in our current theming approach:

• reducing build size / optimising code base by removing the <style> tag in each component
• allow more than 2 themes (ideally we have a class for the theme, and depending on the theme the components then get the right values

---

Requirements

• Try loops #713 is done

---

Acceptance Criteria

• <style> tag has been removed from components
• We now can have more than 2 themes in code
• New themes added by design are automatically added in code

---

Background information

• Currently for each theme a huge string will be created, which will also change dynamically the info in the style tags.
• A better solution would be to have one huge style string, but classes for light and dark.
• After this we can also check out CSS minifier to reduce the build size.
• Automating the adding of new theme can be done with the token studio meta data

[thrbnhrtmnn]

WIP Review:

Hey , here are my findings from looking at Storybook:

• Button Icon: focus ring is not displayed anymore in dark and light mode
• Button Text: focus ring has wrong color in dark mode (also on develop)
• Checkbox: focus ring has wrong color in dark mode (also on develop)
• Input Field Number:
  • it seems like the unit does not inherit any styles
  • input field background color is missing in rest and hover state for light and dark mode (also on develop > will be fixed with Input Field Number - fix input background, value and unit color #933 )
  • input field background, border color is wrong in readonly and disabled state for light and dark mode
  • input field stepper icon color is wrong in readonly and disabled state for light and dark mode (also on develop > will be fixed with Input Field Number - fix input background, value and unit color #933 )
  • input field background color is wrong in error state in rest, hover, pressed and focus state in light mode
  • input field background color is wrong in error state in pressed and focus state in dark mode
  • input field border color is wrong in error state in rest, pressed/focus state in light mode
  • input field border color is wrong in error state in rest, hover, pressed/focus state in dark mode
  • input field focus ring color is wrong in dark mode (also on develop)
• Input Field Text (TBD):
• Radio:
  • pressed state is missing in light and dark mode (also on develop > will be fixed with Radio - fix pressed state #1073 )
  • focus ring has wrong color in dark mode (also on develop > will be fixed with Radio - fix focus ring color and split css #766)
• Select:
  • focus ring has wrong color in dark mode (also on develop)
  • icon color in rest state dark mode is wrong (also on develop)
• Text Area:
  • focus ring is not overlaying the border in light and dark mode
  • focus ring has wrong color in dark mode (also on develop)
• Toggle Switch (TBD):
• Tooltip (TBD):
• Tooltip Bubble (TBD):

[thrbnhrtmnn]

Follow up Review:

• Input Field Text:
  • input field background color is wrong in readonly state (also on develop > will be fixed with Input Field Text - icon, placeholder & background color fixes #936 together with other issues)
  • focus ring color in dark mode is wrong (also on develop > I can create a new issue for this)
  • border in pressed state acts weird in dark and Light mode (also on develop > I can create a new issue for this)
• Toggle Switch:
  • Text should be vertically centered in SM and LG in light and dark mode (also on develop > I create a separate ticket)
  • When clicking the tooltip, the active state has the wrong color, but when changing "active" to true, it is the right color (also on develop > I create a separate ticket)
  • The knob color is wrong in disabled & readonly state light and dark mode (also on develop > part of Toggle Switch - active state has wrong color and state labels have wrong color in disabled & readonly state #793)
• Tooltip: all looks good

Summary: no findings, only topics that were already wrong on develop

[thrbnhrtmnn]

Hey @faselbaum , I also checked the fixes of the first review and everything looks good :-) I will approve the PR now