@unifiedsoftware/styles 2.0.1-beta.9 → 2.0.3

package/scss/themes/centurion/components/_card.scss

@@ -0,0 +1,195 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}card {
+		--#{$prefix}card-border-width: 1px;
+		--#{$prefix}card-border-style: solid;
+		--#{$prefix}card-border-color: var(--#{$prefix}border-color);
+		--#{$prefix}card-border-radius: 8px;
+		--#{$prefix}card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
+			rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+
+		--#{$prefix}card-title-font-weight: 700;
+		--#{$prefix}card-subtitle-font-weight: 400;
+
+		--#{$prefix}card-header-title-font-weight: 500;
+		--#{$prefix}card-header-title-color: var(--#{$prefix}title-color);
+
+		--#{$prefix}card-header-subtitle-font-weight: 400;
+		--#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
+
+		--#{$prefix}card-body-color: var(--#{$prefix}body-color);
+
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: var(--#{$prefix}white-color);
+			--#{$prefix}surface-opacity: 1;
+		}
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}_hover-overlay-color: inherit;
+			--#{$prefix}_hover-overlay-opacity: 0.04;
+			--#{$prefix}_active-overlay-opacity: 0.08;
+		}
+
+		&--selected {
+			--#{$prefix}card-color: var(--#{$prefix}primary-color);
+
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
+				--#{$prefix}overlay-opacity: 0.08;
+				--#{$prefix}_hover-overlay-opacity: 0.12;
+				--#{$prefix}_active-overlay-opacity: 0.16;
+			}
+		}
+	}
+
+	.#{$prefix}card--xs {
+		--#{$prefix}card-header-padding-y: 0.375rem;
+		--#{$prefix}card-header-padding-x: 0.75rem;
+		--#{$prefix}card-header-min-height: 2.75rem;
+		--#{$prefix}card-header-gap: 0.5rem;
+		--#{$prefix}card-header-content-gap: 0.25rem;
+
+		--#{$prefix}card-header-title-font-size: 12px;
+		--#{$prefix}card-header-title-line-height: 14px;
+
+		--#{$prefix}card-header-subtitle-font-size: 10px;
+		--#{$prefix}card-header-subtitle-line-height: 14px;
+
+		--#{$prefix}card-body-padding-y: 0.75rem;
+		--#{$prefix}card-body-padding-x: 0.75rem;
+		--#{$prefix}card-body-font-size: 0.75rem;
+		--#{$prefix}card-body-line-height: 18px;
+
+		--#{$prefix}card-footer-padding-y: 0.375rem;
+		--#{$prefix}card-footer-padding-x: 0.75rem;
+		--#{$prefix}card-footer-min-height: 2.75rem;
+		--#{$prefix}card-footer-gap: 0.5rem;
+	}
+
+	.#{$prefix}card--xs .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 16px;
+	}
+
+	.#{$prefix}card--sm {
+		--#{$prefix}card-title-padding-y: 0.875rem 0.375rem;
+		--#{$prefix}card-title-font-size: 1.25rem;
+
+		--#{$prefix}card-header-padding-y: 0.5rem;
+		--#{$prefix}card-header-padding-x: 1rem;
+		--#{$prefix}card-header-min-height: 3rem;
+		--#{$prefix}card-header-gap: 0.75rem;
+		--#{$prefix}card-header-content-gap: 0.5rem;
+
+		--#{$prefix}card-header-title-font-size: 13px;
+		--#{$prefix}card-header-title-line-height: 16px;
+
+		--#{$prefix}card-header-subtitle-font-size: 11px;
+		--#{$prefix}card-header-subtitle-line-height: 16px;
+
+		--#{$prefix}card-body-padding-y: 1rem;
+		--#{$prefix}card-body-padding-x: 1rem;
+		--#{$prefix}card-body-font-size: 0.875rem;
+		--#{$prefix}card-body-line-height: 20px;
+
+		--#{$prefix}card-footer-padding-y: 0.5rem;
+		--#{$prefix}card-footer-padding-x: 1rem;
+		--#{$prefix}card-footer-min-height: 3rem;
+		--#{$prefix}card-footer-gap: 0.75rem;
+	}
+
+	.#{$prefix}card--sm .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 20px;
+	}
+
+	.#{$prefix}card--md {
+		--#{$prefix}card-title-padding-y: 1rem 0.5rem;
+		--#{$prefix}card-title-font-size: 1.25rem;
+
+		--#{$prefix}card-header-padding-y: 0.625rem;
+		--#{$prefix}card-header-padding-x: 0.625rem;
+		--#{$prefix}card-header-gap: 0.75rem;
+		--#{$prefix}card-header-content-gap: 0.5rem;
+
+		--#{$prefix}card-header-title-font-size: 12px;
+		--#{$prefix}card-header-title-line-height: 18px;
+
+		--#{$prefix}card-header-subtitle-font-size: 12px;
+		--#{$prefix}card-header-subtitle-line-height: 16px;
+
+		--#{$prefix}card-body-padding-y:  0.625rem;
+		--#{$prefix}card-body-padding-x:  0.625rem;
+		--#{$prefix}card-body-font-size: 0.875rem;
+		--#{$prefix}card-body-line-height: 24px;
+
+		--#{$prefix}card-footer-padding-y: 0.625rem;
+		--#{$prefix}card-footer-padding-x: 0.625rem;
+		--#{$prefix}card-footer-min-height: 3.5rem;
+		--#{$prefix}card-footer-gap: 1rem;
+	}
+
+	.#{$prefix}card--md .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 24px;
+	}
+
+	.#{$prefix}card--lg {
+		--#{$prefix}card-title-padding-y: 1.25rem 0.75rem;
+		--#{$prefix}card-title-font-size: 1.5rem;
+
+		--#{$prefix}card-header-padding-y: 0.75rem;
+		--#{$prefix}card-header-padding-x: 1.25rem;
+		--#{$prefix}card-header-min-height: 4rem;
+		--#{$prefix}card-header-gap: 1rem;
+		--#{$prefix}card-header-content-gap: 0.75rem;
+
+		--#{$prefix}card-header-title-font-size: 16px;
+		--#{$prefix}card-header-title-line-height: 18px;
+
+		--#{$prefix}card-header-subtitle-font-size: 13px;
+		--#{$prefix}card-header-subtitle-line-height: 18px;
+
+		--#{$prefix}card-body-padding-y: 1.25rem;
+		--#{$prefix}card-body-padding-x: 1.25rem;
+		--#{$prefix}card-body-font-size: 1rem;
+		--#{$prefix}card-body-line-height: 24px;
+
+		--#{$prefix}card-footer-padding-y: 0.75rem;
+		--#{$prefix}card-footer-padding-x: 1.25rem;
+		--#{$prefix}card-footer-min-height: 4rem;
+		--#{$prefix}card-footer-gap: 1rem;
+	}
+
+	.#{$prefix}card--lg .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 28px;
+	}
+
+	.#{$prefix}card--xl {
+		--#{$prefix}card-header-padding-y: 0.75rem;
+		--#{$prefix}card-header-padding-x: 1.5rem;
+		--#{$prefix}card-header-min-height: 4.5rem;
+		--#{$prefix}card-header-gap: 1rem;
+		--#{$prefix}card-header-content-gap: 0.875rem;
+
+		--#{$prefix}card-header-title-font-size: 18px;
+		--#{$prefix}card-header-title-line-height: 20px;
+
+		--#{$prefix}card-header-subtitle-font-size: 15px;
+		--#{$prefix}card-header-subtitle-line-height: 20px;
+
+		--#{$prefix}card-body-padding-y: 1.5rem;
+		--#{$prefix}card-body-padding-x: 1.5rem;
+		--#{$prefix}card-body-font-size: 1.125rem;
+		--#{$prefix}card-body-line-height: 28px;
+
+		--#{$prefix}card-footer-padding-y: 0.75rem;
+		--#{$prefix}card-footer-padding-x: 1.5rem;
+		--#{$prefix}card-footer-min-height: 4.5rem;
+		--#{$prefix}card-footer-gap: 1rem;
+	}
+
+	.#{$prefix}card--xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 36px;
+	}
+}

