@unifiedsoftware/styles 1.1.7 → 2.0.0-alpha.1

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

@@ -1,5 +1,10 @@
 @use '../../../variables' as *;
 
+html {
+	-webkit-text-size-adjust: 100%;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+}
 $colors-map: (
 	inherit: inherit,
 	primary: var(--#{$prefix}primary-color),
@@ -12,7 +17,7 @@ $colors-map: (
 
 .#{$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;
@@ -45,11 +50,11 @@ $colors-map: (
 		}
 
 		&--md {
-			--#{$prefix}button-height: 32px;
+			--#{$prefix}button-height: 36px;
 			--#{$prefix}button-padding-y: 0;
-			--#{$prefix}button-padding-x: 0.875rem;
+			--#{$prefix}button-padding-x: 1rem;
 			--#{$prefix}button-font-size: 0.875rem;
-			--#{$prefix}button-border-radius: 6px;
+			--#{$prefix}button-border-radius: 8px;
 			--#{$prefix}button-gap: 0.375rem;
 
 			.#{$prefix}icon {
@@ -91,10 +96,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 {
@@ -118,7 +123,7 @@ $colors-map: (
 			}
 
 			& > .#{$prefix}outline {
-				--#{$prefix}outline-border-width: 1px;
+				--#{$prefix}outline-border-width: 2px;
 				--#{$prefix}outline-border-color: currentColor;
 			}
 		}
@@ -126,11 +131,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.12;
+				--#{$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 {
@@ -172,23 +177,5 @@ $colors-map: (
 		.#{$prefix}button--text.#{$prefix}button--#{$key} {
 			--#{$prefix}button-color: #{$value};
 		}
-
-		@if $key == 'secondary' {
-			.#{$prefix}button--filled.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
-			}
-
-			.#{$prefix}button--outlined.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
-			}
-
-			.#{$prefix}button--flat.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
-			}
-
-			.#{$prefix}button--text.#{$prefix}button--#{$key} {
-				--#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
-			}
-		}
 	}
 }

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

@@ -2,10 +2,12 @@
 
 .#{$prefix}theme-fci {
 	.#{$prefix}card {
-		--#{$prefix}card-border-width: 1px;
+		--#{$prefix}card-border-width: 0px;
 		--#{$prefix}card-border-style: solid;
-		--#{$prefix}card-border-color: rgba(9, 30, 66, 0.14);
-		--#{$prefix}card-border-radius: 6px;
+		--#{$prefix}card-border-color: var(--#{$prefix}border-color);
+		--#{$prefix}card-border-radius: 10px;
+		--#{$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;
 
 		& > .#{$prefix}overlay {
 			--#{$prefix}overlay-color: inherit;
@@ -49,7 +51,7 @@
 		}
 	}
 
-	.#{$prefix}card--sm .#{$prefix}card-header {
+	.#{$prefix}card--xs .#{$prefix}card-header {
 		--#{$prefix}card-header-min-height: 36px;
 		--#{$prefix}card-header-padding-y: 0.685rem;
 		--#{$prefix}card-header-padding-x: 1rem;
@@ -64,7 +66,7 @@
 		--#{$prefix}card-header-subtitle-line-height: 14px;
 	}
 
-	.#{$prefix}card--sm .#{$prefix}card-body {
+	.#{$prefix}card--xs .#{$prefix}card-body {
 		--#{$prefix}card-body-padding-y: 1rem;
 		--#{$prefix}card-body-padding-x: 1rem;
 		--#{$prefix}card-body-font-size: 0.75rem;
@@ -72,21 +74,21 @@
 		--#{$prefix}card-body-color: var(--#{$prefix}body-color);
 	}
 
-	.#{$prefix}card--md .#{$prefix}card-header {
-		--#{$prefix}card-header-min-height: 2.5rem;
+	.#{$prefix}card--sm .#{$prefix}card-header {
+		--#{$prefix}card-header-min-height: 48px;
 		--#{$prefix}card-header-padding-y: 0.625rem;
 		--#{$prefix}card-header-padding-x: 1rem;
 		--#{$prefix}card-header-padding-level: 1.25rem;
 		--#{$prefix}card-header-gap: 1rem;
 
-		--#{$prefix}card-header-title-font-size: 0.8125rem;
+		--#{$prefix}card-header-title-font-size: 0.875rem;
 		--#{$prefix}card-header-title-line-height: 20px;
 
 		--#{$prefix}card-header-subtitle-font-size: 0.75rem;
 		--#{$prefix}card-header-subtitle-line-height: 16px;
 	}
 
