@unifiedsoftware/styles 2.0.1-beta.8 → 2.0.2

package/scss/themes/centurion/_tokens.scss

@@ -0,0 +1,56 @@
+@use '../../variables' as *;
+
+.#{$prefix}theme-centurion {
+	--#{$prefix}primary-rgb: 0 70 213;
+	--#{$prefix}secondary-rgb: 15 23 42;
+	--#{$prefix}success-rgb: 22 163 74;
+	--#{$prefix}info-rgb: 124 58 237;
+	--#{$prefix}warning-rgb: 248 148 6;
+	--#{$prefix}danger-rgb: 220 38 38;
+	--#{$prefix}black-rgb: 0 0 0;
+	--#{$prefix}white-rgb: 255 255 255;
+
+	--#{$prefix}primary-color: #0046d5;
+	--#{$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;
+
+	--#{$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: #475569;
+
+	--#{$prefix}font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+	--#{$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);
+	--#{$prefix}shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+	--#{$prefix}shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+	--#{$prefix}shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}

package/scss/themes/centurion/components/_accordion.scss

@@ -0,0 +1,235 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}accordion {
+		--#{$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--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: 2.75rem;
+		--#{$prefix}accordion-header-padding-y: 0.375rem;
+		--#{$prefix}accordion-header-padding-x: 0.75rem;
+		--#{$prefix}accordion-header-padding-level: 1.25rem;
+		--#{$prefix}accordion-header-gap: 0.5rem;
+
+		--#{$prefix}accordion-header-title-font-size: 12px;
+		--#{$prefix}accordion-header-title-line-height: 14px;
+
+		--#{$prefix}accordion-header-subtitle-font-size: 10px;
+		--#{$prefix}accordion-header-title-line-height: 14px;
+
+		--#{$prefix}accordion-body-padding-y: 0.75rem;
+		--#{$prefix}accordion-body-padding-x: 0.75rem;
+		--#{$prefix}accordion-body-font-size: 0.75rem;
+		--#{$prefix}accordion-body-line-height: 18px;
+	}
+
+	.#{$prefix}accordion--xs .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 16px;
+	}
+
+	.#{$prefix}accordion--sm {
+		--#{$prefix}accordion-splitted-gap: 0.5rem;
+
+		--#{$prefix}accordion-header-min-height: 3rem;
+		--#{$prefix}accordion-header-padding-y: 0.5rem;
+		--#{$prefix}accordion-header-padding-x: 1rem;
+		--#{$prefix}accordion-header-padding-level: 1.25rem;
+		--#{$prefix}accordion-header-gap: 0.75rem;
+
+		--#{$prefix}accordion-header-title-font-size: 13px;
+		--#{$prefix}accordion-header-title-line-height: 16px;
+
+		--#{$prefix}accordion-header-subtitle-font-size: 11px;
+		--#{$prefix}accordion-header-subtitle-line-height: 16px;
+
+		--#{$prefix}accordion-body-padding-y: 1rem;
+		--#{$prefix}accordion-body-padding-x: 1rem;
+		--#{$prefix}accordion-body-font-size: 0.875rem;
+		--#{$prefix}accordion-body-line-height: 20px;
+	}
+
+	.#{$prefix}accordion--sm .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 20px;
+	}
+
+	.#{$prefix}accordion--md {
+		--#{$prefix}accordion-splitted-gap: 0.75rem;
+
+		--#{$prefix}accordion-header-min-height: 3.5rem;
+		--#{$prefix}accordion-header-padding-y: 0.625rem;
+		--#{$prefix}accordion-header-padding-x: 0.625rem;
+		--#{$prefix}accordion-header-padding-level: 1.25rem;
+		--#{$prefix}accordion-header-gap: 0.75rem;
+		--#{$prefix}accordion-header-content-gap: 0.5rem;
+
+		--#{$prefix}accordion-header-title-font-size: 12px;
+		--#{$prefix}accordion-header-title-line-height: 18px;
+
+		--#{$prefix}accordion-header-subtitle-font-size: 12px;
+		--#{$prefix}accordion-header-subtitle-line-height: 16px;
+
+		--#{$prefix}accordion-body-padding-y: 1rem;
+		--#{$prefix}accordion-body-padding-x:  0.625rem;
+		--#{$prefix}accordion-body-font-size: 1rem;
+		--#{$prefix}accordion-body-line-height: 24px;
+	}
+
+	.#{$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: 4rem;
+		--#{$prefix}accordion-header-padding-y: 0.75rem;
+		--#{$prefix}accordion-header-padding-x: 1.25rem;
+		--#{$prefix}accordion-header-padding-level: 1.25rem;
+		--#{$prefix}accordion-header-gap: 1rem;
+
+		--#{$prefix}accordion-header-title-font-size: 16px;
+		--#{$prefix}accordion-header-title-line-height: 24px;
+
+		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
+		--#{$prefix}accordion-header-subtitle-line-height: 18px;
+
+		--#{$prefix}accordion-body-padding-y: 1.25rem;
+		--#{$prefix}accordion-body-padding-x: 1.25rem;
+		--#{$prefix}accordion-body-font-size: 1rem;
+		--#{$prefix}accordion-body-line-height: 24px;
+	}
+
+	.#{$prefix}accordion--lg .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 28px;
+	}
+
+	.#{$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;
+		--#{$prefix}accordion-header-padding-level: 1.25rem;
+		--#{$prefix}accordion-header-gap: 1rem;
+
+		--#{$prefix}accordion-header-title-font-size: 18px;
+		--#{$prefix}accordion-header-title-line-height: 24px;
+
+		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
+		--#{$prefix}accordion-header-subtitle-line-height: 18px;
+
+		--#{$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}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 36px;
+	}
+
+	.#{$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-item--selected {
+		// --#{$prefix}accordion-header-title-font-weight: 600;
+	}
+
+	.#{$prefix}accordion-body {
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: var(--#{$prefix}white-color);
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}white-color);
+			}
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
+		}
+
+		.#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$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;
+			}
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}black-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/centurion/components/_badge.scss