package/scss/themes/centurion/components/_checkbox.scss

@@ -0,0 +1,136 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}checkbox-group {
+		&--xs {
+			--#{$prefix}checkbox-group-gap: 0.2rem;
+		}
+
+		&--sm {
+			--#{$prefix}checkbox-group-gap: 0.375rem;
+		}
+
+		&--md {
+			--#{$prefix}checkbox-group-gap: 0.5rem;
+		}
+
+		&--lg {
+			--#{$prefix}checkbox-group-gap: 0.75rem;
+		}
+
+		&--xl {
+			--#{$prefix}checkbox-group-gap: 0.875rem;
+		}
+	}
+
+	.#{$prefix}checkbox {
+		--#{$prefix}checkbox-control-border-width: 1px;
+		--#{$prefix}checkbox-control-border-style: solid;
+		--#{$prefix}checkbox-control-border-color: rgba(0, 0, 0, 0.4);
+		--#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);
+
+		--#{$prefix}_checked-checkbox-control-border-color: var(--#{$prefix}primary-color);
+		--#{$prefix}_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(var(--#{$prefix}primary-rgb) / 40%);
+
+		--#{$prefix}checkbox-tap-background: var(--#{$prefix}primary-color);
+
+		& .#{$prefix}icon {
+			--#{$prefix}icon-color: inherit !important;
+		}
+
+		&--xs {
+			--#{$prefix}checkbox-gap: 0.375rem;
+
+			--#{$prefix}checkbox-control-border-radius: 4px;
+
+			--#{$prefix}checkbox-control-width: 14px;
+			--#{$prefix}checkbox-control-height: 14px;
+			--#{$prefix}checkbox-label-font-size: 0.75rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.5rem;
+			}
+		}
+
+		&--sm {
+			--#{$prefix}checkbox-gap: 0.375rem;
+
+			--#{$prefix}checkbox-control-border-radius: 4px;
+
+			--#{$prefix}checkbox-control-width: 16px;
+			--#{$prefix}checkbox-control-height: 16px;
+			--#{$prefix}checkbox-label-font-size: 0.75rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.5rem;
+			}
+		}
+
+		&--md {
+			--#{$prefix}checkbox-gap: 0.5rem;
+
+			--#{$prefix}checkbox-control-border-radius: 4px;
+
+			--#{$prefix}checkbox-control-width: 18px;
+			--#{$prefix}checkbox-control-height: 18px;
+
+			--#{$prefix}checkbox-label-font-size: 0.875rem;
+
+			& .#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.625rem;
+			}
+		}
+
+		&--lg {
+			--#{$prefix}checkbox-gap: 0.5rem;
+
+			--#{$prefix}checkbox-control-border-radius: 6px;
+
+			--#{$prefix}checkbox-control-width: 20px;
+			--#{$prefix}checkbox-control-height: 20px;
+			--#{$prefix}checkbox-label-font-size: 0.875rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.75rem;
+			}
+		}
+
+		&--xl {
+			--#{$prefix}checkbox-gap: 0.5rem;
+
+			--#{$prefix}checkbox-control-border-radius: 6px;
+
+			--#{$prefix}checkbox-control-width: 22px;
+			--#{$prefix}checkbox-control-height: 22px;
+			--#{$prefix}checkbox-label-font-size: 1rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.875rem;
+			}
+		}
+
+		&--light {
+			--#{$prefix}checkbox-control-border-color: rgba(0, 0, 0, 0.2);
+
+			--#{$prefix}checkbox-tap-background: rgba(0, 0, 0, 0.8);
+
+			--#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);
+			--#{$prefix}_checked-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
+			--#{$prefix}_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(0 0 0 / 15%);
+
+			--#{$prefix}checkbox-label-color: var(--#{$prefix}black-color);
+		}
+
+		&--dark {
+			--#{$prefix}checkbox-control-border-color: rgba(255 255 255 / 30%);
+
+			--#{$prefix}checkbox-tap-background: rgba(255 255 255 / 30%);
+
+			--#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);
+			--#{$prefix}_checked-checkbox-control-border-color: rgba(255 255 255 / 30%);
+			--#{$prefix}_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 15%);
+
+			--#{$prefix}checkbox-label-color: var(--#{$prefix}white-color);
+		}
+	}
+}

