fix(tab-bar): allow consumers to override tab's badge background color

Kiarokh · Kiarokh · commit 01c8747522d9 · 2025-12-11T16:25:30.000+01:00
The `--badge-background-color` prop was hardcoded to `--contrast-600`.
This created problems if consumer wanted to modify the color.
diff --git a/src/components/tab-bar/tab-bar.scss b/src/components/tab-bar/tab-bar.scss
@@ -73,8 +73,6 @@ $tab-separator-background-color: rgb(var(--contrast-600));
     height: 2.5rem;
 
     &:not(.mdc-tab--active) {
-        --badge-background-color: rgb(var(--contrast-600));
-
         &:after {
             content: '';
             display: block;
@@ -105,6 +103,7 @@ $tab-separator-background-color: rgb(var(--contrast-600));
 
     limel-badge {
         margin-right: -0.25rem;
+        box-shadow: 0 0 0 1px rgb(var(--contrast-600));
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -73,8 +73,6 @@ $tab-separator-background-color: rgb(var(--contrast-600));`
`73`	`73`	`height: 2.5rem;`
`74`	`74`
`75`	`75`	`&:not(.mdc-tab--active) {`
`76`		`- --badge-background-color: rgb(var(--contrast-600));`
`77`		`-`
`78`	`76`	`&:after {`
`79`	`77`	`content: '';`
`80`	`78`	`display: block;`
`@@ -105,6 +103,7 @@ $tab-separator-background-color: rgb(var(--contrast-600));`
`105`	`103`
`106`	`104`	`limel-badge {`
`107`	`105`	`margin-right: -0.25rem;`
	`106`	`+ box-shadow: 0 0 0 1px rgb(var(--contrast-600));`
`108`	`107`	`}`
`109`	`108`	`}`
`110`	`109`