@unifiedsoftware/styles 2.0.0-beta.20 → 2.0.0-beta.21

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

@@ -17,7 +17,7 @@ html {
 		--#{$prefix}button-divider-color: #fff;
 
 		&--xs {
-			--#{$prefix}button-height: 22px;
+			--#{$prefix}button-height: 24px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 0.625rem;
 			--#{$prefix}button-font-size: 0.75rem;
@@ -30,7 +30,7 @@ html {
 		}
 
 		&--sm {
-			--#{$prefix}button-height: 26px;
+			--#{$prefix}button-height: 28px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 0.75rem;
 			--#{$prefix}button-font-size: 0.75rem;
@@ -43,10 +43,10 @@ html {
 		}
 
 		&--md {
-			--#{$prefix}button-height: 30px;
+			--#{$prefix}button-height: 32px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 0.875rem;
-			--#{$prefix}button-font-size: 0.875rem;
+			--#{$prefix}button-font-size: 0.8125rem;
 			--#{$prefix}button-border-radius: 6px;
 			--#{$prefix}button-gap: 0.375rem;
 
@@ -56,7 +56,7 @@ html {
 		}
 
 		&--lg {
-			--#{$prefix}button-height: 34px;
+			--#{$prefix}button-height: 36px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 1rem;
 			--#{$prefix}button-font-size: 0.875rem;
@@ -110,6 +110,7 @@ html {
 
 			& > .#{$prefix}outline {
 				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-width: 0px;
 				--#{$prefix}outline-border-color: transparent;
 			}
 
@@ -129,9 +130,9 @@ html {
 			}
 
 			& > .#{$prefix}outline {
-				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-width: 0px;
 				--#{$prefix}outline-border-color: var(--#{$prefix}secondary-color);
-				--#{$prefix}outline-opacity: 0.16;
+				--#{$prefix}outline-opacity: 1;
 			}
 		}
 
@@ -146,8 +147,9 @@ html {
 			}
 
 			& > .#{$prefix}outline {
-				--#{$prefix}outline-border-width: 1px;
-				--#{$prefix}outline-border-color: transparent;
+				--#{$prefix}outline-border-width: 0px;
+				--#{$prefix}outline-border-color: currentColor;
+				--#{$prefix}outline-opacity: 0.24;
 			}
 		}
 
@@ -254,6 +256,15 @@ html {
 					--#{$prefix}_focus-hover-overlay-opacity: 0.24;
 					--#{$prefix}_focus-active-overlay-opacity: 0.32;
 				}
+
+				& > .#{$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,
+						rgba(0, 0, 0, 0.05) 0px 1px 2px 0px,
+						rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
+				}
 			}
 
 			.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
@@ -304,4 +315,30 @@ html {
 			}
 		}
 	}
+
+	.#{$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 1px 2px 0px,
+			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 1px 2px 0px,
+			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.12) 0px 1px 2px 0px,
+			rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+	}
 }

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

@@ -15,7 +15,7 @@
 		--#{$prefix}card-header-title-font-weight: 500;
 		--#{$prefix}card-header-title-color: var(--#{$prefix}title-color);
 
-		--#{$prefix}card-header-subtitle-font-weight: 400;
+		--#{$prefix}card-header-subtitle-font-weight: 500;
 		--#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
 
 		--#{$prefix}card-body-color: var(--#{$prefix}body-color);
@@ -52,12 +52,10 @@
 		--#{$prefix}card-header-gap: 0.5rem;
 		--#{$prefix}card-header-content-gap: 0.25rem;
 
-		--#{$prefix}card-header-title-font-size: 11px;
-		--#{$prefix}card-header-title-font-weight: 500;
+		--#{$prefix}card-header-title-font-size: 12px;
 		--#{$prefix}card-header-title-line-height: 14px;
 
 		--#{$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;
@@ -85,12 +83,10 @@
 		--#{$prefix}card-header-gap: 0.75rem;
 		--#{$prefix}card-header-content-gap: 0.5rem;
 
-		--#{$prefix}card-header-title-font-size: 12px;
-		--#{$prefix}card-header-title-font-weight: 500;
+		--#{$prefix}card-header-title-font-size: 13px;
 		--#{$prefix}card-header-title-line-height: 16px;
 
 		--#{$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;
@@ -118,7 +114,7 @@
 		--#{$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: 15px;
 		--#{$prefix}card-header-title-line-height: 16px;
 
 		--#{$prefix}card-header-subtitle-font-size: 12px;
