Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ feat(bal-popover): add css customization #761

Closed
1 task done
github-actions bot opened this issue Apr 19, 2023 · 2 comments · Fixed by #872
Closed
1 task done

✨ feat(bal-popover): add css customization #761

github-actions bot opened this issue Apr 19, 2023 · 2 comments · Fixed by #872
Assignees
@hirsch88
Labels
✨ feature New feature or request
Milestone
🎨 Theming

Comments

@github-actions
Copy link
Contributor

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
@github-actions github-actions bot added the ✨ feature New feature or request label Apr 19, 2023
@github-actions github-actions bot added this to the 🎨 Theming milestone Apr 19, 2023
@hirsch88
Copy link
Member

/cib

@hirsch88 hirsch88 self-assigned this May 16, 2023
@github-actions
Copy link
Contributor Author

Branch feat/issue-761 created!

github-actions bot pushed a commit that referenced this issue May 16, 2023
@hirsch88
Create PR for #761
f4f3448
@github-actions github-actions bot mentioned this issue May 16, 2023
Merged
hirsch88 added a commit that referenced this issue May 17, 2023
@github-actions @hirsch88
✨ feat(bal-popover): add css customization (#872)
cf1ec4f 
* Create PR for #761

* feat(popover): add theming variables

---------

Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hirsch88 hirsch88

Labels
✨ feature New feature or request
Projects
None yet
Milestone
🎨 Theming
Development

Successfully merging a pull request may close this issue.

✨ feat(bal-popover): add css customization baloise/design-system
1 participant
@hirsch88