package/scss/themes/centurion/components/_chip.scss

@@ -0,0 +1,192 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}chip {
+		--#{$prefix}chip-padding-y: 0.125rem;
+		--#{$prefix}chip-padding-x: 0.5rem;
+		--#{$prefix}chip-font-size: 0.75rem;
+		--#{$prefix}chip-font-weight: 400;
+		--#{$prefix}chip-border-radius: 9999px;
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+		}
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+			--#{$prefix}outline-border-color: transparent;
+		}
+
+		&--xs {
+			--#{$prefix}chip-height: 22px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 0.625rem;
+			--#{$prefix}chip-font-size: 0.75rem;
+			--#{$prefix}chip-gap: 0.25rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.75rem;
+			}
+		}
+
+		&--sm {
+			--#{$prefix}chip-height: 26px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 0.75rem;
+			--#{$prefix}chip-font-size: 0.75rem;
+			--#{$prefix}chip-gap: 0.25rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.875rem;
+			}
+		}
+
+		&--md {
+			--#{$prefix}chip-height: 30px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 0.875rem;
+			--#{$prefix}chip-font-size: 0.875rem;
+			--#{$prefix}chip-gap: 0.375rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1rem;
+			}
+		}
+
+		&--lg {
+			--#{$prefix}chip-height: 34px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 1rem;
+			--#{$prefix}chip-font-size: 0.875rem;
+			--#{$prefix}chip-gap: 0.5rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.125rem;
+			}
+		}
+
+		&--xl {
+			--#{$prefix}chip-height: 40px;
+			--#{$prefix}chip-padding-y: 0;
+			--#{$prefix}chip-padding-x: 1.125rem;
+			--#{$prefix}chip-font-size: 1rem;
+			--#{$prefix}chip-gap: 0.5rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.25rem;
+			}
+		}
+
+		&--filled {
+			--#{$prefix}chip-border-width: 1px;
+			--#{$prefix}chip-border-color: transparent;
+			--#{$prefix}chip-color: var(--#{$prefix}white-color);
+		}
+
+		&--outlined {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: var(--#{$prefix}secondary-color);
+				--#{$prefix}outline-opacity: 0.16;
+			}
+		}
+
+		&--bordered {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: currentColor;
+			}
+		}
+
+		&--flat {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: transparent;
+			}
+
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: inherit;
+				--#{$prefix}overlay-opacity: 0.16;
+			}
+		}
+
+		&--text {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: transparent;
+			}
+		}
+
+		&--bordered {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: currentColor;
+			}
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}chip--filled.#{$prefix}chip--#{$color} {
+			--#{$prefix}chip-background: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}chip--outlined.#{$prefix}chip--#{$color} {
+			--#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}chip--flat.#{$prefix}chip--#{$color} {
+			--#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}chip--text.#{$prefix}chip--#{$color} {
+			--#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}chip--bordered.#{$prefix}chip--#{$color} {
+			--#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		@if $color == 'secondary' {
+			.#{$prefix}chip--filled.#{$prefix}chip--#{$color} {
+				--#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}chip-background: transparent;
+
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-color: inherit;
+					--#{$prefix}overlay-opacity: 0.16;
+				}
+			}
+
+			.#{$prefix}chip--bordered.#{$prefix}chip--#{$color} {
+				& > .#{$prefix}outline {
+					--#{$prefix}outline-opacity: 0.16;
+				}
+			}
+		}
+
+		@if $color == 'success' or $color == 'warning' {
+			.#{$prefix}chip--outlined.#{$prefix}chip--#{$color} {
+				--#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
+			}
+
+			.#{$prefix}chip--bordered.#{$prefix}chip--#{$color} {
+				--#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
+			}
+		}
+
+		@if $color == 'success' or $color == 'info' or $color == 'warning' {
+			.#{$prefix}chip--flat.#{$prefix}chip--#{$color} {
+				--#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
+			}
+		}
+
+		@if $color == 'success' or $color == 'info' or $color == 'warning' {
+			.#{$prefix}chip--text.#{$prefix}chip--#{$color} {
+				--#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
+			}
+		}
+	}
+}

