Merge pull request #13587 from IgniteUI/simeonoff/configurable-font-size

refactor(theming): add option to configure base font-size

Author: kdinev

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 16.1.4
+### New Features
+- `Themes`:
+    - **Experimental** - Added the ability to configure the base font-size used to calculate the rem values in all component themes. This allows for proper scaling of components when a different document font-size is used.
+
+    - Code example:
+
+    ```scss
+    // Configure the base font-size
+    @use 'igniteui-theming/sass/config' as * with (
+        $base-font-size: 10px // <-- 10px == 1rem
+    );
+
+    // Standard imports and theme declarations
+    @use 'igniteui-angular/src/lib/core/styles/themes' as *;
+
+    // This change also adds a new CSS variable `--ig-base-font-size`
+    // that you can use to configure your own stylesheets:
+    html {
+        font-size: var(--ig-base-font-size); // 10px
+    }
+
+    @include core();
+    @include typography();
+    @include theme();
+    ``` 
+
 ## 16.1.0
 ### New Features
 - `IgxSelect`:

package-lock.json

@@ -67,7 +67,7 @@
     "@types/source-map": "0.5.2",
     "fflate": "^0.7.3",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^3.2.2",
+    "igniteui-theming": "^3.3.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",

package.json

@@ -76,7 +76,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^3.2.2",
+        "igniteui-theming": "^3.3.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -831,7 +831,7 @@ export const formatCurrency = new CurrencyPipe(undefined).transform;
 
 /** Converts pixel values to their rem counterparts for a base value */
 export const rem = (value: number | string) => {
-    const base = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'))
+    const base = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--ig-base-font-size'))
     return Number(value) / base;
 }
 

projects/igniteui-angular/src/lib/core/utils.ts

@@ -1,3 +0,0 @@
-@import '../../../../projects/igniteui-angular/src/lib/core/styles/themes/index';
-@import '../../../styles/demo-theme';
-

src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.scss

@@ -1,3 +1,6 @@
+// Configure the base font-size #optional
+@use 'igniteui-theming/sass/config' as * with ($base-font-size: 16px);
+// Standard imports
 @use '../../projects/igniteui-angular/src/lib/core/styles/themes' as *;
 @use 'variables' as *;
 @use 'mixins' as *;

src/styles/_demo-theme.scss

@@ -1,6 +1,6 @@
+@use 'demo-theme' as *;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700');
-@import 'demo-theme';
 
 // Tests should always be imported last
 // @import '../../projects/igniteui-angular/src/lib/core/styles/spec/index';