@unifiedsoftware/styles 2.0.1-beta.9 → 2.0.2

package/scss/themes/centurion/components/_radio.scss

@@ -0,0 +1,133 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}radio-group {
+		&--xs {
+			--#{$prefix}radio-group-gap: 0.2rem;
+		}
+
+		&--sm {
+			--#{$prefix}radio-group-gap: 0.375rem;
+		}
+
+		&--md {
+			--#{$prefix}radio-group-gap: 0.5rem;
+		}
+
+		&--lg {
+			--#{$prefix}radio-group-gap: 0.75rem;
+		}
+
+		&--xl {
+			--#{$prefix}radio-group-gap: 0.875rem;
+		}
+	}
+
+	.#{$prefix}radio {
+		--#{$prefix}radio-control-border-width: 1px;
+		--#{$prefix}radio-control-border-style: solid;
+		--#{$prefix}radio-control-border-color: rgba(0, 0, 0, 0.2);
+		--#{$prefix}radio-control-border-radius: 9999px;
+		--#{$prefix}radio-control-color: var(--#{$prefix}white-color);
+
+		--#{$prefix}_checked-radio-control-border-color: var(--#{$prefix}primary-color);
+		--#{$prefix}_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--#{$prefix}primary-rgb) / 40%);
+
+		--#{$prefix}radio-tap-background: var(--#{$prefix}primary-color);
+
+		&--xs {
+			--#{$prefix}radio-gap: 0.375rem;
+
+			--#{$prefix}radio-control-width: 14px;
+			--#{$prefix}radio-control-height: 14px;
+			--#{$prefix}radio-label-font-size: 0.75rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.5rem;
+			}
+		}
+
+		&--sm {
+			--#{$prefix}radio-gap: 0.375rem;
+
+			--#{$prefix}radio-control-width: 16px;
+			--#{$prefix}radio-control-height: 16px;
+			--#{$prefix}radio-label-font-size: 0.75rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.5rem;
+			}
+		}
+
+		&--md {
+			--#{$prefix}radio-gap: 0.5rem;
+
+			--#{$prefix}radio-control-width: 18px;
+			--#{$prefix}radio-control-height: 18px;
+			--#{$prefix}radio-label-font-size: 0.875rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.625rem;
+			}
+		}
+
+		&--lg {
+			--#{$prefix}radio-gap: 0.5rem;
+
+			--#{$prefix}radio-control-width: 20px;
+			--#{$prefix}radio-control-height: 20px;
+			--#{$prefix}radio-label-font-size: 0.875rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.75rem;
+			}
+		}
+
+		&--xl {
+			--#{$prefix}radio-gap: 0.5rem;
+
+			--#{$prefix}radio-control-width: 22px;
+			--#{$prefix}radio-control-height: 22px;
+			--#{$prefix}radio-label-font-size: 1rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.875rem;
+			}
+		}
+
+		&--light {
+			--#{$prefix}radio-control-border-color: rgba(0, 0, 0, 0.2);
+
+			--#{$prefix}radio-tap-background: transparent;
+
+			--#{$prefix}radio-control-color: rgba(0, 0, 0, 0.75);
+			--#{$prefix}_checked-radio-control-border-color: rgba(0, 0, 0, 0.75);
+			--#{$prefix}_focus-radio-control-box-shadow: 0px 4px 8px rgba(0 0 0 / 40%);
+
+			--#{$prefix}radio-label-color: var(--#{$prefix}black-color);
+		}
+
+		&--dark {
+			--#{$prefix}radio-control-border-color: rgba(255 255 255 / 30%);
+
+			--#{$prefix}radio-tap-background: transparent;
+
+			--#{$prefix}radio-control-color: var(--#{$prefix}white-color);
+			--#{$prefix}_checked-radio-control-border-color: var(--#{$prefix}white-color);
+			--#{$prefix}_focus-radio-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 40%);
+
+			--#{$prefix}radio-label-color: var(--#{$prefix}white-color);
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}radio--#{$color} {
+			--#{$prefix}_checked-radio-control-border-color: var(--#{$prefix}#{$color}-color);
+			--#{$prefix}_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--#{$prefix}#{$color}-rgb) / 40%);
+
+			--#{$prefix}radio-tap-background: var(--#{$prefix}#{$color}-color);
+		}
+	}
+}