package/scss/themes/centurion/components/_descriptions.scss

@@ -0,0 +1,51 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}description {
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-opacity: 0;
+		}
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-opacity: 0;
+			--#{$prefix}_hover-overlay-opacity: 0.08;
+			--#{$prefix}_active-overlay-opacity: 0.12;
+		}
+	}
+
+	.#{$prefix}descriptions {
+		--#{$prefix}description-label-color: var(--#{$prefix}secondary-action-color);
+		--#{$prefix}description-text-color: var(--#{$prefix}primary-color);
+	}
+
+	.#{$prefix}descriptions--sm {
+		--#{$prefix}description-padding-y: 0.5rem;
+		--#{$prefix}description-padding-x: 0.75rem;
+		--#{$prefix}description-gap-y: 0.5rem;
+		--#{$prefix}description-gap-x: 0.75rem;
+
+		--#{$prefix}description-label-font-size: 12px;
+
+		--#{$prefix}description-text-font-size: 12px;
+	}
+
+	.#{$prefix}descriptions--md {
+		--#{$prefix}description-gap-y: 0.5rem;
+		--#{$prefix}description-gap-x: 1rem;
+
+		--#{$prefix}description-label-font-size: 12px;
+
+		--#{$prefix}description-text-font-size: 12px;
+	}
+
+	.#{$prefix}descriptions--lg {
+		--#{$prefix}description-padding-y: 0.75rem;
+		--#{$prefix}description-padding-x: 1.25rem;
+		--#{$prefix}description-gap-y: 0.75rem;
+		--#{$prefix}description-gap-x: 1.25rem;
+
+		--#{$prefix}description-label-font-size: 14px;
+
+		--#{$prefix}description-text-font-size: 14px;
+	}
+}

