@unifiedsoftware/styles 2.0.0-alpha.3 → 2.0.0-alpha.4

package/scss/themes/fci/_tokens.scss

@@ -30,6 +30,16 @@
 	--#{$prefix}font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
+	--#{$prefix}fs-xs: 0.75rem;
+	--#{$prefix}fs-sm: 0.875rem;
+	--#{$prefix}fs-md: 1rem;
+	--#{$prefix}fs-lg: 1.125rem;
+	--#{$prefix}fs-xl: 1.25rem;
+	--#{$prefix}fs-2xl: 1.5rem;
+	--#{$prefix}fs-3xl: 1.75rem;
+	--#{$prefix}fs-4xl: 2rem;
+	--#{$prefix}fs-5xl: 2.5rem;
+
 	--#{$prefix}shadow-none: none;
 	--#{$prefix}shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 	--#{$prefix}shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

package/scss/themes/fci/components/_accordion.scss

@@ -1,20 +1,39 @@
 @use '../../../variables' as *;
 
+$colors-map: (primary, secondary, success, info, warning, danger);
+
 .#{$prefix}theme-fci {
 	.#{$prefix}accordion {
-		--#{$prefix}accordion-border-radius: 10px;
-
-		--#{$prefix}accordion-border-width: 1px;
-		--#{$prefix}accordion-border-style: solid;
-		--#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
-
 		--#{$prefix}accordion-header-border-color: var(--#{$prefix}accordion-border-color);
 
 		--#{$prefix}accordion-header-title-font-weight: 500;
 		--#{$prefix}accordion-header-subtitle-font-weight: 400;
+
+		--#{$prefix}accordion-body-color: inherit;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 0px;
+			--#{$prefix}outline-z-index: 1;
+		}
 	}
 
-	.#{$prefix}accordion--xs .#{$prefix}accordion-header {
+	.#{$prefix}accordion--bordered:not(.#{$prefix}accordion--splitted) {
+		--#{$prefix}accordion-border-radius: 10px;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+		}
+	}
+
+	.#{$prefix}accordion--bordered.#{$prefix}accordion--splitted .#{$prefix}accordion-item {
+		--#{$prefix}accordion-border-radius: 10px;
+
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 1px;
+		}
+	}
+
+	.#{$prefix}accordion--xs {
 		--#{$prefix}accordion-header-min-height: 36px;
 		--#{$prefix}accordion-header-padding-y: 0.685rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -27,16 +46,14 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 11px;
 		--#{$prefix}accordion-header-title-line-height: 14px;
-	}
 
-	.#{$prefix}accordion--xs .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 0.75rem;
 		--#{$prefix}accordion-body-line-height: 18px;
 	}
 
-	.#{$prefix}accordion--sm .#{$prefix}accordion-header {
+	.#{$prefix}accordion--sm {
 		--#{$prefix}accordion-header-min-height: 48px;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -48,9 +65,7 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.75rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 16px;
-	}
 
-	.#{$prefix}accordion--sm .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1.25rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 0.875rem;
@@ -59,9 +74,7 @@
 
 	.#{$prefix}accordion--md {
 		--#{$prefix}accordion-splitted-gap: 0.5rem;
-	}
 
-	.#{$prefix}accordion--md .#{$prefix}accordion-header {
 		--#{$prefix}accordion-header-min-height: 56px;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -75,20 +88,18 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 18px;
-	}
-
-	.#{$prefix}accordion--md .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
-		--#{$prefix}icon-font-size-default: 24px;
-	}
 
-	.#{$prefix}accordion--md .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1.5rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 1rem;
 		--#{$prefix}accordion-body-line-height: 24px;
 	}
 
-	.#{$prefix}accordion--lg .#{$prefix}accordion-header {
+	.#{$prefix}accordion--md .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 24px;
+	}
+
+	.#{$prefix}accordion--lg {
 		--#{$prefix}accordion-header-min-height: 64px;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -101,16 +112,14 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 18px;
-	}
 
-	.#{$prefix}accordion--lg .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1.5rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 1rem;
 		--#{$prefix}accordion-body-line-height: 24px;
 	}
 
-	.#{$prefix}accordion--xl .#{$prefix}accordion-header {
+	.#{$prefix}accordion--xl {
 		--#{$prefix}accordion-header-min-height: 3.5rem;
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
@@ -123,152 +132,93 @@
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
 		--#{$prefix}accordion-header-subtitle-line-height: 18px;
-	}
 
-	.#{$prefix}accordion--xl .#{$prefix}accordion-body {
 		--#{$prefix}accordion-body-padding-y: 1.5rem;
 		--#{$prefix}accordion-body-padding-x: 1rem;
 		--#{$prefix}accordion-body-font-size: 1rem;
 		--#{$prefix}accordion-body-line-height: 24px;
 	}
 
-	.#{$prefix}accordion-item--selected {
-		--#{$prefix}accordion-header-title-font-weight: 700;
-	}
-
-	.#{$prefix}accordion--plain.#{$prefix}accordion--primary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: var(--#{$prefix}primary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}white-color);
+	.#{$prefix}accordion-item {
+		& > .#{$prefix}outline {
+			--#{$prefix}outline-border-width: 0px;
+			--#{$prefix}outline-z-index: 1;
 		}
 	}
 
-	.#{$prefix}accordion-header--plain.#{$prefix}accordion-header--primary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}primary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}white-color);
-		}
-	}
-
-	.#{$prefix}accordion--plain.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: inherit;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}white-color);
-		}
+	.#{$prefix}accordion-item--selected {
+		--#{$prefix}accordion-header-title-font-weight: 700;
 	}
 
