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

package/scss/themes/fci/components/_chip.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}chip {
@@ -28,50 +21,50 @@ $colors-map: (
 		}
 
 		&--xs {
-			--#{$prefix}chip-height: 24px;
+			--#{$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.875rem;
+				--#{$prefix}icon-font-size: 0.75rem;
 			}
 		}
 
 		&--sm {
-			--#{$prefix}chip-height: 28px;
+			--#{$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: 1rem;
+				--#{$prefix}icon-font-size: 0.875rem;
 			}
 		}
 
 		&--md {
-			--#{$prefix}chip-height: 32px;
+			--#{$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: 1.125rem;
+				--#{$prefix}icon-font-size: 1rem;
 			}
 		}
 
 		&--lg {
-			--#{$prefix}chip-height: 36px;
+			--#{$prefix}chip-height: 34px;
 			--#{$prefix}chip-padding-y: 0;
 			--#{$prefix}chip-padding-x: 1rem;
-			--#{$prefix}chip-font-size: 1rem;
+			--#{$prefix}chip-font-size: 0.875rem;
 			--#{$prefix}chip-gap: 0.5rem;
 
 			.#{$prefix}icon {
-				--#{$prefix}icon-font-size: 1.25rem;
+				--#{$prefix}icon-font-size: 1.125rem;
 			}
 		}
 
@@ -79,11 +72,11 @@ $colors-map: (
 			--#{$prefix}chip-height: 40px;
 			--#{$prefix}chip-padding-y: 0;
 			--#{$prefix}chip-padding-x: 1.125rem;
-			--#{$prefix}chip-font-size: 1.125rem;
+			--#{$prefix}chip-font-size: 1rem;
 			--#{$prefix}chip-gap: 0.5rem;
 
 			.#{$prefix}icon {
-				--#{$prefix}icon-font-size: 1.5rem;
+				--#{$prefix}icon-font-size: 1.25rem;
 			}
 		}
 
@@ -95,32 +88,105 @@ $colors-map: (
 
 		&--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-opacity: 0.08;
+				--#{$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 $key, $value in $colors-map {
-		.#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
-			--#{$prefix}chip-background: #{$value};
+	@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--outlined.#{$prefix}chip--#{$key} {
-			--#{$prefix}chip-color: #{$value};
+		.#{$prefix}chip--flat.#{$prefix}chip--#{$color} {
+			--#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
 		}
 
-		.#{$prefix}chip--flat.#{$prefix}chip--#{$key} {
-			--#{$prefix}chip-color: #{$value};
+		.#{$prefix}chip--text.#{$prefix}chip--#{$color} {
+			--#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
 		}
 
-		.#{$prefix}chip--text.#{$prefix}chip--#{$key} {
-			--#{$prefix}chip-color: #{$value};
+		.#{$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/fci/components/_descriptions.scss

@@ -0,0 +1,53 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$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-padding-y: 0.5rem;
+		--#{$prefix}description-padding-x: 1rem;
+		--#{$prefix}description-gap-y: 0.5rem;
+		--#{$prefix}description-gap-x: 1rem;
+
+		--#{$prefix}description-label-font-size: 13px;
+
+		--#{$prefix}description-text-font-size: 13px;
+	}
+
+	.#{$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/fci/components/_index.scss

@@ -22,6 +22,7 @@
 @use 'tabs';
 
 @use 'card';
+@use 'descriptions';
 @use 'result';
 
 @use 'nav-rail';

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

@@ -1,42 +1,47 @@
 @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;
-		--#{$prefix}input-gap: 0.5rem;
-		--#{$prefix}input-icon-size: 1.125rem;
 
 		&--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;
+			--#{$prefix}input-content-gap: 0.25rem;
+		}
+
+		&--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 16px;
 		}
 
 		&--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;
@@ -77,7 +82,7 @@
 		}
 	}
 
-	.#{$prefix}input--filled.#{$prefix}input--inherit {
+	.#{$prefix}input--filled {
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -87,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;
@@ -107,7 +119,7 @@
 		}
 	}
 
-	.#{$prefix}input--outlined.#{$prefix}input--inherit {
+	.#{$prefix}input--outlined {
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -119,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);
@@ -142,7 +161,7 @@
 		}
 	}
 
-	.#{$prefix}input--flat.#{$prefix}input--inherit {
+	.#{$prefix}input--flat {
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -153,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);
@@ -175,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/_list.scss

@@ -35,10 +35,6 @@
 				--#{$prefix}_active-overlay-opacity: 0.16;
 			}
 		}
-
-		// .#{$prefix}icon {
-		// 	--#{$prefix}icon-color: var(--#{$prefix}primary-color);
-		// }
 	}
 
 	.#{$prefix}list-subheader {

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/_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;