✨ feat(bal-table & AG-GRID): add css customization

[github-actions]

Summary

Each component should have a bal-component.vars.sass file with the custom component tokens which is imported by the main sass file of the component.

Use Case

The goal is to create non Baloise application, which should look like the partner.

Preferred Solution

Each component provides CSS-Variables to customise color, border and radius.

Additional Information

1. Create var file and import the mixins
2. Import the var file in the main component sass file

Var file example

/**
 * @prop --bal-badge-background: Background of the badge
 * @prop --bal-badge-background-danger: Background of the badge with the color danger.
 * @prop --bal-badge-background-warning: Background of the badge with the color danger.
 * @prop --bal-badge-background-success: Background of the badge with the color danger.
 *
 * @prop --bal-badge-radius: Radius of the badge.
 */

:root
  //
  // background colors
  --bal-badge-background: var(--bal-color-danger-4)
  --bal-badge-background-danger: var(--bal-color-danger-4)
  --bal-badge-background-warning: var(--bal-color-warning-4)
  --bal-badge-background-success: var(--bal-color-success-4)
  //
  // radius
  --bal-badge-radius: var(--bal-radius-rounded)

Will this feature introduce breaking changes?

None

Code of Conduct

• I agree to follow this project's Code of Conduct

[hirsch88]

/cib

[github-actions]

Branch feat/issue-770 created!

[hirsch88]

not needed