-	.#{$prefix}card--md .#{$prefix}card-body {
+	.#{$prefix}card--sm .#{$prefix}card-body {
 		--#{$prefix}card-body-padding-y: 1.25rem;
 		--#{$prefix}card-body-padding-x: 1rem;
 		--#{$prefix}card-body-font-size: 0.875rem;
@@ -94,8 +96,35 @@
 		--#{$prefix}card-body-color: var(--#{$prefix}body-color);
 	}
 
+	.#{$prefix}card--md .#{$prefix}card-header {
+		--#{$prefix}card-header-min-height: 56px;
+		--#{$prefix}card-header-padding-y: 0.625rem;
+		--#{$prefix}card-header-padding-x: 1rem;
+		--#{$prefix}card-header-padding-level: 1.25rem;
+		--#{$prefix}card-header-font-size: 0.75rem;
+		--#{$prefix}card-header-gap: 1rem;
+
+		--#{$prefix}card-header-title-font-size: 1rem;
+		--#{$prefix}card-header-title-line-height: 24px;
+
+		--#{$prefix}card-header-subtitle-font-size: 0.8125rem;
+		--#{$prefix}card-header-subtitle-line-height: 18px;
+	}
+
+	.#{$prefix}card--md .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 24px;
+	}
+
+	.#{$prefix}card--md .#{$prefix}card-body {
+		--#{$prefix}card-body-padding-y: 1.5rem;
+		--#{$prefix}card-body-padding-x: 1rem;
+		--#{$prefix}card-body-font-size: 1rem;
+		--#{$prefix}card-body-line-height: 24px;
+		--#{$prefix}card-body-color: var(--#{$prefix}body-color);
+	}
+
 	.#{$prefix}card--lg .#{$prefix}card-header {
-		--#{$prefix}card-header-min-height: 2.75rem;
+		--#{$prefix}card-header-min-height: 64px;
 		--#{$prefix}card-header-padding-y: 0.625rem;
 		--#{$prefix}card-header-padding-x: 1rem;
 		--#{$prefix}card-header-padding-level: 1.25rem;
@@ -105,7 +134,7 @@
 		--#{$prefix}card-header-title-font-size: 0.875rem;
 		--#{$prefix}card-header-title-line-height: 24px;
 
-		--#{$prefix}card-header-subtitle-font-size: 0.8125rem;
+		--#{$prefix}card-header-subtitle-font-size: 1rem;
 		--#{$prefix}card-header-subtitle-line-height: 18px;
 	}
 
@@ -116,4 +145,27 @@
 		--#{$prefix}card-body-line-height: 24px;
 		--#{$prefix}card-body-color: var(--#{$prefix}body-color);
 	}
+
+	.#{$prefix}card--xl .#{$prefix}card-header {
+		--#{$prefix}card-header-min-height: 72px;
+		--#{$prefix}card-header-padding-y: 0.625rem;
+		--#{$prefix}card-header-padding-x: 1rem;
+		--#{$prefix}card-header-padding-level: 1.25rem;
+		--#{$prefix}card-header-font-size: 0.75rem;
+		--#{$prefix}card-header-gap: 1rem;
+
+		--#{$prefix}card-header-title-font-size: 1rem;
+		--#{$prefix}card-header-title-line-height: 24px;
+
+		--#{$prefix}card-header-subtitle-font-size: 0.8125rem;
+		--#{$prefix}card-header-subtitle-line-height: 18px;
+	}
+
+	.#{$prefix}card--xl .#{$prefix}card-body {
+		--#{$prefix}card-body-padding-y: 1.5rem;
+		--#{$prefix}card-body-padding-x: 1rem;
+		--#{$prefix}card-body-font-size: 1rem;
+		--#{$prefix}card-body-line-height: 24px;
+		--#{$prefix}card-body-color: var(--#{$prefix}body-color);
+	}
 }

package/scss/themes/fci/components/_chip.scss

@@ -122,23 +122,5 @@ $colors-map: (
 		.#{$prefix}chip--text.#{$prefix}chip--#{$key} {
 			--#{$prefix}chip-color: #{$value};
 		}
-
-		@if $key == 'secondary' {
-			.#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
-				--#{$prefix}chip-color: var(--#{$prefix}black-color);
-			}
-
-			.#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
-				--#{$prefix}chip-color: var(--#{$prefix}black-color);
-			}
-
-			.#{$prefix}chip--flat.#{$prefix}chip--#{$key} {
-				--#{$prefix}chip-color: var(--#{$prefix}black-color);
-			}
-
-			.#{$prefix}chip--text.#{$prefix}chip--#{$key} {
-				--#{$prefix}chip-color: var(--#{$prefix}black-color);
-			}
-		}
 	}
 }