package/scss/themes/centurion/components/_result.scss

@@ -0,0 +1,106 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}result {
+		&--sm {
+			--#{$prefix}result-padding-y: 1rem;
+			--#{$prefix}result-padding-x: 1rem;
+
+			--#{$prefix}result-gap: 0.5rem;
+
+			--#{$prefix}result-content-gap: 0.5rem;
+
+			--#{$prefix}result-title-font-size: 1.25rem;
+			--#{$prefix}result-title-font-weight: 500;
+
+			--#{$prefix}result-subtitle-font-size: 0.875rem;
+			--#{$prefix}result-subtitle-font-weight: 400;
+		}
+
+		&--md {
+			--#{$prefix}result-padding-y: 3rem;
+			--#{$prefix}result-padding-x: 3rem;
+
+			--#{$prefix}result-gap: 1rem;
+
+			--#{$prefix}result-content-gap: 0.5rem;
+
+			--#{$prefix}result-title-font-size: 1.5rem;
+			--#{$prefix}result-title-font-weight: 500;
+
+			--#{$prefix}result-subtitle-font-size: 1rem;
+			--#{$prefix}result-subtitle-font-weight: 400;
+		}
+
+		&--lg {
+			--#{$prefix}result-padding-y: 5rem;
+			--#{$prefix}result-padding-x: 5rem;
+
+			--#{$prefix}result-gap: 1.5rem;
+
+			--#{$prefix}result-content-gap: 0.5rem;
+
+			--#{$prefix}result-title-font-size: 1.75rem;
+			--#{$prefix}result-title-font-weight: 500;
+
+			--#{$prefix}result-subtitle-font-size: 1rem;
+			--#{$prefix}result-subtitle-font-weight: 400;
+		}
+	}
+
+	.#{$prefix}result--sm {
+		.#{$prefix}result__icon {
+			& > .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 4rem;
+			}
+		}
+	}
+
+	.#{$prefix}result--md {
+		.#{$prefix}result__icon {
+			& > .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 5rem;
+			}
+		}
+	}
+
+	.#{$prefix}result--lg {
+		.#{$prefix}result__icon {
+			& > .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 6rem;
+			}
+		}
+	}
+
+	.#{$prefix}result--sucess {
+		.#{$prefix}result__icon {
+			& > .#{$prefix}icon {
+				--#{$prefix}icon-color: var(--#{$prefix}success-color);
+			}
+		}
+	}
+
+	.#{$prefix}result--info {
+		.#{$prefix}result__icon {
+			& > .#{$prefix}icon {
+				--#{$prefix}icon-color: var(--#{$prefix}info-color);
+			}
+		}
+	}
+
+	.#{$prefix}result--warning {
+		.#{$prefix}result__icon {
+			& > .#{$prefix}icon {
+				--#{$prefix}icon-color: var(--#{$prefix}warning-color);
+			}
+		}
+	}
+
+	.#{$prefix}result--danger {
+		.#{$prefix}result__icon {
+			& > .#{$prefix}icon {
+				--#{$prefix}icon-color: var(--#{$prefix}danger-color);
+			}
+		}
+	}
+}

package/scss/themes/centurion/components/_steps.scss

