@unifiedsoftware/styles 2.0.0-alpha.2 → 2.0.0-alpha.21

package/scss/components/_descriptions.scss

@@ -1,24 +1,69 @@
 @use '../variables' as *;
 
 .#{$prefix}descriptions {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	row-gap: var(--#{$prefix}descriptions-gap-y);
+	column-gap: var(--#{$prefix}descriptions-gap-x);
 }
 
 .#{$prefix}description {
-	&__name {
-		font-size: 14px;
-		color: var(--#{$prefix}secondary-action-color);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		display: block;
-	}
-
-	&__value {
-		font-size: 14px;
-		font-weight: 500;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		display: block;
+	position: relative;
+	padding-block: var(--#{$prefix}description-padding-y);
+	padding-inline: var(--#{$prefix}description-padding-x);
+
+	&__container {
+		display: grid;
+		grid-template-columns: repeat(12, minmax(0, 1fr));
+		row-gap: var(--#{$prefix}description-gap-y);
+		column-gap: var(--#{$prefix}description-gap-x);
+	}
+
+	&-value {
+		display: flex;
+		align-items: center;
+
+		&__start-content,
+		&__end-content {
+			flex-shrink: 0;
+		}
+
+		&__content {
+			flex-grow: 1;
+		}
+	}
+
+	.#{$prefix}descriptions--row &-label {
+		grid-column: span 6 / span 6;
+	}
+
+	.#{$prefix}descriptions--row &-value {
+		grid-column: span 6 / span 6;
+	}
+
+	.#{$prefix}descriptions--col &-label,
+	.#{$prefix}descriptions--col &-value {
+		grid-column: span 12 / span 12;
+	}
+
+	&-label {
+		font-size: var(--#{$prefix}description-label-font-size);
+		font-weight: var(--#{$prefix}description-label-font-weight);
+		color: var(--#{$prefix}description-label-color);
+		opacity: var(--#{$prefix}description-label-opacity);
+	}
+
+	&-text {
+		display: inline;
+		font-size: var(--#{$prefix}description-text-font-size);
+		font-weight: var(--#{$prefix}description-text-font-weight);
+		color: var(--#{$prefix}description-text-color);
+		opacity: var(--#{$prefix}description-text-opacity);
+	}
+
+	&-empty {
+		opacity: 0.75;
+		user-select: none;
+		cursor: default;
 	}
 }

package/scss/components/_input.scss

@@ -27,6 +27,10 @@
 		pointer-events: none;
 	}
 
+	&--read-only {
+		pointer-events: none;
+	}
+
 	&--clearable &__clearable {
 		transform: scale(0);
 		transition: all 0.2s ease-in-out;
@@ -36,10 +40,49 @@
 		transform: scale(0.75);
 	}
 
-	&__clearable {
+	&-group {
+		display: flex;
+		align-items: center;
+	}
+
+	&-group & {
+		border-radius: 0px;
+	}
+
+	&-group &:first-of-type {
+		border-top-left-radius: var(--#{$prefix}input-border-radius);
+		border-bottom-left-radius: var(--#{$prefix}input-border-radius);
+	}
+
+	&-group &:last-of-type {
+		border-top-right-radius: var(--#{$prefix}input-border-radius);
+		border-bottom-right-radius: var(--#{$prefix}input-border-radius);
+	}
+
+	&__icon {
+		padding: 0;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		border: none;
+		outline: none;
+		background-color: transparent;
+	}
+
+	&__icon--opacity {
+		opacity: 0;
+	}
+
+	&__icon--pointer {
+		cursor: pointer;
+	}
+
+	&:hover &__icon--opacity-hoverable {
+		opacity: 0.5;
+
+		&:hover {
+			opacity: 1;
+		}
 	}
 
 	&__content {
@@ -48,6 +91,25 @@
 		display: flex;
 		align-items: center;
 		z-index: 1;
+
+		&--chips {
+			padding-block: var(--#{$prefix}input-padding-y);
+			padding-inline: var(--#{$prefix}input-padding-x);
+			flex-grow: 1;
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.25rem;
+
+			& input {
+				flex: 1;
+				height: 24px;
+				border: none;
+				outline: none;
+				color: inherit;
+				background: inherit;
+				min-width: 0;
+			}
+		}
 	}
 
 	&__field {
@@ -75,7 +137,8 @@
 		}
 	}
 
-	&__search {
+	&__search,
+	&__placeholder {
 		flex: 1;
 		width: 100%;
 		padding-block: var(--#{$prefix}input-padding-y);
@@ -90,30 +153,20 @@
 		display: block;
 	}
 
-	&__chips {
-		padding-block: var(--#{$prefix}input-padding-y);
-		padding-inline: var(--#{$prefix}input-padding-x);
-		flex-grow: 1;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.25rem;
-
-		& input {
-			flex: 1;
-			height: 24px;
-			border: none;
-			outline: none;
-			color: inherit;
-			background: inherit;
-			min-width: 0;
-		}
+	&__placeholder {
+		opacity: 0.6;
 	}
 
 	&__start-content,
 	&__end-content {
 		flex-shrink: 0;
+		height: 100%;
 		display: flex;
 		align-items: center;
+		font-size: var(--#{$prefix}input-font-size);
+		font-family: var(--#{$prefix}input-font-family);
+		line-height: var(--#{$prefix}input-line-height);
+		gap: var(--#{$prefix}input-content-gap);
 
 		.#{$prefix}icon {
 			font-size: var(--#{$prefix}input-icon-size);

package/scss/components/_list.scss

@@ -36,8 +36,7 @@
 
 		&--disabled {
 			opacity: 0.6;
-			cursor: not-allowed;
-			user-select: none;
+			pointer-events: none;
 		}
 
 		&__start-content,

package/scss/components/_toolbar.scss

@@ -35,7 +35,6 @@
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
-		gap: var(--#{$prefix}toolbar-content-gap);
 	}
 
 	&__title {

package/scss/themes/fci/_tokens.scss

@@ -4,11 +4,14 @@
 	--#{$prefix}primary-rgb: 153 0 0;
 
 	--#{$prefix}primary-color: hsl(0, 100%, 30%);
-	--#{$prefix}secondary-color: hsl(217, 33%, 17%);
-	--#{$prefix}success-color: hsl(150, 100%, 30%);
-	--#{$prefix}info-color: rgb(120, 40, 200);
-	--#{$prefix}warning-color: rgb(245, 165, 36);
-	--#{$prefix}danger-color: rgb(243, 18, 18);
+	--#{$prefix}secondary-color: #0f172a;
+	--#{$prefix}success-color: #16a34a;
+	--#{$prefix}success-dark-color: #15803d;
+	--#{$prefix}info-color: #7c3aed;
+	--#{$prefix}info-dark-color: #5b21b6;
+	--#{$prefix}warning-color: #f89406;
+	--#{$prefix}warning-dark-color: #ae6704;
+	--#{$prefix}danger-color: #dc2626;
 	--#{$prefix}black-color: #000;
 	--#{$prefix}white-color: #fff;
 
@@ -27,6 +30,16 @@
 	--#{$prefix}font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
+	--#{$prefix}fs-xs: 0.75rem;
+	--#{$prefix}fs-sm: 0.875rem;
+	--#{$prefix}fs-md: 1rem;
+	--#{$prefix}fs-lg: 1.125rem;
+	--#{$prefix}fs-xl: 1.25rem;
+	--#{$prefix}fs-2xl: 1.5rem;
+	--#{$prefix}fs-3xl: 1.75rem;
+	--#{$prefix}fs-4xl: 2rem;
+	--#{$prefix}fs-5xl: 2.5rem;
+
 	--#{$prefix}shadow-none: none;
 	--#{$prefix}shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 	--#{$prefix}shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

package/scss/themes/fci/components/_accordion.scss

@@ -1,20 +1,47 @@
 @use '../../../variables' as *;
 
+$colors-map: (primary, secondary, success, info, warning, danger);
+
 .#{$prefix}theme-fci {
 	.#{$prefix}accordion {
-		--#{$prefix}accordion-border-radius: 10px;
-
-		--#{$prefix}accordion-border-width: 1px;
-		--#{$prefix}accordion-border-style: solid;
 		--#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
 
+		--#{$prefix}accordion-item-border: 1px solid var(--#{$prefix}accordion-border-color);
+
 		--#{$prefix}accordion-header-border-color: var(--#{$prefix}accordion-border-color);
 
 		--#{$prefix}accordion-header-title-font-weight: 500;
 		--#{$prefix}accordion-header-subtitle-font-weight: 400;
+
+		--#{$prefix}accordion-body-color: inherit;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 0px;
+			--#{$prefix}outline-z-index: 1;
+			--#{$prefix}outline-border-color: var(--#{$prefix}accordion-border-color);
+		}
+	}
+
+	.#{$prefix}accordion--bordered:not(.#{$prefix}accordion--splitted) {
+		--#{$prefix}accordion-border-radius: 10px;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+		}
 	}
 
-	.#{$prefix}accordion--xs .#{$prefix}accordion-header {
+	.#{$prefix}accordion--bordered.#{$prefix}accordion--splitted .#{$prefix}accordion-item {
+		--#{$prefix}accordion-border-radius: 10px;
+		--#{$prefix}accordion-item-border: none;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+		}
+	}
+
+	.#{$prefix}accordion--xs {
+		--#{$prefix}accordion-splitted-gap: 0.25rem;
+
 		--#{$prefix}accordion-header-min-height: 36px;
 		--#{$prefix}accordion-header-padding-y: 0.685rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -27,16 +54,16 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 11px;
 		--#{$prefix}accordion-header-title-line-height: 14px;
-	}
 
-	.#{$prefix}accordion--xs .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 0.75rem;
 		--#{$prefix}accordion-body-line-height: 18px;
 	}
 
-	.#{$prefix}accordion--sm .#{$prefix}accordion-header {
+	.#{$prefix}accordion--sm {
+		--#{$prefix}accordion-splitted-gap: 0.5rem;
+
 		--#{$prefix}accordion-header-min-height: 48px;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -48,9 +75,7 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.75rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 16px;
-	}
 
-	.#{$prefix}accordion--sm .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1.25rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 0.875rem;
@@ -58,10 +83,8 @@
 	}
 
 	.#{$prefix}accordion--md {
-		--#{$prefix}accordion-splitted-gap: 0.5rem;
-	}
+		--#{$prefix}accordion-splitted-gap: 0.75rem;
 
-	.#{$prefix}accordion--md .#{$prefix}accordion-header {
 		--#{$prefix}accordion-header-min-height: 56px;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -75,20 +98,20 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 18px;
-	}
 
-	.#{$prefix}accordion--md .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
-		--#{$prefix}icon-font-size-default: 24px;
-	}
-
-	.#{$prefix}accordion--md .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1.5rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 1rem;
 		--#{$prefix}accordion-body-line-height: 24px;
 	}
 
-	.#{$prefix}accordion--lg .#{$prefix}accordion-header {
+	.#{$prefix}accordion--md .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 24px;
+	}
+
+	.#{$prefix}accordion--lg {
+		--#{$prefix}accordion-splitted-gap: 1rem;
+
 		--#{$prefix}accordion-header-min-height: 64px;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -101,16 +124,16 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 18px;
-	}
 
-	.#{$prefix}accordion--lg .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1.5rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 1rem;
 		--#{$prefix}accordion-body-line-height: 24px;
 	}
 
-	.#{$prefix}accordion--xl .#{$prefix}accordion-header {
+	.#{$prefix}accordion--xl {
+		--#{$prefix}accordion-splitted-gap: 1.25rem;
+
 		--#{$prefix}accordion-header-min-height: 3.5rem;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -123,152 +146,78 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 18px;
-	}
 
-	.#{$prefix}accordion--xl .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1.5rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 1rem;
 		--#{$prefix}accordion-body-line-height: 24px;
 	}
 
-	.#{$prefix}accordion-item--selected {
-		--#{$prefix}accordion-header-title-font-weight: 700;
-	}
-
-	.#{$prefix}accordion--plain.#{$prefix}accordion--primary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: var(--#{$prefix}primary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}white-color);
-		}
-	}
-
-	.#{$prefix}accordion-header--plain.#{$prefix}accordion-header--primary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}primary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}white-color);
+	.#{$prefix}accordion-item {
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 0px;
+			--#{$prefix}outline-z-index: 1;
+			--#{$prefix}outline-border-color: var(--#{$prefix}accordion-border-color);
 		}
 	}
 
-	.#{$prefix}accordion--plain.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: inherit;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}white-color);
-		}
+	.#{$prefix}accordion-item--selected {
+		--#{$prefix}accordion-header-title-font-weight: 700;
 	}
 
-	.#{$prefix}accordion-header--plain.#{$prefix}accordion-header--secondary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
-
+	.#{$prefix}accordion-body {
 		& > .#{$prefix}surface {
 			--#{$prefix}surface-color: var(--#{$prefix}white-color);
 		}
 	}
 
-	.#{$prefix}accordion--flat.#{$prefix}accordion--primary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: var(--#{$prefix}primary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-			--#{$prefix}surface-opacity: 0.16;
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-color);
 		}
