Refactor line-heights to use relative values (#6871)

packages/components/src/components/@shared/_kol-table-stateless-mixin.scss

@@ -121,7 +121,7 @@
 				justify-content: center;
 				background-color: rgb(255, 255, 255);
 				border-width: 2px;
-				line-height: 24px;
+				line-height: 1.5;
 				transition: all 0.5s ease 0s;
 			}
 

packages/components/src/components/input-checkbox/common.scss

@@ -61,7 +61,7 @@
 	input {
 		border-style: solid;
 		border-width: 2px;
-		line-height: 24px;
+		line-height: 1.5;
 	}
 
 	input[type='checkbox'] {

packages/components/src/components/input-range/style.scss

@@ -30,7 +30,7 @@
 		display: inline-block;
 		flex-grow: 1;
 		height: rem(8);
-		line-height: 1.5em;
+		line-height: 1.5;
 		padding: 0;
 		margin: 0;
 		/* Design-Hack - related with flex-grow */

packages/components/src/components/link.scss

@@ -31,7 +31,7 @@
 		overflow: hidden;
 		position: absolute;
 		z-index: 9999999;
-		line-height: 1em;
+		line-height: 1;
 	}
 
 	.skip:focus {

packages/components/src/components/skip-nav/style.scss

@@ -21,7 +21,7 @@
 		overflow: hidden;
 		position: absolute;
 		z-index: 9999999;
-		line-height: 1em;
+		line-height: 1;
 	}
 
 	.kol-link-wc a:focus {

packages/themes/bmf/src/@shared/input-core.scss

@@ -0,0 +1,31 @@
+@import '../mixins/input.scss';
+
+@layer kol-theme-component {
+	@include input;
+
+	input {
+		border: none;
+
+		&::placeholder {
+			color: var(--color-grey);
+		}
+
+		&[disabled],
+		&[disabled]:focus {
+			cursor: not-allowed;
+			opacity: 1;
+		}
+	}
+
+	.input {
+		padding: 0 1em;
+
+		> input:first-child {
+			padding-left: 0.375em;
+		}
+
+		> input:last-child {
+			padding-right: 0.375em;
+		}
+	}
+}

packages/themes/bmf/src/components/abbr.scss

@@ -1,7 +1,7 @@
 @layer kol-theme-component {
 	abbr {
 		border-bottom: dotted var(--color-black) 1px;
-		text-decoration: none !important;
+		text-decoration: none;
 	}
 	abbr:focus {
 		border-radius: 5px;

packages/themes/bmf/src/components/accordion.scss

@@ -1,4 +1,5 @@
 @import '../mixins/rem';
+@import '../mixins/typography.scss';
 
 @layer kol-theme-component {
 	:host {
@@ -18,9 +19,7 @@
 	}
 
 	:host > div > .kol-heading-wc button .kol-span-wc {
-		font-weight: 700;
-		font-size: rem(18);
-		line-height: 24px;
+		@include kol-typography-accordion;
 		gap: rem(8);
 	}
 

packages/themes/bmf/src/components/breadcrumb.scss

@@ -24,7 +24,7 @@
 	}
 
 	ul li > :is(span, .kol-link) {
-		line-height: rem(20);
+		line-height: 1.25;
 	}
 
 	ul li:last-child > span {

packages/themes/bmf/src/components/card.scss

@@ -17,7 +17,7 @@
 	}
 
 	:host .kol-heading-wc {
-		line-height: rem(28);
+		line-height: 1.75;
 	}
 
 	:host div.header {

packages/themes/bmf/src/components/combobox.scss

@@ -46,7 +46,7 @@ $visible-options: 5;
 			place-items: center;
 
 			&:focus {
-				outline: 0 !important;
+				outline: 0;
 			}
 		}
 
@@ -65,15 +65,15 @@ $visible-options: 5;
 		&__item {
 			display: flex;
 			align-items: center;
-			height: $option-height;
+			min-height: $option-height;
 			padding: rem(10) rem(12);
 			border-radius: 0.25em;
 			color: var(--color-black);
 
 			&:focus {
 				background-color: var(--color-ocean);
 				color: white;
-				outline: 0 !important;
+				outline: 0;
 			}
 		}
 	}

packages/themes/bmf/src/components/heading.scss

@@ -1,4 +1,4 @@
-@import '../mixins/rem';
+@import '../mixins/typography.scss';
 
 @layer kol-theme-component {
 	.headline-h1,
@@ -13,24 +13,15 @@
 		padding: 0;
 	}
 
-	.headline-h1,
-	.headline-h2,
-	.headline-h3 {
-		font-weight: 700;
-	}
-
 	.headline-h1 {
-		font-size: rem(24);
-		line-height: rem(28);
+		@include kol-typography-h1;
 	}
 
 	.headline-h2 {
-		font-size: rem(20);
-		line-height: rem(28);
+		@include kol-typography-h2;
 	}
 
 	.headline-h3 {
-		font-size: rem(18);
-		line-height: rem(24);
+		@include kol-typography-h3;
 	}
 }

packages/themes/bmf/src/components/input-checkbox.scss

@@ -7,7 +7,7 @@
 	}
 
 	/* INPUT */