package/scss/themes/fci/components/_index.scss

@@ -23,3 +23,5 @@
 
 @use 'card';
 @use 'result';
+
+@use 'nav-rail';

package/scss/themes/fci/components/_nav-rail.scss

@@ -0,0 +1,62 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$prefix}nav-rail {
+		--#{$prefix}nav-rail-border-color: var(--#{$prefix}border-color);
+
+		--#{$prefix}nav-rail-start-content-padding-y: 0.5rem;
+		--#{$prefix}nav-rail-start-content-gap: 0.5rem;
+
+		--#{$prefix}nav-rail-content-padding-y: 0.5rem;
+		--#{$prefix}nav-rail-content-gap: 0.5rem;
+
+		--#{$prefix}nav-rail-end-content-padding-y: 0.5rem;
+		--#{$prefix}nav-rail-end-content-gap: 0.5rem;
+
+		& > .#{$prefix}surface {
+			--#{$prefix}surface-color: #fff;
+			--#{$prefix}surface-opacity: 1;
+		}
+
+		&-item {
+			--#{$prefix}nav-rail-item-border-radius: 6px;
+			--#{$prefix}nav-rail-item-gap: 0.75rem;
+
+			--#{$prefix}nav-rail-item-padding-y: 1rem;
+
+			--#{$prefix}nav-rail-item-label-font-size: 11px;
+			--#{$prefix}nav-rail-item-label-font-weight: 700;
+			--#{$prefix}nav-rail-item-label-line-height: 16px;
+
+			--#{$prefix}nav-rail-item-indicator-size: 4px;
+			--#{$prefix}nav-rail-item-indicator-border-radius: 4px;
+			--#{$prefix}nav-rail-item-indicator-color: currentColor;
+
+			--#{$prefix}nav-rail-item-media-width: 48px;
+			--#{$prefix}nav-rail-item-media-height: 48px;
+			--#{$prefix}nav-rail-item-media-border-radius: 1rem;
+
+			--#{$prefix}nav-rail-item-icon-font-size: 1.5rem;
+
+			--#{$prefix}nav-rail-item-color: var(--#{$prefix}secondary-action-color);
+
+			--#{$prefix}_active-nav-rail-item-color: var(--#{$prefix}primary-color);
+			--#{$prefix}_active-nav-rail-item-indicator-color: var(--#{$prefix}primary-color);
+
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-opacity: 0;
+			}
+
+			& > .#{$prefix}overlay {
+				--#{$prefix}overlay-opacity: 0;
+			}
+
+			&__icon,
+			&__media {
+				& > .#{$prefix}overlay {
+					--#{$prefix}overlay-opacity: 0;
+				}
+			}
+		}
+	}
+}

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

@@ -1,19 +1,17 @@
 @use '../../../variables' as *;
 
 .#{$prefix}theme-fci {
-	.#{$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-border-radius: 6px 6px 0px 0px;
-
-		--#{$prefix}tab-closable-color: var(--#{$prefix}secondary-action-color);
+	.#{$prefix}tabs--underlined {
+		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
+		--#{$prefix}tab-indicator-height: 3px;
+		--#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
+	}
 
+	.#{$prefix}tabs--underlined .#{$prefix}tab {
 		--#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
 		--#{$prefix}tab-indicator-height: 3px;
 		--#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
+		--#{$prefix}tab-border-radius: 0px;
 
 		& > .#{$prefix}overlay {
 			--#{$prefix}overlay-opacity: 0;
@@ -26,4 +24,14 @@
 			--#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
 		}
 	}
+
+	.#{$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);
+	}
 }

package/scss/themes/fci/components/_toolbar.scss

@@ -25,6 +25,8 @@
 			--#{$prefix}toolbar-min-height: 56px;
 			--#{$prefix}toolbar-padding-y: 0.5rem;
 			--#{$prefix}toolbar-padding-x: 1rem;
+			--#{$prefix}toolbar-gap: 1rem;
+			--#{$prefix}toolbar-content-gap: 0.5rem;
 
 			--#{$prefix}toolbar-title-font-size: 1rem;
 			--#{$prefix}toolbar-title-line-height: 20px;
@@ -32,6 +34,10 @@
 			--#{$prefix}toolbar-subtitle-line-height: 16px;
 		}
 
+		&--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+			--#{$prefix}icon-font-size-default: 24px;
+		}
+
 		&--lg {
 			--#{$prefix}toolbar-min-height: 64px;
 			--#{$prefix}toolbar-padding-y: 0.75rem;