@unifiedsoftware/styles 1.1.8 → 2.0.0-alpha.10

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,26 @@
 .#{$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: #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: #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;
@@ -25,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,27 +1,41 @@
 @use '../../../variables' as *;
 
+$colors-map: (primary, secondary, success, info, warning, danger);
+
 .#{$prefix}theme-fci {
 	.#{$prefix}accordion {
-		--#{$prefix}accordion-border-width: 1px;
-		--#{$prefix}accordion-border-style: solid;
-		--#{$prefix}accordion-border-color: rgba(9, 30, 66, 0.14);
-	}
-
-	.#{$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-color: inherit;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 0px;
+			--#{$prefix}outline-z-index: 1;
+		}
 	}
 
-	.#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: var(--#{$prefix}body-color);
+	.#{$prefix}accordion--bordered:not(.#{$prefix}accordion--splitted) {
+		--#{$prefix}accordion-border-radius: 10px;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+		}
 	}
 
-	.#{$prefix}accordion--sm .#{$prefix}accordion-header {
+	.#{$prefix}accordion--bordered.#{$prefix}accordion--splitted .#{$prefix}accordion-item {
+		--#{$prefix}accordion-border-radius: 10px;
+
+		& > .#{$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;
@@ -34,58 +48,185 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 11px;
 		--#{$prefix}accordion-header-title-line-height: 14px;
-	}
 
-	.#{$prefix}accordion--sm .#{$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-splitted-gap: 0.5rem;
+
+		--#{$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-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.75rem;
+
+		--#{$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;
 
 		--#{$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--md .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 24px;
 	}
 
-	.#{$prefix}accordion--lg .#{$prefix}accordion-body {
+	.#{$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;
+		--#{$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-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-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-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-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 {
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 0px;
+			--#{$prefix}outline-z-index: 1;
+		}
+	}
+
+	.#{$prefix}accordion-item--selected {
+		--#{$prefix}accordion-header-title-font-weight: 700;
+	}
+
+	.#{$prefix}accordion-body {
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: var(--#{$prefix}white-color);
+		}
+	}
+
+	@each $color in $colors-map {
+		.#{$prefix}accordion--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-color: var(--#{$prefix}accordion-border-color);
+				--#{$prefix}outline-opacity: 0.2;
+			}
+		}
+
+		.#{$prefix}accordion-item--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-color: var(--#{$prefix}accordion-border-color);
+				--#{$prefix}outline-opacity: 0.2;
+			}
+		}
+	}
+
+	@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/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;
+				}
 			}
 		}
 	}

package/scss/themes/fci/components/_button.scss

@@ -1,25 +1,23 @@
 @use '../../../variables' as *;
 
-$colors-map: (
-	inherit: inherit,
-	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);
+
+html {
+	-webkit-text-size-adjust: 100%;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+}
 
 .#{$prefix}theme-fci {
 	.#{$prefix}button {
-		--#{$prefix}button-font-weight: 400;
+		--#{$prefix}button-font-weight: 500;
 		--#{$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-height: 22px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 0.625rem;
 			--#{$prefix}button-font-size: 0.75rem;
@@ -27,12 +25,12 @@ $colors-map: (
 			--#{$prefix}button-gap: 0.25rem;
 
 			.#{$prefix}icon {
-				--#{$prefix}icon-font-size: 0.875rem;
+				--#{$prefix}icon-font-size: 0.75rem;
 			}
 		}
 
 		&--sm {
-			--#{$prefix}button-height: 28px;
+			--#{$prefix}button-height: 26px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 0.75rem;
 			--#{$prefix}button-font-size: 0.75rem;
@@ -40,12 +38,12 @@ $colors-map: (
 			--#{$prefix}button-gap: 0.25rem;
 
 			.#{$prefix}icon {
-				--#{$prefix}icon-font-size: 1rem;
+				--#{$prefix}icon-font-size: 0.875rem;
 			}
 		}
 
 		&--md {
-			--#{$prefix}button-height: 32px;
+			--#{$prefix}button-height: 30px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 0.875rem;
 			--#{$prefix}button-font-size: 0.875rem;
@@ -53,16 +51,29 @@ $colors-map: (
 			--#{$prefix}button-gap: 0.375rem;
 
 			.#{$prefix}icon {
-				--#{$prefix}icon-font-size: 1.125rem;
+				--#{$prefix}icon-font-size: 1rem;
 			}
 		}
 
 		&--lg {
-			--#{$prefix}button-height: 36px;
+			--#{$prefix}button-height: 34px;
 			--#{$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: 44px;
+			--#{$prefix}button-padding-y: 0;
+			--#{$prefix}button-padding-x: 1.25rem;
 			--#{$prefix}button-font-size: 1rem;
-			--#{$prefix}button-border-radius: 6px;
+			--#{$prefix}button-border-radius: 8px;
 			--#{$prefix}button-gap: 0.5rem;
 
 			.#{$prefix}icon {
@@ -70,13 +81,13 @@ $colors-map: (
 			}
 		}
 
