Skip to main content

Theming Improvements

With Version 1.5, we have revisited all components in our system to remove any hardcoded color classes, so that the theming you provide works better. We have also added CSS Variables to some components with text so that if a dark theme is applied, the default text color of black is overwritten and text is correctly showing up.


We have tried our best to ensure backwards compatability, nonetheless you should visit parts of your application that has HAPI Elements integrated and make sure that we did not accidentally break the styling. Here are some global theming additions:

borderColor: HexString
placeholderColor: HexString

successSecondaryBackgroundColor: HexString
successSecondaryTextColor: HexString

dangerSecondaryBackgroundColor: HexString
dangerSecondaryTextColor: HexString

warningSecondaryBackgroundColor: HexString
warningSecondaryTextColor: HexString

infoSecondaryBackgroundColor: HexString
infoSecondaryTextColor: HexString

neutralBackgroundColor: HexString
neutralTextColor: HexString

If styling broke in your application after these changes, you should:

  • debug in Developer Tools > Elements (DOM) tab
  • find the Element that has broken styling
  • check which CSS variable it is using (for example background: var(--hapi-global-neutral-text-color))
  • when setting window.hapi.theming.state.theme, pass the neutralBackgroundColor with a HEX color variable that will fix the styling issue (or textColor if that is broken rather than the background color)

Here are the most prominent changes:

  • CSS property of background-color got changed to background

Changes​

  • Basket styling slightly changed
  • Form Select styling slightly changed
  • Form HTML Input (Posting Details Description) component styling adapted to Form Input so styling matches
  • Form Label Description color changed from hardcoded gray to the fadedTextColor variable of Global Theming

Global Theming Additions​

  • successSecondaryTextColor added
  • dangerSecondaryTextColor added
  • warningSecondaryTextColor added
  • infoSecondaryTextColor added
  • neutralBackgroundColor added
  • neutralTextColor added
  • placeholderColor added

Component Styling Object Additions​

  • modaladded
  • formFieldLabelBaseadded
  • formFieldLabeladded
  • formFieldDescriptionBase added
  • formFieldDescription added
  • formFieldErrorMessageBase added
  • formFieldErrorMessage added
  • badgeBase added
  • badgePrimary added
  • badgeSecondary added
  • badgeSuccess added
  • badgeSuccessSecondary added
  • badgeWarning added
  • badgeWarningSecondary added
  • badgeInfo added
  • badgeInfoSecondary added
  • badgeDanger added
  • badgeDangerSecondary added
  • badgeAccent added
  • badgeFaded added
  • badgeNeutral added
  • card added
  • cardHeader added
  • checkbox added
  • checkboxPrimary added
  • checkboxSecondary added
  • checkboxSuccess added
  • checkboxSuccessSecondary added
  • checkboxInfo added
  • checkboxInfoSecondary added
  • checkboxDanger added
  • checkboxDangerSecondary added
  • checkboxWarning added
  • checkboxWarningSecondary added
  • checkboxAccent added
  • checkboxFaded added
  • checkboxNeutral added
  • tabHeader added
  • tabPanel added
  • buttonNeutral added