Rename rem() to to-rem() (#8092)

Author: laske185

packages/components/src/components/@shared/_kol-button-mixin.scss

@@ -9,7 +9,7 @@
 		}
 
 		.#{$block-classname} {
-			font-style: rem(16);
+			font-style: to-rem(16);
 			display: inline-flex;
 			place-items: center;
 			text-align: center;

packages/components/src/components/@shared/_kol-link-mixin.scss

@@ -34,7 +34,7 @@
 
 			&__icon {
 				display: inline-flex;
-				margin-left: rem(8);
+				margin-left: to-rem(8);
 			}
 		}
 	}

packages/components/src/components/@shared/_kol-pagination-mixin.scss

@@ -5,7 +5,7 @@
 		.kol-pagination {
 			align-items: center;
 			display: grid;
-			gap: rem(16);
+			gap: to-rem(16);
 			grid-template-columns: 1fr auto;
 
 			&__navigation-list {

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

@@ -10,17 +10,17 @@
 			z-index: 1;
 
 			&__columns-container {
-				margin-top: rem(16);
-				max-height: rem(200);
+				margin-top: to-rem(16);
+				max-height: to-rem(200);
 				overflow: auto;
 			}
 
 			&__columns {
 				align-items: center;
 				display: grid;
-				gap: rem(8);
+				gap: to-rem(8);
 				grid-auto-rows: min-content;
-				grid-template-columns: min-content 1fr rem(100) auto auto;
+				grid-template-columns: min-content 1fr to-rem(100) auto auto;
 				overflow: hidden;
 			}
 

packages/components/src/components/@shared/_mixins.scss

@@ -1,3 +1,3 @@
-@function rem($size) {
+@function to-rem($size) {
 	@return calc(#{$size}rem / var(--kolibri-root-font-size, 16));
 }

packages/components/src/components/a11y.scss

@@ -8,7 +8,7 @@
 		/*
 		 * Minimum size of interactive elements.
 		 */
-		--a11y-min-size: #{rem(44)};
+		--a11y-min-size: #{to-rem(44)};
 		/*
 		 * No element should be used without a background and font color whose contrast ratio has
 		 * not been checked. By initially setting the background color to white and the font color
@@ -42,7 +42,7 @@
 	}
 
 	/*
-	 * All interactive elements should have a minimum size of rem(44).
+	 * All interactive elements should have a minimum size of to-rem(44).
 	 */
 	/* input:not([type='checkbox'], [type='radio'], [type='range']), */
 	/* option, */

packages/components/src/components/avatar/style.scss

@@ -7,10 +7,10 @@
 		border-radius: 50%;
 		overflow: hidden;
 		/* Visible with forced colors  */
-		outline: transparent solid rem(1);
+		outline: transparent solid to-rem(1);
 		/*theme?*/
-		width: rem(100);
-		height: rem(100);
+		width: to-rem(100);
+		height: to-rem(100);
 
 		&__image {
 			width: 100%;
@@ -25,7 +25,7 @@
 			justify-content: center;
 			/*theme?*/
 			background-color: #d3d3d3;
-			font-size: rem(40);
+			font-size: to-rem(40);
 		}
 	}
 }

packages/components/src/components/badge/style.scss

@@ -7,7 +7,7 @@
 		display: inline-flex;
 		place-items: center;
 		/* Visible with forced colors  */
-		outline: transparent solid rem(1);
+		outline: transparent solid to-rem(1);
 
 		.kol-badge__smart-button {
 			.button {

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

@@ -62,8 +62,8 @@
 		}
 
 		.kol-input {
-			width: rem(22);
-			height: rem(22);
+			width: to-rem(22);
+			height: to-rem(22);
 		}
 
 		&#{$root}--checked,
@@ -90,8 +90,8 @@
 			&::before {
 				background-color: #000;
 				height: 1.2em;
-				left: calc(0.25em - rem(2));
-				top: calc(0.25em - rem(2));
+				left: calc(0.25em - to-rem(2));
+				top: calc(0.25em - to-rem(2));
 				position: absolute;
 				transition: 0.5s;
 				width: 1.2em;
@@ -115,7 +115,7 @@
 			position: absolute;
 			z-index: 1;
 			top: 50%;
-			left: rem(4);
+			left: to-rem(4);
 			transform: translate(0, -50%);
 			transition: 0.5s;
 			color: #000;

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

@@ -17,15 +17,15 @@
 		}
 
 		&--text {
-			width: rem(112);
+			width: to-rem(112);
 		}
 	}
 
 	&__inputs-wrapper {
 		align-items: center;
 		display: flex;
 		flex-direction: row;
-		gap: rem(6) !important;
+		gap: to-rem(6) !important;
 	}
 }