-		&--xl {
-			--#{$prefix}button-height: 40px;
+		&--2xl {
+			--#{$prefix}button-height: 56px;
 			--#{$prefix}button-padding-y: 0;
-			--#{$prefix}button-padding-x: 1.125rem;
+			--#{$prefix}button-padding-x: 1.75rem;
 			--#{$prefix}button-font-size: 1.125rem;
-			--#{$prefix}button-border-radius: 6px;
-			--#{$prefix}button-gap: 0.5rem;
+			--#{$prefix}button-border-radius: 10px;
+			--#{$prefix}button-gap: 0.75rem;
 
 			.#{$prefix}icon {
 				--#{$prefix}icon-font-size: 1.5rem;
@@ -91,10 +102,10 @@ $colors-map: (
 			& > .#{$prefix}overlay {
 				--#{$prefix}overlay-color: inherit;
 				--#{$prefix}overlay-opacity: 0;
-				--#{$prefix}_hover-overlay-opacity: 0.12;
-				--#{$prefix}_active-overlay-opacity: 0.24;
-				--#{$prefix}_focus-hover-overlay-opacity: 0.12;
-				--#{$prefix}_focus-active-overlay-opacity: 0.24;
+				--#{$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}outline {
@@ -111,7 +122,7 @@ $colors-map: (
 			& > .#{$prefix}overlay {
 				--#{$prefix}overlay-color: inherit;
 				--#{$prefix}overlay-opacity: 0;
-				--#{$prefix}_hover-overlay-opacity: 0.12;
+				--#{$prefix}_hover-overlay-opacity: 0.16;
 				--#{$prefix}_active-overlay-opacity: 0.24;
 				--#{$prefix}_focus-hover-overlay-opacity: 0.12;
 				--#{$prefix}_focus-active-overlay-opacity: 0.24;
@@ -126,11 +137,11 @@ $colors-map: (
 		&--flat {
 			& > .#{$prefix}overlay {
 				--#{$prefix}overlay-color: inherit;
-				--#{$prefix}overlay-opacity: 0.08;
-				--#{$prefix}_hover-overlay-opacity: 0.12;
-				--#{$prefix}_active-overlay-opacity: 0.24;
-				--#{$prefix}_focus-hover-overlay-opacity: 0.12;
-				--#{$prefix}_focus-active-overlay-opacity: 0.24;
+				--#{$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}outline {
@@ -143,7 +154,7 @@ $colors-map: (
 			& > .#{$prefix}overlay {
 				--#{$prefix}overlay-color: inherit;
 				--#{$prefix}overlay-opacity: 0;
-				--#{$prefix}_hover-overlay-opacity: 0.12;
+				--#{$prefix}_hover-overlay-opacity: 0.16;
 				--#{$prefix}_active-overlay-opacity: 0.24;
 				--#{$prefix}_focus-hover-overlay-opacity: 0.12;
 				--#{$prefix}_focus-active-overlay-opacity: 0.24;
@@ -156,38 +167,102 @@ $colors-map: (
 		}
 	}
 
-	@each $key, $value in $colors-map {
-		.#{$prefix}button--filled.#{$prefix}button--#{$key} {
-			--#{$prefix}button-background: #{$value};
+	.#{$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: 1.25rem;
+		}
+	}
+
+	.#{$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;
+		}
+	}
 
-		.#{$prefix}button--outlined.#{$prefix}button--#{$key} {
-			--#{$prefix}button-color: #{$value};
+	@each $color in $colors-map {
+		.#{$prefix}button--filled.#{$prefix}button--#{$color} {
+			--#{$prefix}button-background: var(--#{$prefix}#{$color}-color);
 		}
 
-		.#{$prefix}button--flat.#{$prefix}button--#{$key} {
-			--#{$prefix}button-color: #{$value};
+		.#{$prefix}button--outlined.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
 		}
 
-		.#{$prefix}button--text.#{$prefix}button--#{$key} {
-			--#{$prefix}button-color: #{$value};
+		.#{$prefix}button--flat.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
 		}
 
-		@if $key == 'secondary' {
-			.#{$prefix}button--filled.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
+		.#{$prefix}button--text.#{$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;
+				}
 			}
+		}
+
+		@if $color == 'success' or $color == 'warning' {
+			.#{$prefix}button--outlined.#{$prefix}button--#{$color} {
+				--#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
 
-			.#{$prefix}button--outlined.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
+				}
 			}
+		}
 
-			.#{$prefix}button--flat.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: var(--#{$prefix}secondary-action-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}button--text.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
+				}
 			}
 		}
 	}