[Rem converter]: Support for different base font-sizes

ngx-fudis/.storybook/main.js

@@ -39,7 +39,7 @@ module.exports = {
                 display: flex;
                 align-items: center;
             }
-            .storybook-flex-column{
+            .storybook-flex-column {
                 display: flex;
                 align-items: center;
                 flex-direction: column;

ngx-fudis/.stylelintrc.json

@@ -6,7 +6,7 @@
 		"stylelint-config-prettier-scss",
 		"stylelint-config-concentric-order"
 	],
-	"ignoreFiles": ["dist/**/*.scss", "static/**/*"],
+	"ignoreFiles": ["dist/**/*.scss", "static/**/*", "projects/ngx-fudis/karma.style.css", "projects/ngx-fudis/style.scss"],
 	"rules": {
 		"order/properties-alphabetical-order": null,
 		"color-no-hex": true,

ngx-fudis/projects/dev/src/app/app.component.html

@@ -2,6 +2,15 @@
 	<div class="root-style">
 		<fudis-alert-group />
 
+		<fudis-grid [columns]="4">
+			<fudis-grid-item [columns]="'3 / 4'" [alignX]="'end'" [alignY]="'end'">
+				<fudis-body-text>1 rem = {{ visibleRemValue }}px</fudis-body-text>
+				<fudis-body-text>Font size is {{ fontSize }}</fudis-body-text>
+			</fudis-grid-item>
+			<fudis-grid-item [columns]="'4 / -1'" [alignX]="'end'">
+				<fudis-button [label]="'Change REM base'" (handleClick)="changeRemBase()"></fudis-button>
+			</fudis-grid-item>
+		</fudis-grid>
 		<fudis-grid [columns]="1" [marginTop]="'xl'">
 			<fudis-heading [level]="1" [size]="'xl'">Welcome to Fudis sandbox </fudis-heading>
 

ngx-fudis/projects/dev/src/app/app.component.ts

@@ -44,6 +44,14 @@ export class AppComponent implements OnInit {
 
 	title = 'dev';
 
+	visibleRemValue: number;
+
+	fontSize: string = '100%';
+
+	multiplier: number;
+
+	newRemBase: string;
+
 	dropdownOptions: FudisDropdownOption[] = [
 		{ value: 'value-1-dog', viewValue: 'Dog' },
 		{ value: 'value-2-capybara', viewValue: 'Capybara' },
@@ -78,6 +86,7 @@ export class AppComponent implements OnInit {
 
 		this._document.documentElement.lang = 'en';
 		this._fudisLanguage.setLanguage('en');
+		this.getMultiplier();
 	}
 
 	triggerAlert(): void {
@@ -91,6 +100,31 @@ export class AppComponent implements OnInit {
 		this._alertService.addAlert(newAlert);
 	}
 
+	getMultiplier(): void {
+		const currentRemBase: string = getComputedStyle(document.querySelector(':root') as HTMLElement).getPropertyValue(
+			'--fudis-rem-multiplier'
+		);
+		this.multiplier = Number(currentRemBase);
+		this.visibleRemValue = this.multiplier * 16;
+	}
+
+	/* Following function is for testing changing Application pixel base between 16 and 10 pixel base values */
+	changeRemBase(): void {
+		if (this.multiplier === 1) {
+			this.newRemBase = '0.625';
+			this.fontSize = '62.5%';
+		} else {
+			this.newRemBase = '1';
+			this.fontSize = '100%';
+		}
+		const documentRoot = document.querySelector(':root') as HTMLElement;
+		const documentHtml = document.querySelector('html') as HTMLElement;
+
+		documentRoot.style.setProperty('--fudis-rem-multiplier', this.newRemBase);
+		documentHtml.style.setProperty('font-size', this.fontSize);
+		this.getMultiplier();
+	}
+
 	changeLanguage(): void {
 		if (this._translocoService.getActiveLang() === 'en') {
 			this._document.documentElement.lang = 'fi';

ngx-fudis/projects/dev/src/app/app.scss

@@ -2,18 +2,19 @@
 /* stylelint-disable property-disallowed-list */
 /* stylelint-disable selector-class-pattern */
 /* stylelint-disable unit-disallowed-list */
+@use '../../../ngx-fudis/src/lib/foundations/spacing/tokens.scss' as spacing;
 
 .basic-flex-box {
 	display: flex;
 	flex-direction: column;
-	margin-bottom: 1rem;
-	border: 2px solid lightblue;
+	margin-bottom: spacing.$spacing-sm;
+	border: spacing.$pixel-2 solid lightblue;
 }
 
 .basic-flex-box2 {
 	display: flex;
 	flex-direction: row;
-	margin-bottom: 1rem;
-	border: 2px solid lightblue;
-	max-width: 40rem;
+	margin-bottom: spacing.$spacing-sm;
+	border: spacing.$pixel-2 solid lightblue;
+	max-width: calc(40rem / var(--fudis-rem-multiplier));
 }

ngx-fudis/projects/dev/src/styles.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable selector-class-pattern */
 /* stylelint-disable color-no-hex */
+/* stylelint-disable property-disallowed-list */
 @use '@angular/material' as mat;
 @use '../../../dist/ngx-fudis/index' as fudis;
 @include mat.core;
@@ -10,11 +11,16 @@
 	padding: 0;
 }
 
+html {
+	font-size: 100%;
+}
+
 :root {
 	--fudis-color-primary-light: #e0f4fd;
 	--fudis-color-primary: #0a729e;
 	--fudis-color-primary-dark: #0e5d81;
 	--fudis-color-primary-extra-dark: #1b2e36;
+	--fudis-rem-multiplier: 1;
 }
 
 .root-style {

ngx-fudis/projects/documentation/introduction/GettingStarted.stories.mdx

@@ -62,8 +62,9 @@ import { NgxFudisModule } from 'ngx-fudis';
 })
 ```
 
-#### 5. Define Application's Primary Colors as CSS Variables in Project Root Style
+#### 5. Define Application's Root Styles
 
+##### Define Primary Colors as CSS Variables in Project Root Style
 ```
 :root {
 	--fudis-color-primary-light: #hex;
@@ -72,6 +73,27 @@ import { NgxFudisModule } from 'ngx-fudis';
 	--fudis-color-primary-extra-dark: #hex;
 }
 ```
+##### Define Application's REM base CSS Variables in Project Root Style
+
+By default Fudis rem values follow 8 pixel base values, when having default browser CSS font-size of 100%, 1 rem equals 2 * 8px = 16px.
+To apply this to your application, add to the root CSS style file:
+
+```
+:root {
+	--fudis-rem-multiplier: 1;
+}
+```
+If application uses other rem base value by setting font-size to e. g. 62.5% . Adjust -fudis-rem-multiplier accordingly.
+
+```
+html {
+ 	font-size: 62.5%; // this sets 1rem to equal 10px
+}
+
+:root {
+ 	--fudis-rem-multiplier: 0.625;
+}
+```
 
 #### 6. Include Fudis Foundation SCSS-field
 

ngx-fudis/projects/ngx-fudis/karma.conf.js

@@ -1,12 +1,14 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
+// karma.style.css includes styles that are essential for executing tests in suited application environment
 
 module.exports = function (config) {
   config.set({
     basePath: '',
     files: [
       { pattern: 'src/lib/assets/images/fd-logo.svg', watched: false, included: false, served: true, nocache: false },
-      { pattern: 'src/lib/assets/icons/*.*', watched: false, included: false, served: true, nocache: false }
+      { pattern: 'src/lib/assets/icons/*.*', watched: false, included: false, served: true, nocache: false },
+			'karma.style.css'
     ],
     proxies: {
       "/fd-logo.svg": "/base/src/lib/assets/images/fd-logo.svg",

ngx-fudis/projects/ngx-fudis/karma.style.css

@@ -0,0 +1,9 @@
+/* These rem multiplier styles are essential for executing karma tests */
+
+html {
+	font-size: 62.5%;
+}
+
+:root {
+	--fudis-rem-multiplier: 0.625;
+}

ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-summary/error-summary.component.scss

@@ -40,7 +40,7 @@
 				position: absolute;
 				top: 50%;
 				left: 0;
-				transform: translate(-1 * spacing.$spacing-xs, -50%);
+				transform: translate(calc(-1 * spacing.$spacing-xs), -50%);
 				border-radius: spacing.$spacing-xxl;
 				width: spacing.$pixel-3;
 				height: spacing.$pixel-3;

ngx-fudis/projects/ngx-fudis/src/lib/components/form/guidance/guidance.component.scss

@@ -17,7 +17,7 @@
 
 	&__errors {
 		display: flex;
-		transform: translateX(-(spacing.$spacing-xs));
+		transform: translateX(calc(-1 * spacing.$spacing-xs));
 		opacity: 0;
 		height: spacing.$spacing-xs;
 		animation-name: delay-appearance;

ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/gridUtils.ts

@@ -1,5 +1,6 @@
 import { FudisBreakpointStyleResponsive } from '../../types/breakpoints';
 import { FudisGridAttributes, FudisGridFormInputWidth } from '../../types/grid';
+import { convertToRemValue } from '../../utilities/rem-converter';
 
 /**
  * Utility function used with GridDirective.
@@ -77,10 +78,10 @@ export const replaceFormInputWidthsToRem = (value: string): string => {
 	const inputLg: FudisGridFormInputWidth = 'inputLg';
 
 	return value
-		.replaceAll(inputXs, '4rem')
-		.replaceAll(inputSm, '10rem')
-		.replaceAll(inputMd, '14rem')
-		.replaceAll(inputLg, '23rem');
+		.replaceAll(inputXs, convertToRemValue(4))
+		.replaceAll(inputSm, convertToRemValue(10))
+		.replaceAll(inputMd, convertToRemValue(14))
+		.replaceAll(inputLg, convertToRemValue(23));
 };
 
 /**

ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing.directive.spec.ts

@@ -52,8 +52,8 @@ describe('SpacingDirective', () => {
 		const second = elems[1].nativeElement.style.margin;
 		const third = elems[2].nativeElement.style.margin;
 
-		expect(first).toBe('4rem 0px 0px');
-		expect(second).toBe('0px 0px 0.25rem');
-		expect(third).toBe('0px 2rem 0px 0.5rem');
+		expect(first).toBe('6.4rem 0px 0px');
+		expect(second).toBe('0px 0px 0.4rem');
+		expect(third).toBe('0px 3.2rem 0px 0.8rem');
 	});
 });

ngx-fudis/projects/ngx-fudis/src/lib/foundations/grid/tokens.scss

@@ -1,10 +1,10 @@
 /* stylelint-disable unit-disallowed-list */
-$grid-width-xs: 34rem; // 320px-544px. For viewport smaller than 576px.
-$grid-width-sm: 34rem; // 544px
-$grid-width-md: 45rem; // 720px
-$grid-width-lg: 60rem; // 960px
-$grid-width-xl: 65rem; // 1040px
-$grid-width-xxl: 96.25rem; // 1540px
+$grid-width-xs: calc(34rem / var(--fudis-rem-multiplier)); // 320px-544px. For viewport smaller than 576px.
+$grid-width-sm: calc(34rem / var(--fudis-rem-multiplier)); // 544px
+$grid-width-md: calc(45rem / var(--fudis-rem-multiplier)); // 720px
+$grid-width-lg: calc(60rem / var(--fudis-rem-multiplier)); // 960px
+$grid-width-xl: calc(65rem / var(--fudis-rem-multiplier)); // 1040px
+$grid-width-xxl: calc(96.25rem / var(--fudis-rem-multiplier)); // 1540px
 
 $grid-widths: (
 	'xxl': $grid-width-xxl,

ngx-fudis/projects/ngx-fudis/src/lib/foundations/spacing/readme.stories.mdx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/blocks';
 
 # Spacing tokens
 
-Following REM values are based on browser's 16px default values.
+Following REM values are based on browser's 16px default values. If application uses other than 8px base REM values, look for how to setup `fudis-rem-multiplier` in [Application Root Styles](/docs/documentation-introduction-how-to-start-using-fudis--documentation&args=#5-define-applications-root-styles)
 
 Figma file for spacing tokens: [Figma file](https://www.figma.com/file/a6G6ZD6W3tlq0qmUkdvdp1/Fudis-DS-Foundations).
 

ngx-fudis/projects/ngx-fudis/src/lib/foundations/spacing/tokens.scss

@@ -4,13 +4,13 @@
 // Based on default 16px base value
 
 $spacing-none: 0; // 0px
-$spacing-xxs: 0.25rem; // 4px
-$spacing-xs: 0.5rem; // 8px
-$spacing-sm: 1rem; // 16px
-$spacing-md: 1.5rem; // 24px
-$spacing-lg: 2rem; // 32px
-$spacing-xl: 2.5rem; // 40px
-$spacing-xxl: 4rem; // 64px
+$spacing-xxs: calc(0.25rem / var(--fudis-rem-multiplier)); // 4px
+$spacing-xs: calc(0.5rem / var(--fudis-rem-multiplier)); // 8px
+$spacing-sm: calc(1rem / var(--fudis-rem-multiplier)); // 16px
+$spacing-md: calc(1.5rem / var(--fudis-rem-multiplier)); // 24px
+$spacing-lg: calc(2rem / var(--fudis-rem-multiplier)); // 32px
+$spacing-xl: calc(2.5rem / var(--fudis-rem-multiplier)); // 40px
+$spacing-xxl: calc(4rem / var(--fudis-rem-multiplier)); // 64px
 
 $pixel-1: 1px;
 $pixel-2: 2px;
@@ -22,10 +22,11 @@ $pixel-tokens: (
 	'2px': $pixel-2,
 	'3px': $pixel-3,
 );
-$spacing-input-xs: 4rem;
-$spacing-input-sm: 10rem;
-$spacing-input-md: 14rem;
-$spacing-input-lg: 23rem;
+
+$spacing-input-xs: calc(4rem / var(--fudis-rem-multiplier));
+$spacing-input-sm: calc(10rem / var(--fudis-rem-multiplier));
+$spacing-input-md: calc(14rem / var(--fudis-rem-multiplier));
+$spacing-input-lg: calc(23rem / var(--fudis-rem-multiplier));
 
 // Fixed size for checkboxes' visual input box. Clickable input area should be 2rem high.
-$spacing-input-checkbox: 1.25rem;
+$spacing-input-checkbox: calc(1.25rem / var(--fudis-rem-multiplier));

ngx-fudis/projects/ngx-fudis/src/lib/foundations/typography/tokens.scss

@@ -3,32 +3,32 @@
 $font-family: 'Fira Sans', sans-serif;
 
 // Body text font size
-$body-text-l-font-size: 1rem;
-$body-text-m-font-size: 0.875rem;
-$body-text-s-font-size: 0.75rem;
+$body-text-l-font-size: calc(1rem / var(--fudis-rem-multiplier));
+$body-text-m-font-size: calc(0.875rem / var(--fudis-rem-multiplier));
+$body-text-s-font-size: calc(0.75rem / var(--fudis-rem-multiplier));
 
 // Heading font size
-$heading-xxl-font-size: 2.25rem;
-$heading-xl-font-size: 1.75rem;
-$heading-l-font-size: 1.5rem;
-$heading-m-font-size: 1.25rem;
-$heading-s-font-size: 1.125rem;
-$heading-xs-font-size: 1rem;
-$heading-xxs-font-size: 0.875rem;
+$heading-xxl-font-size: calc(2.25rem / var(--fudis-rem-multiplier));
+$heading-xl-font-size: calc(1.75rem / var(--fudis-rem-multiplier));
+$heading-l-font-size: calc(1.5rem / var(--fudis-rem-multiplier));
+$heading-m-font-size: calc(1.25rem / var(--fudis-rem-multiplier));
+$heading-s-font-size: calc(1.125rem / var(--fudis-rem-multiplier));
+$heading-xs-font-size: calc(1rem / var(--fudis-rem-multiplier));
+$heading-xxs-font-size: calc(0.875rem / var(--fudis-rem-multiplier));
 
 // Body text line height
-$body-text-l-line-height: 1.25rem;
-$body-text-m-line-height: 1.125rem;
-$body-text-s-line-height: 1rem;
+$body-text-l-line-height: calc(1.25rem / var(--fudis-rem-multiplier));
+$body-text-m-line-height: calc(1.125rem / var(--fudis-rem-multiplier));
+$body-text-s-line-height: calc(1rem / var(--fudis-rem-multiplier));
 
 // Heading line heights
-$heading-l-line-height: 2.5rem;
-$heading-m-line-height: 1.75rem;
-$heading-s-line-height: 1.125rem;
+$heading-l-line-height: calc(2.5rem / var(--fudis-rem-multiplier));
+$heading-m-line-height: calc(1.75rem / var(--fudis-rem-multiplier));
+$heading-s-line-height: calc(1.125rem / var(--fudis-rem-multiplier));
 
 // Other UI line heights
-$text-input-line-height: 1.5rem;
-$badge-line-height: 0.875rem;
+$text-input-line-height: calc(1.5rem / var(--fudis-rem-multiplier));
+$badge-line-height: calc(0.875rem / var(--fudis-rem-multiplier));
 
 // Font weight
 $font-weight-light: 300;

ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts

@@ -1,5 +1,6 @@
 import { FudisBreakpointKey, FudisBreakpointValueResponsive } from './breakpoints';
 import { FudisSpacing } from './miscellaneous';
+import { convertToRemValue } from '../utilities/rem-converter';
 
 /**
  * Responsive settings for different breakpoints for spacing
@@ -26,13 +27,13 @@ type FudisSpacingValues = {
  * Fudis spacing tokens converted to rem values
  */
 export const fudisSpacingValues: FudisSpacingValues = {
-	xxs: '0.25rem',
-	xs: '0.5rem',
-	sm: '1rem',
-	md: '1.5rem',
-	lg: '2rem',
-	xl: '2.5rem',
-	xxl: '4rem',
+	xxs: convertToRemValue(0.25),
+	xs: convertToRemValue(0.5),
+	sm: convertToRemValue(1),
+	md: convertToRemValue(1.5),
+	lg: convertToRemValue(2),
+	xl: convertToRemValue(2.5),
+	xxl: convertToRemValue(4),
 	none: '0',
 	default: defaultSpacingValue,
 };