@@ -149,7 +145,7 @@
 		--#{$prefix}card-header-gap: 1rem;
 		--#{$prefix}card-header-content-gap: 0.75rem;
 
-		--#{$prefix}card-header-title-font-size: 14px;
+		--#{$prefix}card-header-title-font-size: 16px;
 		--#{$prefix}card-header-title-line-height: 18px;
 
 		--#{$prefix}card-header-subtitle-font-size: 13px;
@@ -177,7 +173,7 @@
 		--#{$prefix}card-header-gap: 1rem;
 		--#{$prefix}card-header-content-gap: 0.875rem;
 
-		--#{$prefix}card-header-title-font-size: 16px;
+		--#{$prefix}card-header-title-font-size: 18px;
 		--#{$prefix}card-header-title-line-height: 20px;
 
 		--#{$prefix}card-header-subtitle-font-size: 15px;
@@ -205,7 +201,7 @@
 		--#{$prefix}card-header-gap: 1rem;
 		--#{$prefix}card-header-content-gap: 1rem;
 
-		--#{$prefix}card-header-title-font-size: 18px;
+		--#{$prefix}card-header-title-font-size: 20px;
 		--#{$prefix}card-header-title-line-height: 24px;
 
 		--#{$prefix}card-header-subtitle-font-size: 16px;

package/scss/themes/fci/components/_icon.scss

@@ -2,7 +2,8 @@
 
 $colors-map: (
 	primary: var(--#{$prefix}primary-color),
-	secondary: var(--#{$prefix}secondary-color),
+	//secondary: var(--#{$prefix}secondary-color),
+	secondary: rgba(0, 0, 0, 0.54),
 	success: var(--#{$prefix}success-color),
 	info: var(--#{$prefix}info-color),
 	warning: var(--#{$prefix}warning-color),

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

@@ -5,52 +5,82 @@ $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: 22px;
+			--#{$prefix}input-height: 24px;
 			--#{$prefix}input-padding-y: 0.282rem;
 			--#{$prefix}input-padding-x: 0.625rem;
 			--#{$prefix}input-font-size: 0.75rem;
+			--#{$prefix}input-border-radius: 6px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--xs .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 0.75rem;
 		}
 
 		&--sm {
-			--#{$prefix}input-height: 24px;
+			--#{$prefix}input-height: 28px;
 			--#{$prefix}input-padding-y: 0.407rem;
 			--#{$prefix}input-padding-x: 0.75rem;
 			--#{$prefix}input-font-size: 0.75rem;
+			--#{$prefix}input-border-radius: 6px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--sm .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 0.875rem;
 		}
 
 		&--md {
-			--#{$prefix}input-height: 30px;
+			--#{$prefix}input-height: 32px;
 			--#{$prefix}input-padding-y: 0.532rem;
 			--#{$prefix}input-padding-x: 0.875rem;
-			--#{$prefix}input-font-size: 0.75rem;
+			--#{$prefix}input-font-size: 0.8125rem;
+			--#{$prefix}input-border-radius: 6px;
+			--#{$prefix}input-line-height: 1;
 			--#{$prefix}input-content-gap: 0.25rem;
 		}
 
 		&--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
-			--#{$prefix}icon-font-size-default: 16px;
+			--#{$prefix}icon-font-size-default: 1rem;
 		}
 
 		&--lg {
-			--#{$prefix}input-height: 34px;
+			--#{$prefix}input-height: 36px;
 			--#{$prefix}input-padding-y: 0.625rem;
 			--#{$prefix}input-padding-x: 1rem;
-			--#{$prefix}input-font-size: 0.85rem;
+			--#{$prefix}input-font-size: 0.875rem;
+			--#{$prefix}input-border-radius: 8px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--lg .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 1.125rem;
 		}
 
 		&--xl {
-			--#{$prefix}input-height: 44px;
+			--#{$prefix}input-height: 40px;
 			--#{$prefix}input-padding-y: 0.75rem;
-			--#{$prefix}input-padding-x: 1.125rem;
-			--#{$prefix}input-font-size: 0.85rem;
+			--#{$prefix}input-padding-x: 1.25rem;
+			--#{$prefix}input-font-size: 1rem;
+			--#{$prefix}input-border-radius: 8px;
+			--#{$prefix}input-line-height: 1;
+		}
+
+		&--xl .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 1.25rem;
 		}
 
 		&--filled {
 			& > .#{$prefix}outline {
 				--#{$prefix}outline-border-width: 1px;
-				--#{$prefix}outline-focus-border-width: 1px;
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-opacity: 0;
+				--#{$prefix}glow-focus-border-width: 4px;
+				--#{$prefix}glow-focus-opacity: 0.2;
 			}
 		}
 
@@ -62,14 +92,24 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 
 			& > .#{$prefix}outline {
 				--#{$prefix}outline-border-width: 1px;
-				--#{$prefix}outline-focus-border-width: 1px;
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-opacity: 0;
+				--#{$prefix}glow-focus-border-width: 4px;
+				--#{$prefix}glow-focus-opacity: 0.2;
 			}
 		}
 
 		&--flat {
 			& > .#{$prefix}outline {
 				--#{$prefix}outline-border-width: 1px;
-				--#{$prefix}outline-focus-border-width: 1px;
+			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-opacity: 0;
+				--#{$prefix}glow-focus-border-width: 4px;
+				--#{$prefix}glow-focus-opacity: 0.2;
 			}
 		}
 
