@unifiedsoftware/styles 2.0.0-alpha.9 → 2.0.0-beta.2

package/scss/themes/fci/components/_input.scss

@@ -1,26 +1,28 @@
 @use '../../../variables' as *;
 
+$colors-map: (primary, secondary, success, info, warning, danger);
+
 .#{$prefix}theme-fci {
 	.#{$prefix}input {
 		--#{$prefix}input-font-family: var(--#{$prefix}font-sans);
 		--#{$prefix}input-border-radius: 6px;
 
 		&--xs {
-			--#{$prefix}input-height: 24px;
+			--#{$prefix}input-height: 22px;
 			--#{$prefix}input-padding-y: 0.282rem;
 			--#{$prefix}input-padding-x: 0.625rem;
 			--#{$prefix}input-font-size: 0.75rem;
 		}
 
 		&--sm {
-			--#{$prefix}input-height: 28px;
+			--#{$prefix}input-height: 24px;
 			--#{$prefix}input-padding-y: 0.407rem;
 			--#{$prefix}input-padding-x: 0.75rem;
 			--#{$prefix}input-font-size: 0.75rem;
 		}
 
 		&--md {
-			--#{$prefix}input-height: 32px;
+			--#{$prefix}input-height: 30px;
 			--#{$prefix}input-padding-y: 0.532rem;
 			--#{$prefix}input-padding-x: 0.875rem;
 			--#{$prefix}input-font-size: 0.75rem;
@@ -32,14 +34,14 @@
 		}
 
 		&--lg {
-			--#{$prefix}input-height: 36px;
+			--#{$prefix}input-height: 34px;
 			--#{$prefix}input-padding-y: 0.625rem;
 			--#{$prefix}input-padding-x: 1rem;
 			--#{$prefix}input-font-size: 0.85rem;
 		}
 
 		&--xl {
-			--#{$prefix}input-height: 40px;
+			--#{$prefix}input-height: 44px;
 			--#{$prefix}input-padding-y: 0.75rem;
 			--#{$prefix}input-padding-x: 1.125rem;
 			--#{$prefix}input-font-size: 0.85rem;
@@ -80,7 +82,7 @@
 		}
 	}
 
-	.#{$prefix}input--filled.#{$prefix}input--inherit {
+	.#{$prefix}input--filled {
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -90,11 +92,18 @@
 
 		& > .#{$prefix}outline {
 			--#{$prefix}outline-border-color: transparent;
-			--#{$prefix}outline-focus-border-color: var(--#{$prefix}primary-color);
 			--#{$prefix}outline-focus-opacity: 1;
 		}
 	}
 
+	@each $color in $colors-map {
+		.#{$prefix}input--filled.#{$prefix}input--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+	}
+
 	.#{$prefix}input--filled.#{$prefix}input--light {
 		& > .#{$prefix}overlay {
 			--#{$prefix}overlay-color: #fff;
@@ -110,7 +119,7 @@
 		}
 	}
 
-	.#{$prefix}input--outlined.#{$prefix}input--inherit {
+	.#{$prefix}input--outlined {
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -122,11 +131,18 @@
 			--#{$prefix}outline-border-color: currentColor;
 			--#{$prefix}outline-opacity: 0.12;
 			--#{$prefix}outline-hover-opacity: 0.24;
-			--#{$prefix}outline-focus-border-color: var(--#{$prefix}primary-color);
 			--#{$prefix}outline-focus-opacity: 1;
 		}
 	}
 
+	@each $color in $colors-map {
+		.#{$prefix}input--outlined.#{$prefix}input--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+	}
+
 	.#{$prefix}input--outlined.#{$prefix}input--light {
 		--#{$prefix}input-color: #fff;
 		--#{$prefix}input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -145,7 +161,7 @@
 		}
 	}
 
-	.#{$prefix}input--flat.#{$prefix}input--inherit {
+	.#{$prefix}input--flat {
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -156,11 +172,18 @@
 
 		& > .#{$prefix}outline {
 			--#{$prefix}outline-border-color: transparent;
-			--#{$prefix}outline-focus-border-color: var(--#{$prefix}primary-color);
 			--#{$prefix}outline-focus-opacity: 1;
 		}
 	}
 
+	@each $color in $colors-map {
+		.#{$prefix}input--flat.#{$prefix}input--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
+		}
+	}
+
 	.#{$prefix}input--flat.#{$prefix}input--light {
 		--#{$prefix}input-color: #fff;
 		--#{$prefix}input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -178,7 +201,7 @@
 		}
 	}
 
-	.#{$prefix}input--text.#{$prefix}input--inherit {
+	.#{$prefix}input--text {
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {

package/scss/themes/fci/components/_radio.scss

@@ -1,7 +1,13 @@
 @use '../../../variables' as *;
 
+$colors-map: (primary, secondary, success, info, warning, danger);
+
 .#{$prefix}theme-fci {
 	.#{$prefix}radio-group {
+		&--xs {
+			--#{$prefix}radio-group-gap: 0.2rem;
+		}
+
 		&--sm {
 			--#{$prefix}radio-group-gap: 0.375rem;
 		}
@@ -13,6 +19,10 @@
 		&--lg {
 			--#{$prefix}radio-group-gap: 0.75rem;
 		}
+
+		&--xl {
+			--#{$prefix}radio-group-gap: 0.875rem;
+		}
 	}
 
 	.#{$prefix}radio {
@@ -27,6 +37,18 @@
 
 		--#{$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;
 
@@ -42,21 +64,32 @@
 		&--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 {
 				--#{$prefix}icon-font-size: 0.75rem;
 			}
 		}
 
-		&--lg {
+		&--xl {
 			--#{$prefix}radio-gap: 0.5rem;
 
-			--#{$prefix}radio-control-width: 24px;
-			--#{$prefix}radio-control-height: 24px;
+			--#{$prefix}radio-control-width: 22px;
+			--#{$prefix}radio-control-height: 22px;
 			--#{$prefix}radio-label-font-size: 1rem;
 
 			.#{$prefix}icon {
@@ -88,4 +121,13 @@
 			--#{$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/fci/components/_steps.scss

@@ -0,0 +1,79 @@
+@use '../../../variables' as *;
+
+$colors-map: (primary, secondary, success, info, warning, danger);
+
+.#{$prefix}theme-fci {
+	.#{$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/fci/components/_switch.scss

@@ -13,10 +13,26 @@
 
 		--#{$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: 26px;
+			--#{$prefix}switch-control-width: 24px;
 			--#{$prefix}switch-control-height: 16px;
 
 			--#{$prefix}switch-thumb-width: 10px;
@@ -32,6 +48,22 @@
 		&--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;
 
@@ -40,19 +72,19 @@
 
 			--#{$prefix}switch-label-font-size: 0.875rem;
 
-			& .#{$prefix}icon {
-				--#{$prefix}icon-font-size: 1rem;
+			.#{$prefix}icon {
+				--#{$prefix}icon-font-size: 1.125rem;
 			}
 		}
 
-		&--lg {
+		&--xl {
 			--#{$prefix}switch-gap: 0.5rem;
 
-			--#{$prefix}switch-control-width: 40px;
-			--#{$prefix}switch-control-height: 24px;
+			--#{$prefix}switch-control-width: 36px;
+			--#{$prefix}switch-control-height: 22px;
 
-			--#{$prefix}switch-thumb-width: 18px;
-			--#{$prefix}switch-thumb-height: 18px;
+			--#{$prefix}switch-thumb-width: 14px;
+			--#{$prefix}switch-thumb-height: 14px;
 
 			--#{$prefix}switch-label-font-size: 1rem;