@@ -0,0 +1,79 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}steps {
+		--#{$prefix}step-divider-color: var(--#{$prefix}border-color);
+
+		--#{$prefix}_completed-step-divider-color: var(--#{$prefix}primary-color);
+
+		--#{$prefix}_current-step-divider-color: var(--#{$prefix}border-color);
+		--#{$prefix}_current-step-border-color: var(--#{$prefix}primary-color);
+
+		--#{$prefix}step-background-color: var(--#{$prefix}white-color);
+	}
+
+	.#{$prefix}step {
+		&__avatar {
+			--#{$prefix}step-indicator-font-size: 1rem;
+			--#{$prefix}step-indicator-font-weight: var(--#{$prefix}font-weight-medium);
+			--#{$prefix}step-indicator-color: var(--#{$prefix}primary-color);
+
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}primary-color);
+				--#{$prefix}surface-opacity: 0.12;
+			}
+		}
+	}
+
+	.#{$prefix}step--completed .#{$prefix}step__avatar {
+		--#{$prefix}step-indicator-color: var(--#{$prefix}white-color);
+
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
+			--#{$prefix}surface-opacity: 1;
+		}
+	}
+
+	.#{$prefix}step--current .#{$prefix}step__avatar {
+		--#{$prefix}step-indicator-color: var(--#{$prefix}white-color);
+
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
+			--#{$prefix}surface-opacity: 1;
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}step--#{$color} {
+			--#{$prefix}_completed-step-divider-color: var(--#{$prefix}#{$color}-color);
+			--#{$prefix}_current-step-divider-color: var(--#{$prefix}#{$color}-color);
+			--#{$prefix}_current-step-border-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}step--#{$color} .#{$prefix}step__avatar {
+			--#{$prefix}step-indicator-color: var(--#{$prefix}#{$color}-color);
+
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+
+		.#{$prefix}step--completed.#{$prefix}step--#{$color} .#{$prefix}step__avatar {
+			--#{$prefix}step-indicator-color: var(--#{$prefix}white-color);
+
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+
+		.#{$prefix}step--current.#{$prefix}step--#{$color} .#{$prefix}step__avatar {
+			--#{$prefix}step-indicator-color: var(--#{$prefix}white-color);
+
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+	}
+}

package/scss/themes/centurion/components/_swipe.scss

@@ -0,0 +1,6 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}swipe {
+	}
+}

package/scss/themes/centurion/components/_switch.scss

@@ -0,0 +1,116 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}switch {
+		--#{$prefix}switch-control-color: rgba(0, 0, 0, 0.2);
+		--#{$prefix}_checked-switch-control-color: var(--#{$prefix}primary-color);
+		--#{$prefix}_focus-switch-control-box-shadow: 0px 4px 8px rgba(var(--#{$prefix}primary-rgb) / 40%);
+
+		--#{$prefix}switch-thumb-width: 0.875rem;
+		--#{$prefix}switch-thumb-height: 0.875rem;
+		--#{$prefix}switch-thumb-border-radius: 9999px;
+		--#{$prefix}switch-thumb-color: var(--#{$prefix}white-color);
+
+		--#{$prefix}switch-control-border-radius: 9999px;
+
+		&--xs {
+			--#{$prefix}switch-gap: 0.375rem;
+
+			--#{$prefix}switch-control-width: 20px;
+			--#{$prefix}switch-control-height: 14px;
+
+			--#{$prefix}switch-thumb-width: 8px;
+			--#{$prefix}switch-thumb-height: 8px;
+
+			--#{$prefix}switch-label-font-size: 0.75rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.75rem;
+			}
+		}
+
+		&--sm {
+			--#{$prefix}switch-gap: 0.375rem;
+
+			--#{$prefix}switch-control-width: 24px;
+			--#{$prefix}switch-control-height: 16px;
+
+			--#{$prefix}switch-thumb-width: 10px;
+			--#{$prefix}switch-thumb-height: 10px;
+
+			--#{$prefix}switch-label-font-size: 0.75rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.75rem;
+			}
+		}
+
+		&--md {
+			--#{$prefix}switch-gap: 0.5rem;
+
+			--#{$prefix}switch-control-width: 28px;
+			--#{$prefix}switch-control-height: 18px;
+
+			--#{$prefix}switch-thumb-width: 12px;
+			--#{$prefix}switch-thumb-height: 12px;
+
+			--#{$prefix}switch-label-font-size: 0.875rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1rem;
+			}
+		}
+
+		&--lg {
+			--#{$prefix}switch-gap: 0.5rem;
+
+			--#{$prefix}switch-control-width: 32px;
+			--#{$prefix}switch-control-height: 20px;
+
+			--#{$prefix}switch-thumb-width: 14px;
+			--#{$prefix}switch-thumb-height: 14px;
+
+			--#{$prefix}switch-label-font-size: 0.875rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.125rem;
+			}
+		}
+
+		&--xl {
+			--#{$prefix}switch-gap: 0.5rem;
+
+			--#{$prefix}switch-control-width: 36px;
+			--#{$prefix}switch-control-height: 22px;
+
+			--#{$prefix}switch-thumb-width: 14px;
+			--#{$prefix}switch-thumb-height: 14px;
+
+			--#{$prefix}switch-label-font-size: 1rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.125rem;
+			}
+		}
+
+		&--light {
+			--#{$prefix}switch-control-color: rgba(0, 0, 0, 0.2);
+			--#{$prefix}_checked-switch-control-color: rgba(0, 0, 0, 0.8);
+			--#{$prefix}_focus-switch-control-box-shadow: 0px 4px 8px rgba(0 0 0 / 15%);
+
+			--#{$prefix}switch-thumb-color: var(--#{$prefix}white-color);
+
+			--#{$prefix}switch-label-color: var(--#{$prefix}black-color);
+		}
+
+		&--dark {
+			--#{$prefix}switch-control-color: rgba(0, 0, 0, 0.4);
+			--#{$prefix}_checked-switch-control-color: rgba(255 255 255 / 30%);
+			--#{$prefix}_focus-switch-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 15%);
+
+			--#{$prefix}switch-thumb-color: var(--#{$prefix}white-color);
+
+			--#{$prefix}switch-label-color: var(--#{$prefix}white-color);
+		}
+	}
+}

