@unifiedsoftware/styles 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -1,32 +1,25 @@
 @use '../../../variables' as *;
 
+$colors-map: (primary, secondary, success, info, warning, danger);
+
 html {
 	-webkit-text-size-adjust: 100%;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
 }
-$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),
-);
 
 .#{$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.75rem;
+			--#{$prefix}button-padding-x: 0.625rem;
 			--#{$prefix}button-font-size: 0.75rem;
 			--#{$prefix}button-border-radius: 6px;
 			--#{$prefix}button-gap: 0.25rem;
@@ -37,11 +30,11 @@ $colors-map: (
 		}
 
 		&--sm {
-			--#{$prefix}button-height: 28px;
+			--#{$prefix}button-height: 26px;
 			--#{$prefix}button-padding-y: 0;
-			--#{$prefix}button-padding-x: 0.875rem;
+			--#{$prefix}button-padding-x: 0.75rem;
 			--#{$prefix}button-font-size: 0.75rem;
-			--#{$prefix}button-border-radius: 8px;
+			--#{$prefix}button-border-radius: 6px;
 			--#{$prefix}button-gap: 0.25rem;
 
 			.#{$prefix}icon {
@@ -50,11 +43,11 @@ $colors-map: (
 		}
 
 		&--md {
-			--#{$prefix}button-height: 32px;
+			--#{$prefix}button-height: 30px;
 			--#{$prefix}button-padding-y: 0;
-			--#{$prefix}button-padding-x: 1rem;
+			--#{$prefix}button-padding-x: 0.875rem;
 			--#{$prefix}button-font-size: 0.875rem;
-			--#{$prefix}button-border-radius: 8px;
+			--#{$prefix}button-border-radius: 6px;
 			--#{$prefix}button-gap: 0.375rem;
 
 			.#{$prefix}icon {
@@ -63,11 +56,11 @@ $colors-map: (
 		}
 
 		&--lg {
-			--#{$prefix}button-height: 40px;
+			--#{$prefix}button-height: 34px;
 			--#{$prefix}button-padding-y: 0;
-			--#{$prefix}button-padding-x: 1.25rem;
+			--#{$prefix}button-padding-x: 1rem;
 			--#{$prefix}button-font-size: 0.875rem;
-			--#{$prefix}button-border-radius: 10px;
+			--#{$prefix}button-border-radius: 8px;
 			--#{$prefix}button-gap: 0.5rem;
 
 			.#{$prefix}icon {
@@ -76,11 +69,11 @@ $colors-map: (
 		}
 
 		&--xl {
-			--#{$prefix}button-height: 48px;
+			--#{$prefix}button-height: 40px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 1.25rem;
 			--#{$prefix}button-font-size: 1rem;
-			--#{$prefix}button-border-radius: 10px;
+			--#{$prefix}button-border-radius: 8px;
 			--#{$prefix}button-gap: 0.5rem;
 
 			.#{$prefix}icon {
@@ -88,10 +81,10 @@ $colors-map: (
 			}
 		}
 
-		&--xxl {
-			--#{$prefix}button-height: 56px;
+		&--2xl {
+			--#{$prefix}button-height: 44px;
 			--#{$prefix}button-padding-y: 0;
-			--#{$prefix}button-padding-x: 1.75rem;
+			--#{$prefix}button-padding-x: 1.5rem;
 			--#{$prefix}button-font-size: 1.125rem;
 			--#{$prefix}button-border-radius: 10px;
 			--#{$prefix}button-gap: 0.75rem;
@@ -127,17 +120,18 @@ $colors-map: (
 
 		&--outlined {
 			& > .#{$prefix}overlay {
-				--#{$prefix}overlay-color: inherit;
+				--#{$prefix}overlay-color: var(--#{$prefix}secondary-color);
 				--#{$prefix}overlay-opacity: 0;
-				--#{$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;
+				--#{$prefix}_hover-overlay-opacity: 0.08;
+				--#{$prefix}_active-overlay-opacity: 0.1;
+				--#{$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: currentColor;
+				--#{$prefix}outline-border-color: var(--#{$prefix}secondary-color);
+				--#{$prefix}outline-opacity: 0.16;
 			}
 		}
 
@@ -172,6 +166,22 @@ $colors-map: (
 				--#{$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-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 {
@@ -204,32 +214,36 @@ $colors-map: (
 		}
 	}
 
-	.#{$prefix}button--xxl.#{$prefix}button--icon-only {
+	.#{$prefix}button--2xl.#{$prefix}button--icon-only {
 		.#{$prefix}icon {
 			--#{$prefix}icon-font-size: 1.875rem;
 		}
 	}
 
-	@each $key, $value in $colors-map {
-		.#{$prefix}button--filled.#{$prefix}button--#{$key} {
-			--#{$prefix}button-background: #{$value};
+	@each $color in $colors-map {
+		.#{$prefix}button--filled.#{$prefix}button--#{$color} {
+			--#{$prefix}button-background: var(--#{$prefix}#{$color}-color);
 		}
 
-		.#{$prefix}button--outlined.#{$prefix}button--#{$key} {
-			--#{$prefix}button-color: #{$value};
+		.#{$prefix}button--outlined.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
 		}
 
-		.#{$prefix}button--flat.#{$prefix}button--#{$key} {
-			--#{$prefix}button-color: #{$value};
+		.#{$prefix}button--flat.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
 		}
 
-		.#{$prefix}button--text.#{$prefix}button--#{$key} {
-			--#{$prefix}button-color: #{$value};
+		.#{$prefix}button--text.#{$prefix}button--#{$color} {
+			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
 		}
 
-		@if $key == 'secondary' {
-			.#{$prefix}button--filled.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: #{$value};
+		.#{$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 {
@@ -241,6 +255,53 @@ $colors-map: (
 					--#{$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);
+				}
+			}
 		}
 	}
 }