-	}
-
-	.#{$prefix}accordion-header--flat.#{$prefix}accordion-header--primary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}primary-color);
 
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-			--#{$prefix}surface-opacity: 0.16;
+		.#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}white-color);
+			}
 		}
 	}
 
-	.#{$prefix}accordion--flat.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: inherit;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-			--#{$prefix}surface-opacity: 0.08;
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
 		}
-	}
 
-	.#{$prefix}accordion-header--flat.#{$prefix}accordion-header--secondary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-			--#{$prefix}surface-opacity: 0.08;
+		.#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+			}
 		}
 	}
 
-	.#{$prefix}accordion--tonal.#{$prefix}accordion--primary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: inherit;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-			--#{$prefix}surface-opacity: 0.16;
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-color);
 		}
-	}
 
-	.#{$prefix}accordion-header--tonal.#{$prefix}accordion-header--primary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-			--#{$prefix}surface-opacity: 0.16;
+		.#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}surface-opacity: 0.08;
+			}
 		}
 	}
 
-	.#{$prefix}accordion--tonal.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: inherit;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-			--#{$prefix}surface-opacity: 0.08;
-		}
-	}
-
-	.#{$prefix}accordion-header--tonal.#{$prefix}accordion-header--secondary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-			--#{$prefix}surface-opacity: 0.08;
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}black-color);
 		}