package/scss/themes/centurion/components/_tabs.scss

@@ -0,0 +1,165 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}tabs {
+		&--xs {
+			--#{$prefix}tab-height: 32px;
+			--#{$prefix}tab-padding-x: 12px;
+			--#{$prefix}tab-font-size: 12px;
+		}
+
+		&--sm {
+			--#{$prefix}tab-height: 36px;
+			--#{$prefix}tab-font-size: 13px;
+			--#{$prefix}tab-padding-x: 13px;
+		}
+
+		&--md {
+			--#{$prefix}tab-height: 32px;
+			--#{$prefix}tab-padding-x: 8px;
+			--#{$prefix}tab-font-size: 12px;
+		}
+
+		&--lg {
+			--#{$prefix}tab-height: 44px;
+			--#{$prefix}tab-padding-x: 18px;
+			--#{$prefix}tab-font-size: 16px;
+		}
+
+		&--xl {
+			--#{$prefix}tab-height: 48px;
+			--#{$prefix}tab-padding-x: 22px;
+			--#{$prefix}tab-font-size: 18px;
+		}
+	}
+
+	.#{$prefix}tabs--underlined {
+		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
+		--#{$prefix}tab-indicator-height: 3px;
+		--#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
+	}
+
+	.#{$prefix}tabs--underlined .#{$prefix}tab {
+		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
+		--#{$prefix}tab-indicator-height: 3px;
+		--#{$prefix}tab-indicator-border-radius: 3px;
+		--#{$prefix}tab-border-radius: 0px;
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}_hover-overlay-opacity: 0.08;
+			--#{$prefix}_active-overlay-opacity: 0.12;
+		}
+
+		&--selected {
+			--#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
+		}
+	}
+
+	.#{$prefix}tabs--underlined .#{$prefix}tab {
+		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
+		--#{$prefix}tab-indicator-height: 3px;
+		--#{$prefix}tab-indicator-border-radius: 3px;
+		--#{$prefix}tab-border-radius: 0px;
+
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-opacity: 0;
+		}
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}_hover-overlay-opacity: 0.08;
+			--#{$prefix}_active-overlay-opacity: 0.12;
+		}
+
+		&--selected &__indicator {
+			--#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
+		}
+	}
+
+	.#{$prefix}tabs--underlined .#{$prefix}tab__indicator {
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-opacity: 0;
+			--#{$prefix}surface-transition: none;
+		}
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}overlay-transition: none;
+		}
+	}
+
+	.#{$prefix}tabs--underlined .#{$prefix}tab--selected .#{$prefix}tab__indicator {
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-opacity: 1;
+		}
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+		}
+	}
+
+	.#{$prefix}tabs--pills {
+		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
+		--#{$prefix}tab-indicator-height: 3px;
+		--#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
+	}
+
+	.#{$prefix}tabs--pills .#{$prefix}tab {
+		--#{$prefix}tab-indicator-height: 100%;
+		--#{$prefix}tab-indicator-border-radius: 9999px;
+		--#{$prefix}tab-border-radius: 9999px;
+
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-opacity: 0;
+		}
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}_hover-overlay-opacity: 0.08;
+			--#{$prefix}_active-overlay-opacity: 0.12;
+		}
+	}
+
+	.#{$prefix}tabs--pills .#{$prefix}tab--selected {
+		--#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
+	}
+
+	.#{$prefix}tabs--pills .#{$prefix}tab__indicator {
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-opacity: 0;
+			--#{$prefix}surface-transition: none;
+		}
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}_hover-overlay-opacity: 0.08;
+			--#{$prefix}_active-overlay-opacity: 0.12;
+		}
+	}
+
+	.#{$prefix}tabs--pills .#{$prefix}tab--selected .#{$prefix}tab__indicator {
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-opacity: 0.12;
+		}
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}_hover-overlay-opacity: 0.08;
+			--#{$prefix}_active-overlay-opacity: 0.12;
+		}
+	}
+
+	.#{$prefix}tab {
+		--#{$prefix}tab-color: var(--#{$prefix}secondary-action-color);
+		--#{$prefix}tab-padding-y: 0px;
+		--#{$prefix}tab-font-weight: 500;
+
+		--#{$prefix}tab-closable-color: var(--#{$prefix}secondary-action-color);
+	}
+}