package/scss/themes/fci/components/_card.scss

@@ -5,7 +5,7 @@
 		--#{$prefix}card-border-width: 1px;
 		--#{$prefix}card-border-style: solid;
 		--#{$prefix}card-border-color: var(--#{$prefix}border-color);
-		--#{$prefix}card-border-radius: 10px;
+		--#{$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;
 
@@ -46,25 +46,27 @@
 	}
 
 	.#{$prefix}card--xs {
-		--#{$prefix}card-padding-y: 0.5rem;
-		--#{$prefix}card-padding-x: 0.75rem;
-		--#{$prefix}card-gap: 0.5rem;
-
+		--#{$prefix}card-header-padding-y: 0.375rem;
+		--#{$prefix}card-header-padding-x: 0.75rem;
 		--#{$prefix}card-header-min-height: 1.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-font-size: 11px;
 		--#{$prefix}card-header-title-font-weight: 500;
 		--#{$prefix}card-header-title-line-height: 14px;
 
-		--#{$prefix}card-header-subtitle-font-size: 11px;
+		--#{$prefix}card-header-subtitle-font-size: 10px;
 		--#{$prefix}card-header-subtitle-font-weight: 500;
 		--#{$prefix}card-header-subtitle-line-height: 14px;
 
+		--#{$prefix}card-body-padding-y: 0.375rem;
+		--#{$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: 1.75rem;
 		--#{$prefix}card-footer-gap: 0.5rem;
 	}
@@ -74,28 +76,30 @@
 	}
 
 	.#{$prefix}card--sm {
-		--#{$prefix}card-padding-y: 0.5rem;
-		--#{$prefix}card-padding-x: 1rem;
-		--#{$prefix}card-gap: 0.5rem;
-
 		--#{$prefix}card-title-padding-y: 0.875rem 0.375rem;
 		--#{$prefix}card-title-font-size: 1.25rem;
 
+		--#{$prefix}card-header-padding-y: 0.375rem;
+		--#{$prefix}card-header-padding-x: 1rem;
 		--#{$prefix}card-header-min-height: 2rem;
 		--#{$prefix}card-header-gap: 0.75rem;
 		--#{$prefix}card-header-content-gap: 0.5rem;
 
-		--#{$prefix}card-header-title-font-size: 13px;
+		--#{$prefix}card-header-title-font-size: 12px;
 		--#{$prefix}card-header-title-font-weight: 500;
 		--#{$prefix}card-header-title-line-height: 16px;
 