package/scss/themes/centurion/components/_drawer.scss

@@ -0,0 +1,66 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}drawer {
+		--#{$prefix}drawer-background: #fff;
+		--#{$prefix}drawer-border-width: 1px;
+		--#{$prefix}drawer-border-color: rgba(9, 30, 66, 0.14);
+
+		--#{$prefix}drawer-xs-width: calc(100% - 4rem);
+
+		&--sm {
+			--#{$prefix}drawer-width: 320px;
+		}
+
+		&--md {
+			--#{$prefix}drawer-width: 640px;
+		}
+
+		&--lg {
+			--#{$prefix}drawer-width: 720px;
+		}
+
+		&--xl {
+			--#{$prefix}drawer-width: 1080px;
+		}
+
+		&--full {
+			--#{$prefix}drawer-width: 100%;
+		}
+
+		&-header {
+			--#{$prefix}drawer-header-border-color: rgba(9, 30, 66, 0.14);
+
+			--#{$prefix}drawer-header-title-font-weight: 500;
+			--#{$prefix}drawer-header-title-color: var(--#{$prefix}title-color);
+
+			--#{$prefix}drawer-header-subtitle-font-weight: 400;
+			--#{$prefix}drawer-header-subtitle-color: var(--#{$prefix}subtitle-color);
+
+			--#{$prefix}drawer-header-min-height: 48px;
+			--#{$prefix}drawer-header-padding-y: 0.5rem;
+			--#{$prefix}drawer-header-padding-x: 1rem;
+			--#{$prefix}drawer-header-padding-level: 1.25rem;
+			--#{$prefix}drawer-header-gap: 1rem;
+
+			--#{$prefix}drawer-header-title-font-size: 1rem;
+			--#{$prefix}drawer-header-title-line-height: 20px;
+
+			--#{$prefix}drawer-header-subtitle-font-size: 0.75rem;
+			--#{$prefix}drawer-header-subtitle-line-height: 16px;
+		}
+
+		&-body {
+			--#{$prefix}drawer-body-padding-y: 1rem;
+			--#{$prefix}drawer-body-padding-x: 1rem;
+		}
+
+		&-footer {
+			--#{$prefix}drawer-footer-min-height: 48px;
+			--#{$prefix}drawer-footer-padding-y: 0.5rem;
+			--#{$prefix}drawer-footer-padding-x: 1rem;
+
+			--#{$prefix}drawer-footer-border-color: rgba(9, 30, 66, 0.14);
+		}
+	}
+}

package/scss/themes/centurion/components/_icon.scss

@@ -0,0 +1,50 @@
+@use '../../../variables' as *;
+
+$colors-map: (
+	primary: var(--#{$prefix}primary-color),
+	//secondary: var(--#{$prefix}secondary-color),
+	secondary: rgba(0, 0, 0, 0.54),
+	success: var(--#{$prefix}success-color),
+	info: var(--#{$prefix}info-color),
+	warning: var(--#{$prefix}warning-color),
+	danger: var(--#{$prefix}danger-color),
+);
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}icon {
+		--#{$prefix}icon-font-size-default: 1.5rem;
+		--#{$prefix}icon-color: inherit;
+
+		&--xs {
+			--#{$prefix}icon-font-size: 0.75rem;
+		}
+
+		&--sm {
+			--#{$prefix}icon-font-size: 1rem;
+		}
+
+		&--md {
+			--#{$prefix}icon-font-size: 1.125rem;
+		}
+
+		&--lg {
+			--#{$prefix}icon-font-size: 1.25rem;
+		}
+
+		&--xl {
+			--#{$prefix}icon-font-size: 1.5rem;
+		}
+
+		@each $key, $value in $colors-map {
+			&--#{$key} {
+				--#{$prefix}icon-color: #{$value};
+			}
+
+			@if $key == 'secondary' {
+				&--#{$key} {
+					--#{$prefix}icon-color: var(--#{$prefix}secondary-action-color);
+				}
+			}
+		}
+	}
+}