@@ -79,10 +119,15 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 			& > .#{$prefix}outline {
 				--#{$prefix}outline-border-width: 1px;
 			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-opacity: 0;
+			}
 		}
 	}
 
 	.#{$prefix}input--filled {
+		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -101,6 +146,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 			& > .#{$prefix}outline {
 				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
 			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
 		}
 	}
 
@@ -120,6 +169,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 	}
 
 	.#{$prefix}input--outlined {
+		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -129,8 +179,8 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 
 		& > .#{$prefix}outline {
 			--#{$prefix}outline-border-color: currentColor;
-			--#{$prefix}outline-opacity: 0.12;
-			--#{$prefix}outline-hover-opacity: 0.24;
+			--#{$prefix}outline-opacity: 0.23;
+			--#{$prefix}outline-hover-opacity: 0.5;
 			--#{$prefix}outline-focus-opacity: 1;
 		}
 	}
@@ -140,6 +190,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 			& > .#{$prefix}outline {
 				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
 			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
 		}
 	}
 
@@ -162,6 +216,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 	}
 
 	.#{$prefix}input--flat {
+		--#{$prefix}input-color: rgba(0, 0, 0, 0.87);
 		--#{$prefix}input-placeholder-color: rgba(0, 0, 0, 0.6);
 
 		& > .#{$prefix}overlay {
@@ -181,6 +236,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 			& > .#{$prefix}outline {
 				--#{$prefix}outline-focus-border-color: var(--#{$prefix}#{$color}-color);
 			}
+
+			& > .#{$prefix}glow {
+				--#{$prefix}glow-focus-border-color: var(--#{$prefix}#{$color}-color);
+			}
 		}
 	}
 

package/scss/themes/fci/components/_tabs.scss

@@ -1,6 +1,38 @@
 @use '../../../variables' as *;
 
 .#{$prefix}theme-fci {
+	.#{$prefix}tabs {
+		&--xs {
+			--#{$prefix}tab-height: 28px;
+			--#{$prefix}tab-padding-x: 12px;
+			--#{$prefix}tab-font-size: 12px;
+		}
+
+		&--sm {
+			--#{$prefix}tab-height: 32px;
+			--#{$prefix}tab-font-size: 14px;
+			--#{$prefix}tab-padding-x: 13px;
+		}
+
+		&--md {
+			--#{$prefix}tab-height: 36px;
+			--#{$prefix}tab-padding-x: 16px;
+			--#{$prefix}tab-font-size: 14px;
+		}
+
+		&--lg {
+			--#{$prefix}tab-height: 40px;
+			--#{$prefix}tab-padding-x: 18px;
+			--#{$prefix}tab-font-size: 16px;
+		}
+
+		&--xl {
+			--#{$prefix}tab-height: 44px;
+			--#{$prefix}tab-padding-x: 22px;
+			--#{$prefix}tab-font-size: 18px;
+		}
+	}
+
 	.#{$prefix}tabs--underlined {
 		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
 		--#{$prefix}tab-indicator-height: 3px;
@@ -126,8 +158,6 @@
 	.#{$prefix}tab {
 		--#{$prefix}tab-color: var(--#{$prefix}secondary-action-color);
 		--#{$prefix}tab-padding-y: 0px;
-		--#{$prefix}tab-padding-x: 16px;
-		--#{$prefix}tab-font-size: 0.8125rem;
 		--#{$prefix}tab-font-weight: 500;
 
 		--#{$prefix}tab-closable-color: var(--#{$prefix}secondary-action-color);