-		--#{$prefix}card-header-subtitle-font-size: 12px;
+		--#{$prefix}card-header-subtitle-font-size: 11px;
 		--#{$prefix}card-header-subtitle-font-weight: 500;
 		--#{$prefix}card-header-subtitle-line-height: 16px;
 
+		--#{$prefix}card-body-padding-y: 0.375rem;
+		--#{$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.375rem;
+		--#{$prefix}card-footer-padding-x: 1rem;
 		--#{$prefix}card-footer-min-height: 2rem;
 		--#{$prefix}card-footer-gap: 0.75rem;
 	}
@@ -105,26 +109,28 @@
 	}
 
 	.#{$prefix}card--md {
-		--#{$prefix}card-padding-y: 0.75rem;
-		--#{$prefix}card-padding-x: 1.5rem;
-		--#{$prefix}card-gap: 0.75rem;
-
 		--#{$prefix}card-title-padding-y: 1rem 0.5rem;
 		--#{$prefix}card-title-font-size: 1.25rem;
 
 		--#{$prefix}card-header-min-height: 2rem;
-		--#{$prefix}card-header-gap: 1rem;
+		--#{$prefix}card-header-padding-y: 0.5rem;
+		--#{$prefix}card-header-padding-x: 1rem;
+		--#{$prefix}card-header-gap: 0.75rem;
 		--#{$prefix}card-header-content-gap: 0.5rem;
 
-		--#{$prefix}card-header-title-font-size: 0.875rem;
+		--#{$prefix}card-header-title-font-size: 13px;
 		--#{$prefix}card-header-title-line-height: 16px;
 
-		--#{$prefix}card-header-subtitle-font-size: 0.8125rem;
+		--#{$prefix}card-header-subtitle-font-size: 12px;
 		--#{$prefix}card-header-subtitle-line-height: 16px;
 
+		--#{$prefix}card-body-padding-y: 0.5rem;
+		--#{$prefix}card-body-padding-x: 1rem;
 		--#{$prefix}card-body-font-size: 0.875rem;
 		--#{$prefix}card-body-line-height: 24px;
 
+		--#{$prefix}card-footer-padding-y: 0.5rem;
+		--#{$prefix}card-footer-padding-x: 1rem;
 		--#{$prefix}card-footer-min-height: 2rem;
 		--#{$prefix}card-footer-gap: 1rem;
 	}
@@ -134,26 +140,28 @@
 	}
 
 	.#{$prefix}card--lg {
-		--#{$prefix}card-padding-y: 1.125rem;
-		--#{$prefix}card-padding-x: 1.75rem;
-		--#{$prefix}card-gap: 1.125rem;
-
 		--#{$prefix}card-title-padding-y: 1.25rem 0.75rem;
 		--#{$prefix}card-title-font-size: 1.5rem;
 
+		--#{$prefix}card-header-padding-y: 0.625rem;
+		--#{$prefix}card-header-padding-x: 1.25rem;
 		--#{$prefix}card-header-min-height: 2.25rem;
 		--#{$prefix}card-header-gap: 1rem;
 		--#{$prefix}card-header-content-gap: 0.75rem;
 
-		--#{$prefix}card-header-title-font-size: 1rem;
+		--#{$prefix}card-header-title-font-size: 14px;
 		--#{$prefix}card-header-title-line-height: 18px;
 
-		--#{$prefix}card-header-subtitle-font-size: 0.875rem;
+		--#{$prefix}card-header-subtitle-font-size: 13px;
 		--#{$prefix}card-header-subtitle-line-height: 18px;
 
+		--#{$prefix}card-body-padding-y: 0.625rem;
+		--#{$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.625rem;
+		--#{$prefix}card-footer-padding-x: 1.25rem;
 		--#{$prefix}card-footer-min-height: 2.25rem;
 		--#{$prefix}card-footer-gap: 1rem;
 	}
@@ -163,23 +171,25 @@
 	}
 
 	.#{$prefix}card--xl {
-		--#{$prefix}card-padding-y: 1.25rem;
-		--#{$prefix}card-padding-x: 2rem;
-		--#{$prefix}card-gap: 1.25rem;
-
+		--#{$prefix}card-header-padding-y: 0.75rem;
+		--#{$prefix}card-header-padding-x: 1.5rem;
 		--#{$prefix}card-header-min-height: 2.5rem;
 		--#{$prefix}card-header-gap: 1rem;
 		--#{$prefix}card-header-content-gap: 0.875rem;
 