-	:host .kol-input {
+	.kol-input {
 		display: grid;
 		align-items: center;
 		justify-items: left;
@@ -67,18 +67,18 @@
 		}
 
 		&.error input:focus {
-			outline-color: var(--color-red) !important;
+			outline-color: var(--color-red);
 		}
 	}
 
-	:host input {
+	input {
 		order: 1;
 		width: 100%;
 		border-color: var(--color-grey);
 		border-width: 2px;
 		border-style: solid;
 		border-radius: 5px;
-		line-height: 24px;
+		line-height: 1;
 		font-size: rem(16);
 
 		&:focus {
@@ -92,22 +92,22 @@
 		}
 	}
 
-	:host kol-icon:hover ~ input,
-	:host input:hover {
+	kol-icon:hover ~ input,
+	input:hover {
 		border-color: var(--color-midnight);
 	}
 
 	/* CHECKBOX */
-	:host .kol-input:not(.button) label span {
+	.kol-input:not(.button) label span {
 		margin-top: rem(2);
 	}
 
-	:host .required label > span::after {
+	.required label > span::after {
 		content: '*';
 		padding-left: 0.125em;
 	}
 
-	:host .kol-input {
+	.kol-input {
 		input[type='checkbox'] {
 			appearance: none;
 			background-color: white;
@@ -136,6 +136,7 @@
 				}
 			}
 			.icon {
+				display: flex;
 				color: var(--color-white);
 				margin: rem(-2) 0 0 rem(4);
 				/* visually align */

packages/themes/bmf/src/components/input-color.scss

@@ -1,32 +1,12 @@
-@import '../mixins/input.scss';
+@use '../@shared/input-core.scss';
 
 @layer kol-theme-component {
 	input {
-		border: none;
-		min-height: 40px !important;
 		background-color: transparent;
 
-		&::placeholder {
-			color: var(--color-grey);
-		}
-
 		&:not([type='color']):read-only,
 		&:disabled {
 			cursor: not-allowed;
 		}
 	}
-
-	.input {
-		padding: 0 1em;
-
-		> input:first-child {
-			padding-left: 0.375em;
-		}
-
-		> input:last-child {
-			padding-right: 0.375em;
-		}
-	}
-
-	@include input;
 }

packages/themes/bmf/src/components/input-date.scss

@@ -1,33 +1,9 @@
-@import '../mixins/input.scss';
+@use '../@shared/input-core.scss';
 
 @layer kol-theme-component {
 	input {
-		border: none;
-
-		&::placeholder {
-			color: var(--color-grey);
-		}
-
 		&::-webkit-datetime-edit {
 			color: var(--color-grey);
 		}
-
-		&:disabled {
-			cursor: not-allowed;
-		}
 	}
-
-	.input {
-		padding: 0 1em;
-
-		> input:first-child {
-			padding-left: 0.375em;
-		}
-
-		> input:last-child {
-			padding-right: 0.375em;
-		}
-	}
-
-	@include input;
 }

packages/themes/bmf/src/components/input-email.scss

@@ -1,29 +1 @@
-@import '../mixins/input.scss';
-
-@layer kol-theme-component {
-	input {
-		border: none;
-
-		&::placeholder {
-			color: var(--color-grey);
-		}
-
-		&:disabled {
-			cursor: not-allowed;
-		}
-	}
-
-	.input {
-		padding: 0 1em;
-
-		> input:first-child {
-			padding-left: 0.375em;
-		}
-
-		> input:last-child {
-			padding-right: 0.375em;
-		}
-	}
-
-	@include input;
-}
+@use '../@shared/input-core.scss';

packages/themes/bmf/src/components/input-file.scss

@@ -1,31 +1,8 @@
-@import '../mixins/input.scss';
+@use '../@shared/input-core.scss';
 
 @layer kol-theme-component {
 	input {
-		border: none;
 		background-color: transparent;
 		padding-top: calc(0.5em + 2px);
-
-		&::placeholder {
-			color: var(--color-grey);
-		}
-
-		&:disabled {
-			cursor: not-allowed;
-		}
 	}
-
-	.input {
-		padding: 0 1em;
-
-		> input:first-child {
-			padding-left: 0.375em;
-		}
-
-		> input:last-child {
-			padding-right: 0.375em;
-		}
-	}
-
-	@include input;
 }