-	.#{$prefix}accordion-header--plain.#{$prefix}accordion-header--secondary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
-
+	.#{$prefix}accordion-body {
 		& > .#{$prefix}surface {
 			--#{$prefix}surface-color: var(--#{$prefix}white-color);
 		}
 	}
 
-	.#{$prefix}accordion--flat.#{$prefix}accordion--primary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: var(--#{$prefix}primary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-			--#{$prefix}surface-opacity: 0.16;
+	@each $color in $colors-map {
+		.#{$prefix}accordion--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}outline-opacity: 0.2;
+			}
 		}
-	}
-
-	.#{$prefix}accordion-header--flat.#{$prefix}accordion-header--primary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}primary-color);
 
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-			--#{$prefix}surface-opacity: 0.16;
+		.#{$prefix}accordion-item--#{$color} {
+			& > .#{$prefix}outline {
+				--#{$prefix}outline-border-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}outline-opacity: 0.2;
+			}
 		}
 	}
 
-	.#{$prefix}accordion--flat.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: inherit;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-			--#{$prefix}surface-opacity: 0.08;
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-color);
 		}
-	}
-
-	.#{$prefix}accordion-header--flat.#{$prefix}accordion-header--secondary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
 
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-			--#{$prefix}surface-opacity: 0.08;
+		.#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}white-color);
+			}
 		}
 	}
 
-	.#{$prefix}accordion--tonal.#{$prefix}accordion--primary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: inherit;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-			--#{$prefix}surface-opacity: 0.16;
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
 		}
-	}
-
-	.#{$prefix}accordion-header--tonal.#{$prefix}accordion-header--primary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
 
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
-			--#{$prefix}surface-opacity: 0.16;
-		}
-	}
-
-	.#{$prefix}accordion--tonal.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: inherit;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-			--#{$prefix}surface-opacity: 0.08;
-		}
-	}
-
-	.#{$prefix}accordion-header--tonal.#{$prefix}accordion-header--secondary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
-			--#{$prefix}surface-opacity: 0.08;
+		.#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+			}
 		}
 	}
 
-	.#{$prefix}accordion--filled.#{$prefix}accordion--primary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: #fff;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-color);
 		}
-	}
-
-	.#{$prefix}accordion-header--filled.#{$prefix}accordion-header--primary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
 
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}primary-color);
+		.#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}surface-opacity: 0.08;
+			}
 		}
 	}
 
-	.#{$prefix}accordion--filled.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
-		--#{$prefix}accordion-body-color: #fff;
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
+	@each $color in $colors-map {
+		.#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} {
+			--#{$prefix}accordion-header-color: var(--#{$prefix}black-color);
 		}
-	}
 
-	.#{$prefix}accordion-header--filled.#{$prefix}accordion-header--secondary {
-		--#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
-
-		& > .#{$prefix}surface {
-			--#{$prefix}surface-color: var(--#{$prefix}secondary-color);
+		.#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
+			& > .#{$prefix}surface {
+				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
+				--#{$prefix}surface-opacity: 0.08;
+			}
 		}
 	}
 }

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

@@ -91,7 +91,7 @@ html {
 			}
 		}
 
-		&--xxl {
+		&--2xl {
 			--#{$prefix}button-height: 56px;
 			--#{$prefix}button-padding-y: 0;
 			--#{$prefix}button-padding-x: 1.75rem;
@@ -207,7 +207,7 @@ html {
 		}
 	}
 
-	.#{$prefix}button--xxl.#{$prefix}button--icon-only {
+	.#{$prefix}button--2xl.#{$prefix}button--icon-only {
 		.#{$prefix}icon {
 			--#{$prefix}icon-font-size: 1.875rem;
 		}

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

@@ -188,7 +188,7 @@
 		--#{$prefix}icon-font-size-default: 36px;
 	}
 
-	.#{$prefix}card--xxl {
+	.#{$prefix}card--2xl {
 		--#{$prefix}card-padding-y: 1.5rem;
 		--#{$prefix}card-padding-x: 2rem;
 		--#{$prefix}card-gap: 1.5rem;
@@ -210,7 +210,7 @@
 		--#{$prefix}card-footer-gap: 1rem;
 	}
 
-	.#{$prefix}card--xxl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+	.#{$prefix}card--2xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
 		--#{$prefix}icon-font-size-default: 48px;
 	}
 }

package/scss/themes/fci/components/_descriptions.scss

@@ -0,0 +1,37 @@
+@use '../../../variables' as *;
+
+.#{$prefix}theme-fci {
+	.#{$prefix}descriptions {
+		--#{$prefix}description-label-color: var(--#{$prefix}secondary-action-color);
+
+		--#{$prefix}description-text-color: var(--#{$prefix}primary-color);
+		--#{$prefix}description-text-font-weight: 500;
+	}
+
+	.#{$prefix}descriptions--sm {
+		--#{$prefix}descriptions-gap-y: 0.5rem;
+		--#{$prefix}descriptions-gap-x: 0.5rem;
+
+		--#{$prefix}description-label-font-size: 12px;
+
+		--#{$prefix}description-text-font-size: 12px;
+	}
+
+	.#{$prefix}descriptions--md {
+		--#{$prefix}descriptions-gap-y: 1rem;
+		--#{$prefix}descriptions-gap-x: 1rem;
+
+		--#{$prefix}description-label-font-size: 14px;
+
+		--#{$prefix}description-text-font-size: 14px;
+	}
+
+	.#{$prefix}descriptions--lg {
+		--#{$prefix}descriptions-gap-y: 1.5rem;
+		--#{$prefix}descriptions-gap-x: 1.5rem;
+
+		--#{$prefix}description-label-font-size: 16px;
+
+		--#{$prefix}description-text-font-size: 16px;
+	}
+}

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

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