-		--#{$prefix}card-header-title-font-size: 1.125rem;
+		--#{$prefix}card-header-title-font-size: 16px;
 		--#{$prefix}card-header-title-line-height: 20px;
 
-		--#{$prefix}card-header-subtitle-font-size: 1rem;
+		--#{$prefix}card-header-subtitle-font-size: 15px;
 		--#{$prefix}card-header-subtitle-line-height: 20px;
 
+		--#{$prefix}card-body-padding-y: 0.75rem;
+		--#{$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: 2.5rem;
 		--#{$prefix}card-footer-gap: 1rem;
 	}
@@ -188,29 +198,31 @@
 		--#{$prefix}icon-font-size-default: 36px;
 	}
 
-	.#{$prefix}card--xxl {
-		--#{$prefix}card-padding-y: 1.5rem;
-		--#{$prefix}card-padding-x: 2rem;
-		--#{$prefix}card-gap: 1.5rem;
-
+	.#{$prefix}card--2xl {
+		--#{$prefix}card-header-padding-y: 0.75rem;
+		--#{$prefix}card-header-padding-x: 1.5rem;
 		--#{$prefix}card-header-min-height: 3rem;
-		--#{$prefix}card-header-gap: 1.5em;
+		--#{$prefix}card-header-gap: 1rem;
 		--#{$prefix}card-header-content-gap: 1rem;
 
-		--#{$prefix}card-header-title-font-size: 1.25rem;
+		--#{$prefix}card-header-title-font-size: 18px;
 		--#{$prefix}card-header-title-line-height: 24px;
 
-		--#{$prefix}card-header-subtitle-font-size: 1.125rem;
+		--#{$prefix}card-header-subtitle-font-size: 16px;
 		--#{$prefix}card-header-subtitle-line-height: 24px;
 
+		--#{$prefix}card-body-padding-y: 0.75rem;
+		--#{$prefix}card-body-padding-x: 1.5rem;
 		--#{$prefix}card-body-font-size: 1.25rem;
 		--#{$prefix}card-body-line-height: 36px;
 
+		--#{$prefix}card-footer-padding-y: 0.75rem;
+		--#{$prefix}card-footer-padding-x: 1.5rem;
 		--#{$prefix}card-footer-min-height: 2.5rem;
 		--#{$prefix}card-footer-gap: 1rem;
 	}
 
-	.#{$prefix}card--xxl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
-		--#{$prefix}icon-font-size-default: 48px;
+	.#{$prefix}card--2xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 40px;
 	}
 }

package/scss/themes/fci/components/_checkbox.scss

@@ -2,6 +2,10 @@
 
 .#{$prefix}theme-fci {
 	.#{$prefix}checkbox-group {
+		&--xs {
+			--#{$prefix}checkbox-group-gap: 0.2rem;
+		}
+
 		&--sm {
 			--#{$prefix}checkbox-group-gap: 0.375rem;
 		}
@@ -13,13 +17,16 @@
 		&--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.2);
-		--#{$prefix}checkbox-control-border-radius: 6px;
 		--#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);
 
 		--#{$prefix}_checked-checkbox-control-border-color: var(--#{$prefix}primary-color);
@@ -27,40 +34,74 @@
 
 		--#{$prefix}checkbox-tap-background: var(--#{$prefix}primary-color);
 
+		&--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.75rem;
+				--#{$prefix}icon-font-size: 0.5rem;
 			}
 		}
 
 		&--md {
 			--#{$prefix}checkbox-gap: 0.5rem;
 
-			--#{$prefix}checkbox-control-width: 20px;
-			--#{$prefix}checkbox-control-height: 20px;
+			--#{$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: 1rem;
+				--#{$prefix}icon-font-size: 0.625rem;
 			}
 		}
 
 		&--lg {
 			--#{$prefix}checkbox-gap: 0.5rem;
 
-			--#{$prefix}checkbox-control-width: 24px;
-			--#{$prefix}checkbox-control-height: 24px;
+			--#{$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: 1.125rem;
+				--#{$prefix}icon-font-size: 0.875rem;
 			}
 		}