-	}
-
-	.#{$prefix}accordion--filled.#{$prefix}accordion--primary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: #fff;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-		}
-	}
 
-	.#{$prefix}accordion-header--filled.#{$prefix}accordion-header--primary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-		}
-	}
-
-	.#{$prefix}accordion--filled.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: #fff;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-		}
-	}
-
-	.#{$prefix}accordion-header--filled.#{$prefix}accordion-header--secondary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
+		.#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}surface-opacity: 0.08;
+			}
 		}
 	}
 }

package/scss/themes/fci/components/_badge.scss

@@ -1,13 +1,6 @@
 @use '../../../variables' as *;
 
-$colors-map: (
-	primary: var(--#{$prefix}primary-color),
-	secondary: var(--#{$prefix}secondary-color),
-	success: var(--#{$prefix}success-color),
-	info: var(--#{$prefix}info-color),
-	warning: var(--#{$prefix}warning-color),
-	danger: var(--#{$prefix}danger-color),
-);
+$colors-map: (primary, secondary, success, info, warning, danger);
 
 .#{$prefix}theme-fci {
 	.#{$prefix}badge {
@@ -28,14 +21,20 @@ $colors-map: (
 		--#{$prefix}badge-color: var(--#{$prefix}white-color);
 	}
 
-	@each $key, $value in $colors-map {
-		.#{$prefix}badge--#{$key} {
-			--#{$prefix}badge-background: #{$value};
+	@each $color in $colors-map {
+		.#{$prefix}badge--#{$color} {
+			--#{$prefix}badge-background: var(--#{$prefix}#{$color}-color);
 		}
 
-		@if $key == 'secondary' {
-			.#{$prefix}badge--#{$key} {
-				--#{$prefix}badge-color: var(--#{$prefix}black-color);
+		@if $color == 'secondary' {
+			.#{$prefix}badge--#{$color} {
+				--#{$prefix}badge-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}badge-background: #fff;
+
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-color: inherit;
+					--#{$prefix}overlay-opacity: 0.16;
+				}
 			}
 		}
 	}