@unifiedsoftware/styles 1.1.8 → 2.0.0-alpha.2

package/scss/components/_icon.scss

@@ -3,7 +3,7 @@
 .#{$prefix}icon {
 	width: 1em;
 	height: 1em;
-	font-size: var(--#{$prefix}icon-font-size);
+	font-size: var(--#{$prefix}icon-font-size, var(--#{$prefix}icon-font-size-default)) !important;
 	color: var(--#{$prefix}icon-color);
 	display: flex;
 	justify-content: center;

package/scss/components/_index.scss

@@ -31,4 +31,7 @@
 @use 'tabs';
 
 @use 'card';
+@use 'descriptions';
 @use 'result';
+
+@use 'nav-rail';

package/scss/components/_input.scss

@@ -85,9 +85,9 @@
 		line-height: var(--#{$prefix}input-line-height);
 		color: var(--#{$prefix}input-color);
 		overflow: hidden;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 1;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		display: block;
 	}
 
 	&__chips {

package/scss/components/_nav-rail.scss

@@ -0,0 +1,183 @@
+@use '../variables' as *;
+
+.#{$prefix}nav-rail {
+	flex-shrink: 0;
+	position: relative;
+	width: 73px;
+	height: 100%;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+
+	&--left {
+		border-right-width: 1px;
+		border-right-color: var(--#{$prefix}nav-rail-border-color);
+		border-right-style: solid;
+	}
+
+	&--right {
+		border-left-width: 1px;
+		border-left-color: var(--#{$prefix}nav-rail-border-color);
+		border-left-style: solid;
+	}
+
+	&__start-content,
+	&__end-content {
+		flex-shrink: 0;
+	}
+
+	&__start-content {
+		padding-block: var(--#{$prefix}nav-rail-start-content-padding-y);
+		padding-inline: var(--#{$prefix}nav-rail-start-content-padding-x);
+		gap: var(--#{$prefix}nav-rail-start-content-gap);
+	}
+
+	&__end-content {
+		padding-block: var(--#{$prefix}nav-rail-end-content-padding-y);
+		padding-inline: var(--#{$prefix}nav-rail-end-content-padding-x);
+		gap: var(--#{$prefix}nav-rail-end-content-gap);
+	}
+
+	&__content {
+		flex-grow: 1;
+		padding-block: var(--#{$prefix}nav-rail-content-padding-y);
+		padding-inline: var(--#{$prefix}nav-rail-content-padding-x);
+		gap: var(--#{$prefix}nav-rail-content-gap);
+	}
+
+	&__start-content,
+	&__end-content,
+	&__content {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&-item {
+		flex-shrink: 0;
+		padding-block: var(--#{$prefix}nav-rail-item-padding-y);
+		padding-inline: var(--#{$prefix}nav-rail-item-padding-x);
+		position: relative;
+		text-decoration: none;
+		opacity: var(--#{$prefix}nav-rail-item-opacity);
+		border-radius: var(--#{$prefix}nav-rail-item-border-radius);
+		cursor: default;
+		color: var(--#{$prefix}nav-rail-item-color);
+		background-color: var(--#{$prefix}nav-rail-item-background);
+		display: flex;
+		user-select: none;
+
+		&__indicator {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			z-index: 1;
+			width: var(--#{$prefix}nav-rail-item-indicator-size);
+			z-index: 1;
+			background: var(--#{$prefix}nav-rail-item-indicator-color);
+			transform: translateX(calc(var(--#{$prefix}nav-rail-item-indicator-size) * -1));
+			transition:
+				transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09),
+				inset 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
+		}
+
+		&__content {
+			flex-grow: 1;
+			position: relative;
+			padding-block: var(--#{$prefix}nav-rail-item-content-padding-y);
+			padding-inline: var(--#{$prefix}nav-rail-item-content-padding-x);
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			gap: var(--#{$prefix}nav-rail-item-gap);
+		}
+
+		&__media {
+			position: relative;
+			outline-width: var(--#{$prefix}nav-rail-item-media-border-width);
+			outline-style: var(--#{$prefix}nav-rail-item-media-border-style);
+			outline-color: var(--#{$prefix}nav-rail-item-media-border-color);
+			width: var(--#{$prefix}nav-rail-item-media-width);
+			height: var(--#{$prefix}nav-rail-item-media-height);
+			border-radius: var(--#{$prefix}nav-rail-item-media-border-radius);
+			overflow: hidden;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			transition: transform 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
+		}
+
+		&__icon {
+			padding-block: var(--#{$prefix}nav-rail-item-icon-padding-y);
+			padding-inline: var(--#{$prefix}nav-rail-item-icon-padding-x);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			& .#{$prefix}icon {
+				font-size: var(--#{$prefix}nav-rail-item-icon-font-size);
+			}
+		}
+
+		&__label {
+			position: absolute;
+			bottom: calc((var(--#{$prefix}nav-rail-item-label-font-size) + var(--#{$prefix}nav-rail-item-gap, 0)) * -1);
+			left: 50%;
+			transform: translateX(-50%);
+			font-size: var(--#{$prefix}nav-rail-item-label-font-size);
+			font-weight: var(--#{$prefix}nav-rail-item-label-font-weight);
+			line-height: var(--#{$prefix}nav-rail-item-label-line-height);
+			text-wrap: nowrap;
+			overflow: hidden;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 1;
+			transition: opacity 0.125s cubic-bezier(0.17, 0.67, 0.55, 1.09);
+		}
+
+		&--selected {
+			color: var(--#{$prefix}_active-nav-rail-item-color);
+		}
+
+		&--selected &__media {
+			outline-color: var(--#{$prefix}_active-nav-rail-item-media-border-color);
+		}
+
+		&--selected &__icon,
+		&:hover &__icon {
+			transform: scale(1.15);
+		}
+
+		&--selected &__indicator,
+		&--selected:hover &__indicator {
+			color: var(--#{$prefix}_active-nav-rail-item-indicator-color);
+		}
+
+		&--selected &__indicator,
+		&:hover &__indicator {
+			transform: translateX(0px);
+		}
+	}
+
+	&--left &-item__indicator {
+		left: -25%;
+		border-radius: 0px var(--#{$prefix}nav-rail-item-indicator-border-radius)
+			var(--#{$prefix}nav-rail-item-indicator-border-radius) 0px;
+	}
+
+	&--right &-item__indicator {
+		right: -25%;
+		border-radius: var(--#{$prefix}nav-rail-item-indicator-border-radius) 0px 0px
+			var(--#{$prefix}nav-rail-item-indicator-border-radius);
+	}
+
+	&--left &-item--selected &-item__indicator,
+	&--left &-item--selected:hover &-item__indicator {
+		left: 0px;
+	}
+
+	&--right &-item--selected &-item__indicator,
+	&--right &-item--selected:hover &-item__indicator {
+		right: 0px;
+	}
+}

package/scss/components/_swipe.scss

@@ -2,44 +2,44 @@
 
 .#{$prefix}swipe {
 	position: relative;
-	overflow-x: hidden;
-	display: flex;
-	align-items: center;
-	gap: var(--#{$prefix}swipe-gap);
 
-	@media (max-width: 767px) and (hover: none) {
-		overflow: auto;
-	}
-
-	&-wrapper {
+	&__content {
 		position: relative;
+		overflow-x: hidden;
+		display: flex;
+		align-items: center;
+		gap: var(--#{$prefix}swipe-gap);
 
-		&__left,
-		&__right {
-			position: absolute;
-			top: 50%;
-			transform: translateY(-50%);
-			z-index: 1;
+		@media (max-width: 767px) and (hover: none) {
+			overflow-x: auto;
 		}
+	}
 
-		&__left {
-			left: -1.25rem;
-		}
+	&__start-content,
+	&__end-content {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 1;
+	}
 
-		&__right {
-			right: -1.25rem;
-		}
+	&__start-content {
+		left: -1.25rem;
+	}
 
-		&--auto-hide &__left,
-		&--auto-hide &__right {
-			transform: translateY(-50%) scale(0);
-			transition: all 0.2s ease-in-out;
-		}
+	&__end-content {
+		right: -1.25rem;
+	}
 
-		&--auto-hide:hover &__left,
-		&--auto-hide:hover &__right {
-			transform: translateY(-50%) scale(1);
-		}
+	&--auto-hide &__start-content,
+	&--auto-hide &__end-content {
+		transform: translateY(-50%) scale(0);
+		transition: all 0.2s ease-in-out;
+	}
+
+	&--auto-hide:hover &__start-content,
+	&--auto-hide:hover &__end-content {
+		transform: translateY(-50%) scale(1);
 	}
 
 	&--start &-item {

package/scss/components/_tabs.scss

@@ -81,7 +81,7 @@
 		inset: auto 0px 0px;
 		opacity: 0;
 		z-index: -1;
-		background: var(--#{$prefix}tab-indicator-color);
+		color: var(--#{$prefix}tab-indicator-color);
 		transform-origin: left bottom;
 	}
 

package/scss/components/_toolbar.scss

@@ -16,13 +16,18 @@
 		margin: 0 auto;
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--#{$prefix}toolbar-gap);
 		z-index: 1;
 	}
 
 	&__start-action,
-	&__end-action {
+	&__start-content,
+	&__end-action,
+	&__end-content {
 		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--#{$prefix}toolbar-content-gap);
 	}
 
 	&__content {
@@ -30,6 +35,7 @@
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
+		gap: var(--#{$prefix}toolbar-content-gap);
 	}
 
 	&__title {

package/scss/themes/fci/_index.scss

@@ -1,3 +1,5 @@
 @use 'components';
 
+@use 'kendo';
+
 @use 'tokens';

package/scss/themes/fci/_kendo.scss

@@ -0,0 +1,44 @@
+@use '../../variables' as *;
+
+.light-scroll::-webkit-scrollbar,
+.us-viewer .k-overflow-auto::-webkit-scrollbar {
+	width: 6px !important;
+	height: 6px !important;
+}
+
+.light-scroll ::-webkit-scrollbar-thumb,
+.us-viewer .k-overflow-auto::-webkit-scrollbar-thumb {
+	border-radius: 20px;
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
+.light-scroll::-webkit-scrollbar-track,
+.us-viewer .k-overflow-auto::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.us-viewer .k-toolbar {
+	background-color: #fff;
+	border-color: rgba(0, 0, 0, 0.12);
+}
+
+.us-viewer {
+	height: 100%;
+}
+
+.us-viewer .k-pdf-viewer {
+	border: none;
+}
+
+.us-viewer .k-button-md {
+	border-radius: 8px;
+}
+
+.us-viewer .k-input-md {
+	border-radius: 8px;
+}
+
+.us-viewer .k-button-solid-base.k-selected {
+	border-color: var(--us-primary-color);
+	background-color: var(--us-primary-color);
+}

package/scss/themes/fci/_tokens.scss

@@ -3,21 +3,23 @@
 .#{$prefix}theme-fci {
 	--#{$prefix}primary-rgb: 153 0 0;
 
-	--#{$prefix}primary-color: #990000;
-	--#{$prefix}secondary-color: #dde4eb;
-	--#{$prefix}success-color: #e1ae30;
-	--#{$prefix}info-color: #8862e0;
-	--#{$prefix}warning-color: #ffaf00;
-	--#{$prefix}danger-color: #ff0017;
+	--#{$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}black-color: #000;
 	--#{$prefix}white-color: #fff;
 
+	--#{$prefix}border-color: rgba(0, 0, 0, 0.12);
+
 	--#{$prefix}title-color: #171717;
 	--#{$prefix}subtitle-color: #737373;
 	--#{$prefix}body-color: #404040;
 
 	--#{$prefix}primary-action-color: var(--#{$prefix}primary-color);
-	--#{$prefix}secondary-action-color: #334155;
+	--#{$prefix}secondary-action-color: #475569;
 
 	--#{$prefix}font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

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

@@ -2,26 +2,19 @@
 
 .#{$prefix}theme-fci {
 	.#{$prefix}accordion {
+		--#{$prefix}accordion-border-radius: 10px;
+
 		--#{$prefix}accordion-border-width: 1px;
 		--#{$prefix}accordion-border-style: solid;
-		--#{$prefix}accordion-border-color: rgba(9, 30, 66, 0.14);
-	}
+		--#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
 
-	.#{$prefix}accordion-header {
 		--#{$prefix}accordion-header-border-color: var(--#{$prefix}accordion-border-color);
 
 		--#{$prefix}accordion-header-title-font-weight: 500;
-		--#{$prefix}accordion-header-title-color: var(--#{$prefix}title-color);
-
 		--#{$prefix}accordion-header-subtitle-font-weight: 400;
-		--#{$prefix}accordion-header-subtitle-color: var(--#{$prefix}subtitle-color);
 	}
 
-	.#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: var(--#{$prefix}body-color);
-	}
-
-	.#{$prefix}accordion--sm .#{$prefix}accordion-header {
+	.#{$prefix}accordion--xs .#{$prefix}accordion-header {
 		--#{$prefix}accordion-header-min-height: 36px;
 		--#{$prefix}accordion-header-padding-y: 0.685rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -36,43 +29,46 @@
 		--#{$prefix}accordion-header-title-line-height: 14px;
 	}
 
-	.#{$prefix}accordion--sm .#{$prefix}accordion-body {
+	.#{$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-body-color: var(--#{$prefix}body-color);
 	}
 
-	.#{$prefix}accordion--md .#{$prefix}accordion-header {
-		--#{$prefix}accordion-header-min-height: 2.5rem;
+	.#{$prefix}accordion--sm .#{$prefix}accordion-header {
+		--#{$prefix}accordion-header-min-height: 48px;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
 		--#{$prefix}accordion-header-padding-level: 1.25rem;
 		--#{$prefix}accordion-header-gap: 1rem;
 
-		--#{$prefix}accordion-header-title-font-size: 0.8125rem;
+		--#{$prefix}accordion-header-title-font-size: 0.875rem;
 		--#{$prefix}accordion-header-title-line-height: 20px;
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.75rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 16px;
 	}
 
-	.#{$prefix}accordion--md .#{$prefix}accordion-body {
+	.#{$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;
 		--#{$prefix}accordion-body-line-height: 20px;
-		--#{$prefix}accordion-body-color: var(--#{$prefix}body-color);
 	}
 
-	.#{$prefix}accordion--lg .#{$prefix}accordion-header {
-		--#{$prefix}accordion-header-min-height: 2.75rem;
+	.#{$prefix}accordion--md {
+		--#{$prefix}accordion-splitted-gap: 0.5rem;
+	}
+
+	.#{$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;
 		--#{$prefix}accordion-header-padding-level: 1.25rem;
 		--#{$prefix}accordion-header-font-size: 0.75rem;
 		--#{$prefix}accordion-header-gap: 1rem;
+		--#{$prefix}accordion-header-content-gap: 0.5rem;
 
 		--#{$prefix}accordion-header-title-font-size: 0.875rem;
 		--#{$prefix}accordion-header-title-line-height: 24px;
@@ -81,11 +77,198 @@
 		--#{$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-header-min-height: 64px;
+		--#{$prefix}accordion-header-padding-y: 0.625rem;
+		--#{$prefix}accordion-header-padding-x: 1rem;
+		--#{$prefix}accordion-header-padding-level: 1.25rem;
+		--#{$prefix}accordion-header-font-size: 0.75rem;
+		--#{$prefix}accordion-header-gap: 1rem;
+
+		--#{$prefix}accordion-header-title-font-size: 1rem;
+		--#{$prefix}accordion-header-title-line-height: 24px;
+
+		--#{$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-body-color: var(--#{$prefix}body-color);
+	}
+
+	.#{$prefix}accordion--xl .#{$prefix}accordion-header {
+		--#{$prefix}accordion-header-min-height: 3.5rem;
+		--#{$prefix}accordion-header-padding-y: 0.625rem;
+		--#{$prefix}accordion-header-padding-x: 1rem;
+		--#{$prefix}accordion-header-padding-level: 1.25rem;
+		--#{$prefix}accordion-header-font-size: 0.75rem;
+		--#{$prefix}accordion-header-gap: 1rem;
+
+		--#{$prefix}accordion-header-title-font-size: 1rem;
+		--#{$prefix}accordion-header-title-line-height: 24px;
+
+		--#{$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--plain.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
+		--#{$prefix}accordion-body-color: inherit;
+
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: var(--#{$prefix}white-color);
+		}
+	}
+
+	.#{$prefix}accordion-header--plain.#{$prefix}accordion-header--secondary {
+		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
+
+		& > .#{$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;
+		}
+	}
+
+	.#{$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--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;
+		}
+	}
+
+	.#{$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--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;
+		}
+	}
+
+	.#{$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--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;
+		}
+	}
+
+	.#{$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);
+		}
 	}
 }