@@ -0,0 +1,41 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}badge {
+		--#{$prefix}badge-min-width: 18px;
+		--#{$prefix}badge-min-height: 18px;
+		--#{$prefix}badge-padding-y: 0;
+		--#{$prefix}badge-padding-x: 0.25rem;
+		--#{$prefix}badge-font-size: 0.75rem;
+		--#{$prefix}badge-font-weight: 400;
+		--#{$prefix}badge-line-height: 1;
+		--#{$prefix}badge-border-radius: 9999px;
+
+		& > .#{$prefix}overlay {
+			--#{$prefix}overlay-color: inherit;
+			--#{$prefix}overlay-opacity: 0;
+		}
+
+		--#{$prefix}badge-color: var(--#{$prefix}white-color);
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}badge--#{$color} {
+			--#{$prefix}badge-background: var(--#{$prefix}#{$color}-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;
+				}
+			}
+		}
+	}
+}

package/scss/themes/centurion/components/_button.scss

@@ -0,0 +1,367 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+html {
+	-webkit-text-size-adjust: 100%;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+}
+
+.#{$prefix}theme-centurion {
+	.#{$prefix}button {
+		--#{$prefix}button-font-weight:400;
+		--#{$prefix}button-font-family: var(--#{$prefix}font-sans);
+
+		--#{$prefix}button-divider-width: 1px;
+		--#{$prefix}button-divider-color: #fff;
+
+		&--xs {
+			--#{$prefix}button-height: 24px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 0.625rem;
+			--#{$prefix}button-font-size: 0.75rem;
+			--#{$prefix}button-border-radius: 6px;
+			--#{$prefix}button-gap: 0.25rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.75rem;
+			}
+		}
+
+		&--sm {
+			--#{$prefix}button-height: 28px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 0.75rem;
+			--#{$prefix}button-font-size: 0.75rem;
+			--#{$prefix}button-border-radius: 6px;
+			--#{$prefix}button-gap: 0.25rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 0.875rem;
+			}
+		}
+
+		&--md {
+			--#{$prefix}button-height: 24px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 0.75rem;
+			--#{$prefix}button-font-size: 12px;
+			--#{$prefix}button-border-radius: 6px;
+			--#{$prefix}button-gap: 0.25rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1rem;
+			}
+		}
+
+		&--lg {
+			--#{$prefix}button-height: 36px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 1rem;
+			--#{$prefix}button-font-size: 0.875rem;
+			--#{$prefix}button-border-radius: 8px;
+			--#{$prefix}button-gap: 0.5rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.125rem;
+			}
+		}
+
+		&--xl {
+			--#{$prefix}button-height: 40px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 1.25rem;
+			--#{$prefix}button-font-size: 1rem;
+			--#{$prefix}button-border-radius: 8px;
+			--#{$prefix}button-gap: 0.5rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.25rem;
+			}
+		}
+
+		&--2xl {
+			--#{$prefix}button-height: 44px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 1.5rem;
+			--#{$prefix}button-font-size: 1.125rem;
+			--#{$prefix}button-border-radius: 10px;
+			--#{$prefix}button-gap: 0.75rem;
+
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.5rem;
+			}
+		}
+
+		& > .#{$prefix}glow {
+			--#{$prefix}_focus-glow-spread: 1px;
+			--#{$prefix}_focus-glow-blur: 6px;
+			--#{$prefix}_focus-hover-glow-blur: 8px;
+			--#{$prefix}_focus-active-glow-blur: 10px;
+		}
+
+		&--filled {
+			--#{$prefix}button-border-width: 1px;
+			--#{$prefix}button-border-color: transparent;
+			--#{$prefix}button-color: var(--#{$prefix}white-color);
+
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: inherit;
+				--#{$prefix}overlay-opacity: 0;
+				--#{$prefix}_hover-overlay-opacity: 0.24;
+				--#{$prefix}_active-overlay-opacity: 0.32;
+				--#{$prefix}_focus-overlay-opacity: 0.24;
+				--#{$prefix}_focus-hover-overlay-opacity: 0.24;
+				--#{$prefix}_focus-active-overlay-opacity: 0.32;
+			}
+
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: transparent;
+			}
+
+			.#{$prefix}chip {
+				--#{$prefix}chip-background: var(--#{$prefix}white-color);
+			}
+		}
+
+		&--outlined {
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: var(--#{$prefix}secondary-color);
+				--#{$prefix}overlay-opacity: 0;
+				--#{$prefix}_hover-overlay-opacity: 0.08;
+				--#{$prefix}_active-overlay-opacity: 0.1;
+				--#{$prefix}_focus-overlay-opacity: 0.08;
+				--#{$prefix}_focus-hover-overlay-opacity: 0.08;
+				--#{$prefix}_focus-active-overlay-opacity: 0.1;
+			}
+
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: var(--#{$prefix}secondary-color);
+				--#{$prefix}outline-opacity: 0.16;
+			}
+		}
+
+		&--flat {
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: inherit;
+				--#{$prefix}overlay-opacity: 0.16;
+				--#{$prefix}_hover-overlay-opacity: 0.24;
+				--#{$prefix}_active-overlay-opacity: 0.32;
+				--#{$prefix}_focus-overlay-opacity: 0.24;
+				--#{$prefix}_focus-hover-overlay-opacity: 0.24;
+				--#{$prefix}_focus-active-overlay-opacity: 0.32;
+			}
+
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: currentColor;
+				--#{$prefix}outline-opacity: 0;
+			}
+		}
+
+		&--text {
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: inherit;
+				--#{$prefix}overlay-opacity: 0;
+				--#{$prefix}_hover-overlay-opacity: 0.16;
+				--#{$prefix}_active-overlay-opacity: 0.24;
+				--#{$prefix}_focus-overlay-opacity: 0.12;
+				--#{$prefix}_focus-hover-overlay-opacity: 0.12;
+				--#{$prefix}_focus-active-overlay-opacity: 0.24;
+			}
+
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: transparent;
+			}
+		}
+
+		&--bordered {
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-color: inherit;
+				--#{$prefix}overlay-opacity: 0;
+				--#{$prefix}_hover-overlay-opacity: 0.16;
+				--#{$prefix}_active-overlay-opacity: 0.24;
+				--#{$prefix}_focus-overlay-opacity: 0.12;
+				--#{$prefix}_focus-hover-overlay-opacity: 0.12;
+				--#{$prefix}_focus-active-overlay-opacity: 0.24;
+			}
+
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-color: currentColor;
+			}
+		}
+	}
+
+	.#{$prefix}button--xs.#{$prefix}button--icon-only {
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: 0.875rem;
+		}
+	}
+
+	.#{$prefix}button--sm.#{$prefix}button--icon-only {
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: 1rem;
+		}
+	}
+
+	.#{$prefix}button--md.#{$prefix}button--icon-only {
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: 1rem;
+		}
+	}
+
+	.#{$prefix}button--lg.#{$prefix}button--icon-only {
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: 1.5rem;
+		}
+	}
+
+	.#{$prefix}button--xl.#{$prefix}button--icon-only {
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: 1.75rem;
+		}
+	}
+
+	.#{$prefix}button--2xl.#{$prefix}button--icon-only {
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: 1.875rem;
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}button--#{$color} > .#{$prefix}glow {
+			--#{$prefix}_focus-glow-color: var(--#{$prefix}#{$color}-rgb);
+			--#{$prefix}_focus-glow-alpha: 1;
+			--#{$prefix}_focus-glow-shadow-alpha: 0.75;
+		}
+
+		.#{$prefix}button--filled.#{$prefix}button--#{$color} {
+			--#{$prefix}button-background: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}button--outlined.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}button--flat.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}button--text.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
+		}
+
+		@if $color == 'secondary' {
+			.#{$prefix}button--filled.#{$prefix}button--#{$color} {
+				--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}button-background: transparent;
+
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-color: inherit;
+					--#{$prefix}overlay-opacity: 0.16;
+					--#{$prefix}_hover-overlay-opacity: 0.24;
+					--#{$prefix}_active-overlay-opacity: 0.32;
+					--#{$prefix}_focus-hover-overlay-opacity: 0.24;
+					--#{$prefix}_focus-active-overlay-opacity: 0.32;
+				}
+			}
+
+			.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
+				& > .#{$prefix}overlay {
+					--#{$prefix}_hover-overlay-opacity: 0.08;
+					--#{$prefix}_active-overlay-opacity: 0.12;
+					--#{$prefix}_focus-hover-overlay-opacity: 0.08;
+					--#{$prefix}_focus-active-overlay-opacity: 0.12;
+				}
+
+				& > .#{$prefix}outline {
+					--#{$prefix}outline-opacity: 0.16;
+				}
+			}
+		}
+
+		@if $color == 'success' or $color == 'warning' {
+			.#{$prefix}button--outlined.#{$prefix}button--#{$color} {
+				--#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
+			}
+
+			.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
+				--#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
+
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
+				}
+			}
+		}
+
+		@if $color == 'success' or $color == 'info' or $color == 'warning' {
+			.#{$prefix}button--flat.#{$prefix}button--#{$color} {
+				--#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
+
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
+				}
+			}
+		}
+
+		@if $color == 'success' or $color == 'info' or $color == 'warning' {
+			.#{$prefix}button--text.#{$prefix}button--#{$color} {
+				--#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
+
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
+				}
+			}
+		}
+	}
+
+	.#{$prefix}button--secondary > .#{$prefix}glow {
+		--#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
+		--#{$prefix}_focus-glow-alpha: 0.5;
+		--#{$prefix}_focus-glow-shadow-alpha: 0.25;
+	}
+
+	.#{$prefix}button--filled.#{$prefix}button--secondary > .#{$prefix}glow {
+		--#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
+		--#{$prefix}_focus-glow-alpha: 0.5;
+		--#{$prefix}_focus-glow-shadow-alpha: 0.25;
+	}
+
+	.#{$prefix}button--outlined > .#{$prefix}glow {
+		--#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
+		--#{$prefix}_focus-glow-alpha: 0.5;
+		--#{$prefix}_focus-glow-shadow-alpha: 0.25;
+	}
+
+	// .#{$prefix}button--filled > .#{$prefix}outline {
+	// 	box-shadow:
+	// 		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+	// 		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+	// 		rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
+	// 		var(--#{$prefix}button-background) 0px 0px 0px 1px;
+	// }
+
+	// .#{$prefix}button--flat > .#{$prefix}outline {
+	// 	box-shadow:
+	// 		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+	// 		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+	// 		rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset,
+	// 		var(--#{$prefix}outline-border-color) 0px 0px 0px 1px;
+	// }
+
+	// .#{$prefix}button--outlined > .#{$prefix}outline {
+	// 	box-shadow:
+	// 		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+	// 		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+	// 		rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
+	// }
+}