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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@unifiedsoftware/styles",
-	"version": "2.0.0-beta.2",
+	"version": "2.0.0-beta.21",
 	"license": "MIT",
 	"files": [
 		"index.scss",

package/scss/_utilities.scss

@@ -419,6 +419,51 @@ $rounded-sizes: (
 	);
 }
 
+.#{$prefix}glow {
+	position: absolute;
+	inset: 0px;
+	border-radius: inherit;
+	overflow: hidden;
+	outline-width: var(--#{$prefix}glow-border-width);
+	outline-style: solid;
+	outline-color: var(--#{$prefix}glow-border-color);
+	opacity: var(--#{$prefix}glow-opacity);
+	pointer-events: none;
+	z-index: var(--#{$prefix}glow-z-index);
+}
+
+:not([hidden]):hover > .#{$prefix}glow {
+	outline-width: var(--#{$prefix}glow-hover-border-width, var(--#{$prefix}glow-border-width));
+	outline-color: var(--#{$prefix}glow-hover-border-color, var(--#{$prefix}glow-border-color));
+	opacity: var(--#{$prefix}glow-hover-opacity, var(--#{$prefix}glow-opacity));
+}
+
+:not([hidden]):active > .#{$prefix}glow {
+	outline-width: var(
+		--#{$prefix}glow-active-border-width,
+		var(--#{$prefix}glow-hover-border-width, var(--#{$prefix}glow-border-width))
+	);
+	outline-color: var(
+		--#{$prefix}glow-active-border-color,
+		var(--#{$prefix}glow-hover-border-color, var(--#{$prefix}glow-border-color))
+	);
+	opacity: var(--#{$prefix}glow-active-opacity, var(--#{$prefix}glow-hover-opacity, var(--#{$prefix}glow-opacity)));
+}
+
+[class*='--focus'] > .#{$prefix}glow,
+[class*='--focus']:hover > .#{$prefix}glow,
+:not([hidden]):focus > .#{$prefix}glow {
+	outline-width: var(
+		--#{$prefix}glow-focus-border-width,
+		var(--#{$prefix}glow-hover-border-width, var(--#{$prefix}glow-border-width))
+	);
+	outline-color: var(
+		--#{$prefix}glow-focus-border-color,
+		var(--#{$prefix}glow-hover-border-color, var(--#{$prefix}glow-border-color))
+	);
+	opacity: var(--#{$prefix}glow-focus-opacity, var(--#{$prefix}glow-hover-opacity, var(--#{$prefix}glow-opacity)));
+}
+
 .#{$prefix}surface {
 	position: absolute;
 	inset: 0px;

package/scss/components/_accordion.scss

@@ -58,6 +58,7 @@
 			flex-grow: 1;
 			display: flex;
 			flex-direction: column;
+			overflow: hidden;
 		}
 
 		&--centered &__start-content,
@@ -88,6 +89,8 @@
 			display: -webkit-box;
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: 1;
+			text-overflow: ellipsis;
+			word-break: break-word;
 		}
 
 		&__subtitle {
@@ -100,6 +103,8 @@
 			display: -webkit-box;
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: 1;
+			text-overflow: ellipsis;
+			word-break: break-word;
 		}
 	}
 

package/scss/components/_button.scss

@@ -45,6 +45,8 @@
 	}
 
 	&-group {
+		border-radius: var(--#{$prefix}button-border-radius);
+		position: relative;
 		display: inline-flex;
 		align-items: center;
 	}

package/scss/components/_checkbox.scss

@@ -36,8 +36,8 @@
 		justify-content: center;
 		align-items: center;
 		transition:
-			color 0.1s ease-in-out 0.05s,
-			border-color 0.1s ease-in-out 0.05s;
+			color 0.05s ease-in-out 0.025s,
+			border-color 0.05s ease-in-out 0.025s;
 		overflow: hidden;
 	}
 
@@ -69,8 +69,8 @@
 		background-color: var(--#{$prefix}checkbox-tap-background);
 		transform: scale(0);
 		transition:
-			opacity 0.1s ease-in-out 0.05s,
-			transform 0.1s ease-in-out 0.05s;
+			opacity 0.05s ease-in-out 0.025s,
+			transform 0.05s ease-in-out 0.025s;
 	}
 
 	&--checked &__tap {
@@ -82,8 +82,8 @@
 		opacity: 1;
 		transform: scale(0);
 		transition:
-			opacity 0.1s ease-in-out 0.05s,
-			transform 0.1s ease-in-out 0.05s;
+			opacity 0.05s ease-in-out 0.025s,
+			transform 0.05s ease-in-out 0.025s;
 	}
 
 	&--checked .#{$prefix}icon {

package/scss/components/_descriptions.scss

@@ -59,6 +59,7 @@
 		font-weight: var(--#{$prefix}description-text-font-weight);
 		color: var(--#{$prefix}description-text-color);
 		opacity: var(--#{$prefix}description-text-opacity);
+		word-break: break-word;
 	}
 
 	&-empty {

package/scss/components/_icon.scss

@@ -9,3 +9,31 @@
 	justify-content: center;
 	align-items: center;
 }
+
+.#{$prefix}opacity-0 {
+	opacity: 0;
+}
+
+.#{$prefix}opacity-60 {
+	opacity: 0.6;
+}
+
+.#{$prefix}opacity-100 {
+	opacity: 1;
+}
+
+.#{$prefix}pointer {
+	cursor: pointer;
+}
+
+.#{$prefix}hover-opacity-60 {
+	&:hover {
+		opacity: 0.6;
+	}
+}
+
+.#{$prefix}hover-opacity-100 {
+	&:hover {
+		opacity: 1;
+	}
+}

package/scss/components/_input.scss

@@ -13,12 +13,13 @@
 	background-color: var(--#{$prefix}input-background);
 	z-index: 0;
 	transition: all 0.2s ease-in-out;
+	cursor: text;
 
 	&:focus-visible {
 		outline: none;
 	}
 
-	&:not(&--filterable) {
+	&--selectable {
 		cursor: pointer;
 	}
 
@@ -91,6 +92,7 @@
 		display: flex;
 		align-items: center;
 		z-index: 1;
+		overflow: hidden;
 
 		&--chips {
 			padding-block: var(--#{$prefix}input-padding-y);
@@ -154,7 +156,7 @@
 	}
 
 	&__placeholder {
-		opacity: 0.6;
+		color: var(--#{$prefix}input-placeholder-color);
 	}
 
 	&__start-content,
@@ -174,14 +176,25 @@
 	}
 
 	&__start-content {
-		margin-right: calc(-1 * var(--#{$prefix}input-icon-size));
-		// padding-block: var(--#{$prefix}input-padding-y);
-		padding-inline: calc(0.75 * var(--#{$prefix}input-padding-x));
+		// margin-right: calc(-1 * var(--#{$prefix}input-icon-size));
+		padding-left: calc(0.75 * var(--#{$prefix}input-padding-x));
+		padding-right: calc(0.375 * var(--#{$prefix}input-padding-x));
 	}
 
 	&__end-content {
-		margin-left: calc(-1 * var(--#{$prefix}input-icon-size));
-		// padding-block: var(--#{$prefix}input-padding-y);
+		// margin-left: calc(-1 * var(--#{$prefix}input-icon-size));
 		padding-inline: calc(0.75 * var(--#{$prefix}input-padding-x));
 	}
+
+	&--start-content &__content &__field,
+	&--start-content &__content &__search,
+	&--start-content &__content &__placeholder {
+		padding-left: 0;
+	}
+
+	&--end-content &__content &__field,
+	&--end-content &__content &__search,
+	&--end-content &__content &__placeholder {
+		padding-right: 0;
+	}
 }

package/scss/components/_list.scss

@@ -46,7 +46,7 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			gap: calc(var(--#{$prefix}list-item-gap) * 0.5);
+			gap: var(--#{$prefix}list-item-gap);
 		}
 
 		&__content {

package/scss/components/_nav-rail.scss

@@ -127,7 +127,8 @@
 			font-size: var(--#{$prefix}nav-rail-item-label-font-size);
 			font-weight: var(--#{$prefix}nav-rail-item-label-font-weight);
 			line-height: var(--#{$prefix}nav-rail-item-label-line-height);
-			text-wrap: nowrap;
+			width: 100%;
+			text-align: center;
 			overflow: hidden;
 			display: -webkit-box;
 			-webkit-box-orient: vertical;

package/scss/components/_radio.scss

@@ -29,8 +29,8 @@
 		justify-content: center;
 		align-items: center;
 		transition:
-			color 0.1s ease-in-out 0.05s,
-			border-color 0.1s ease-in-out 0.05s;
+			color 0.05s ease-in-out 0.025s,
+			border-color 0.05s ease-in-out 0.025s;
 		overflow: hidden;
 	}
 
@@ -59,8 +59,8 @@
 		background-color: var(--#{$prefix}radio-tap-background);
 		transform: scale(0);
 		transition:
-			opacity 0.1s ease-in-out 0.05s,
-			transform 0.1s ease-in-out 0.05s;
+			opacity 0.05s ease-in-out 0.025s,
+			transform 0.05s ease-in-out 0.025s;
 	}
 
 	&--checked &__tap {
@@ -72,8 +72,8 @@
 		opacity: 1;
 		transform: scale(0);
 		transition:
-			opacity 0.1s ease-in-out 0.05s,
-			transform 0.1s ease-in-out 0.05s;
+			opacity 0.05s ease-in-out 0.025s,
+			transform 0.05s ease-in-out 0.025s;
 	}
 
 	&--checked .#{$prefix}icon {

package/scss/components/_steps.scss

@@ -3,8 +3,40 @@
 .#{$prefix}steps {
 	flex-shrink: 0;
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 	overflow: hidden;
+
+	&--horizontal {
+		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+	}
+
+	&--vertical {
+		grid-template-columns: 1;
+		gap: 2rem;
+	}
+
+	&--vertical .#{$prefix}step {
+		flex-direction: row;
+		gap: 1.5rem;
+	}
+
+	&--vertical .#{$prefix}step__content {
+		padding: 4px 0px;
+	}
+
+	&--vertical .#{$prefix}step__title,
+	&--vertical .#{$prefix}step__subtitle {
+		margin: 0;
+		text-align: start;
+	}
+
+	&--vertical &__indicator {
+		width: 1px;
+		height: 100%;
+		top: -50%;
+		bottom: 50%;
+		left: auto;
+		right: auto;
+	}
 }
 
 .#{$prefix}step {
@@ -60,6 +92,12 @@
 		border-color: var(--#{$prefix}_current-step-border-color);
 	}
 
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
 	&__title {
 		flex-shrink: 0;
 		max-width: 150px;
@@ -97,7 +135,8 @@
 		right: 50%;
 		top: 50%;
 		left: -50%;
-		border-bottom: 1px solid var(--#{$prefix}step-divider-color);
+		width: 100%;
+		height: 1px;
 		background-color: var(--#{$prefix}step-divider-color);
 		z-index: -1;
 

package/scss/components/_switch.scss

@@ -35,7 +35,7 @@
 		background-color: var(--#{$prefix}switch-control-color);
 		display: inline-flex;
 		align-items: center;
-		transition: all 0.15s ease-in-out;
+		transition: all 0.05s ease-in-out;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -62,7 +62,7 @@
 		transform: translateX(var(--#{$prefix}switch-control-padding));
 		border-radius: var(--#{$prefix}switch-thumb-border-radius);
 		background-color: var(--#{$prefix}switch-thumb-color);
-		transition: all 0.15s ease-in-out;
+		transition: all 0.05s ease-in-out;
 	}
 
 	&--checked &__thumb {

package/scss/components/_tabs.scss

@@ -66,7 +66,7 @@
 
 	&__content {
 		position: relative;
-		height: 40px;
+		height: var(--#{$prefix}tab-height);
 		display: inline-flex;
 		flex-direction: row;
 		justify-content: center;

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

@@ -46,7 +46,6 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-header-padding-y: 0.685rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
 		--#{$prefix}accordion-header-padding-level: 1.25rem;
-		--#{$prefix}accordion-header-font-size: 12px;
 		--#{$prefix}accordion-header-gap: 1rem;
 
 		--#{$prefix}accordion-header-title-font-size: 12px;
@@ -61,6 +60,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-body-line-height: 18px;
 	}
 
+	.#{$prefix}accordion--xs .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 16px;
+	}
+
 	.#{$prefix}accordion--sm {
 		--#{$prefix}accordion-splitted-gap: 0.5rem;
 
@@ -70,7 +73,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-header-padding-level: 1.25rem;
 		--#{$prefix}accordion-header-gap: 1rem;
 
-		--#{$prefix}accordion-header-title-font-size: 0.875rem;
+		--#{$prefix}accordion-header-title-font-size: 13px;
 		--#{$prefix}accordion-header-title-line-height: 20px;
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.75rem;
@@ -82,6 +85,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-body-line-height: 20px;
 	}
 
+	.#{$prefix}accordion--sm .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 20px;
+	}
+
 	.#{$prefix}accordion--md {
 		--#{$prefix}accordion-splitted-gap: 0.75rem;
 
@@ -89,11 +96,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
 		--#{$prefix}accordion-header-padding-level: 1.25rem;
-		--#{$prefix}accordion-header-font-size: 0.75rem;
 		--#{$prefix}accordion-header-gap: 1rem;
 		--#{$prefix}accordion-header-content-gap: 0.5rem;
 
-		--#{$prefix}accordion-header-title-font-size: 0.875rem;
+		--#{$prefix}accordion-header-title-font-size: 15px;
 		--#{$prefix}accordion-header-title-line-height: 24px;
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
@@ -119,7 +125,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-header-font-size: 0.75rem;
 		--#{$prefix}accordion-header-gap: 1rem;
 
-		--#{$prefix}accordion-header-title-font-size: 1rem;
+		--#{$prefix}accordion-header-title-font-size: 16px;
 		--#{$prefix}accordion-header-title-line-height: 24px;
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
@@ -131,6 +137,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-body-line-height: 24px;
 	}
 
+	.#{$prefix}accordion--lg .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 28px;
+	}
+
 	.#{$prefix}accordion--xl {
 		--#{$prefix}accordion-splitted-gap: 1.25rem;
 
@@ -138,10 +148,9 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-header-padding-y: 0.625rem;
 		--#{$prefix}accordion-header-padding-x: 1rem;
 		--#{$prefix}accordion-header-padding-level: 1.25rem;
-		--#{$prefix}accordion-header-font-size: 0.75rem;
 		--#{$prefix}accordion-header-gap: 1rem;
 
-		--#{$prefix}accordion-header-title-font-size: 1rem;
+		--#{$prefix}accordion-header-title-font-size: 18px;
 		--#{$prefix}accordion-header-title-line-height: 24px;
 
 		--#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
@@ -153,6 +162,10 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 		--#{$prefix}accordion-body-line-height: 24px;
 	}
 
+	.#{$prefix}accordion--xl .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
+		--#{$prefix}icon-font-size-default: 36px;
+	}
+
 	.#{$prefix}accordion-item {
 		& > .#{$prefix}outline {
 			--#{$prefix}outline-border-width: 0px;
@@ -162,7 +175,7 @@ $colors-map: (primary, secondary, success, info, warning, danger);
 	}
 
 	.#{$prefix}accordion-item--selected {
-		--#{$prefix}accordion-header-title-font-weight: 700;
+		--#{$prefix}accordion-header-title-font-weight: 600;
 	}
 
 	.#{$prefix}accordion-body {

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/_checkbox.scss

@@ -34,6 +34,10 @@
 
 		--#{$prefix}checkbox-tap-background: var(--#{$prefix}primary-color);
 
+		& .#{$prefix}icon {
+			--#{$prefix}icon-color: inherit !important;
+		}
+
 		&--xs {
 			--#{$prefix}checkbox-gap: 0.375rem;
 

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),