Proper theming support

[martinbrom]

Overview

Clarity addons do not offer 100% support for other themes at the moment. This is because a few components are not fully using the custom CSS properties that Clarity provides. As the PHS theme is the only currently used theme within Porsche Informatik, we are welcoming contributions for any part of the codebase (see below).

Tasks checklist

• [ ] back-button
• [x] brand-avatar (example commit 1a56ff61ef275b211514956388b804dc51abfcdd)
• [ ] breadcrumb
• [ ] calendar
• [ ] content-panel
• [ ] daterangepicker
• [ ] dot-pager
• [ ] flow-bar
• [ ] generic-quick-list
• [ ] history
• [ ] html-editor
• [ ] letter-avatar
• [ ] location-bar
• [ ] main-nav-group
• [ ] multilingual
• [ ] notification
• [ ] numericfield
• [ ] pager
• [ ] progress-spinner
• [ ] quick-list
• [ ] searchfield
• [ ] treetable
• [ ] view-edit-section

There are a few more cases inside components.clr-addons.scss. These could also be moved out of the file into their own directory.

• [ ] datagrid row higlighting
• [ ] text highlighting
• [ ] selectable card
• [ ] form control warning status

How to

Example commit: 1a56ff61ef275b211514956388b804dc51abfcdd Clarity docs about tokens: https://clarity.design/documentation/tokens/code

• Each component should define custom --clr-* properties (values should come from Clarity-provided --cds-* properties)
• Documentation for the respective component should include a section about the respective properties
• PHS-specific styling (usually the current hardcoded values) should be moved to the PHS theme.scss file in order to not cause any breaking changes for the existing users