package/scss/themes/centurion/components/_toolbar.scss

@@ -0,0 +1,73 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}toolbar {
+		--#{$prefix}toolbar-background: var(--#{$prefix}white-color);
+
+		--#{$prefix}toolbar-title-font-weight: 500;
+
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: white;
+			--#{$prefix}surface-opacity: 1;
+		}
+
+		&--bordered > .#{$prefix}outline-b {
+			--#{$prefix}outline-border-width: 1px;
+			--#{$prefix}outline-border-color: #ddd;
+		}
+
+		&--sm {
+			--#{$prefix}toolbar-height: 48px;
+			--#{$prefix}toolbar-padding-y: 0.25rem;
+			--#{$prefix}toolbar-padding-x: 1rem;
+
+			--#{$prefix}toolbar-title-font-size: 0.875rem;
+			--#{$prefix}toolbar-title-line-height: 18px;
+			--#{$prefix}toolbar-subtitle-font-size: 12px;
+			--#{$prefix}toolbar-subtitle-line-height: 14px;
+		}
+
+		&--md {
+			--#{$prefix}toolbar-min-height: 30px;
+			--#{$prefix}toolbar-padding-y: 0;
+			--#{$prefix}toolbar-padding-x: 0.625rem;
+			--#{$prefix}toolbar-gap: 0.75rem;
+			--#{$prefix}toolbar-content-gap: 0.5rem;
+
+			--#{$prefix}toolbar-title-font-size: 12px;
+			--#{$prefix}toolbar-title-line-height: 20px;
+			--#{$prefix}toolbar-title-font-weight: 400;
+			--#{$prefix}toolbar-title-color: #000;
+			--#{$prefix}toolbar-subtitle-font-size: 0.75rem;
+			--#{$prefix}toolbar-subtitle-line-height: 16px;
+		}
+
+		&--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 18px;
+		}
+
+		&--lg {
+			--#{$prefix}toolbar-height: 64px;
+			--#{$prefix}toolbar-padding-y: 0.75rem;
+			--#{$prefix}toolbar-padding-x: 1rem;
+
+			--#{$prefix}toolbar-title-font-size: 1.125rem;
+			--#{$prefix}toolbar-title-line-height: 24px;
+			--#{$prefix}toolbar-subtitle-font-size: 16px;
+			--#{$prefix}toolbar-subtitle-line-height: 18px;
+		}
+	}
+
+	.#{$prefix}toolbar--filled {
+		--#{$prefix}toolbar-color: var(--#{$prefix}white-color);
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}toolbar--filled.#{$prefix}toolbar--#{$color} > .#{$prefix}surface {
+			--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+			--#{$prefix}surface-opacity: 1;
+		}
+	}
+}