From 5fa60fb1a6d68d38cb11d3f679bc077fa8f5e315 Mon Sep 17 00:00:00 2001
From: Sergey Podgaysky <sergey.podgaysky@bimeister.com>
Date: Mon, 15 Apr 2024 14:55:51 +0300
Subject: [PATCH] feature/BIM-47125 replace px with rem

---
 .../src/assets/configs/adaptive-config.json   | 28 +++++++++----------
 .../constants/scrollbar-width-px.const.ts     |  1 -
 .../src/declarations/types/size-rem.type.ts   |  1 +
 .../adaptive/grid-column-offset.function.scss |  2 +-
 .../adaptive/grid-column.function.scss        |  2 +-
 .../common/src/styles/maps/variables.map.scss |  2 +-
 .../adaptive/grid-container-offset.mixin.scss | 14 +++++-----
 .../menu-toggle/menu-toggle.component.scss    |  8 +++---
 .../components/navbar/navbar.component.scss   | 16 +++++------
 .../kit-layout/kit-layout.component.scss      |  2 +-
 .../example-5/example-5.component.html        |  2 +-
 .../actions-demo/actions-demo.component.scss  |  2 +-
 .../example-1/example-1.component.scss        |  2 +-
 .../example-6/example-6.component.scss        |  2 +-
 .../example-1/example-1.component.scss        |  4 +--
 .../example-2/example-2.component.scss        |  8 +++---
 .../example-3/example-3.component.scss        |  4 +--
 .../example-4/example-4.component.scss        |  4 +--
 .../example-5/example-5.component.scss        |  4 +--
 .../example-6/example-6.component.scss        |  4 +--
 .../example-9/example-9.component.scss        |  4 +--
 .../breadcrumbs-demo.component.scss           |  2 +-
 .../example-2/example-2.component.html        |  2 +-
 .../example-1/example-1.component.scss        |  2 +-
 .../example-1/example-1.component.scss        |  4 +--
 .../example-1/example-1.component.scss        |  6 ++--
 .../example-2/example-2.component.css         |  2 +-
 .../test-drawer/test-drawer.component.scss    |  4 +--
 .../drawer-layout-example-1.component.scss    |  2 +-
 .../example-1/example-1.component.scss        |  2 +-
 .../demo-loader/demo-loader.component.html    |  6 ++--
 .../loader-demo/loader-demo.component.html    |  6 ++--
 .../loader-demo/loader-demo.component.ts      |  2 +-
 .../main-page/main-page.component.scss        |  2 +-
 .../modal-demo-content.component.scss         |  6 ++--
 .../not-found-page.component.scss             |  2 +-
 .../paged-virtual-scroll-demo.component.scss  |  2 +-
 .../drawer-layout-other.component.scss        |  4 +--
 .../example-1/example-1.component.scss        |  2 +-
 .../example-2/example-2.component.scss        |  6 ++--
 .../scrollable-demo.component.scss            |  4 +--
 .../example-16/example-16.component.html      |  6 ++--
 .../example-17/example-17.component.html      |  2 +-
 .../example-1/example-1.component.scss        |  2 +-
 .../example-10/example-10.component.scss      |  2 +-
 .../example-2/example-2.component.scss        |  2 +-
 .../example-3/example-3.component.scss        |  2 +-
 .../example-4/example-4.component.scss        |  4 +--
 .../example-5/example-5.component.scss        |  2 +-
 .../example-6/example-6.component.scss        |  8 +++---
 .../example-7/example-7.component.scss        |  2 +-
 .../example-8/example-8.component.scss        |  2 +-
 .../example-9/example-9.component.scss        |  2 +-
 .../example-1/example-1.component.scss        |  4 +--
 .../example-2/example-2.component.scss        |  4 +--
 .../example-3/example-3.component.scss        |  4 +--
 .../example-4/example-4.component.scss        |  4 +--
 .../example-5/example-5.component.scss        |  4 +--
 .../example-6/example-6.component.scss        |  4 +--
 .../example-7/example-7.component.scss        |  4 +--
 .../example-2/example-2.component.html        |  2 +-
 .../tooltip-demo/tooltip-demo.component.scss  |  2 +-
 .../example-2/example-2.component.scss        |  4 +--
 .../example-presets.component.scss            |  2 +-
 .../demo/src/styles/highlightjs.styles.scss   |  6 ++--
 .../dnd-clone-item.component.scss             |  2 +-
 .../dnd-clone-items.component.scss            |  4 +--
 .../date-picker-months.component.scss         |  2 +-
 .../date-picker-simple-time.component.scss    |  4 +--
 .../date-picker-years.component.scss          |  2 +-
 .../date-picker/date-picker.component.scss    |  8 +++---
 .../date-time-picker/date-picker.style.scss   | 18 ++++++------
 .../date-time-picker/time-picker.style.scss   | 10 +++----
 .../day-selector-item.component.scss          |  2 +-
 .../droppable-content.component.scss          |  2 +-
 .../radio-image-control.component.scss        |  6 ++--
 .../select-option.component.html              |  2 +-
 .../select-option/select-option.component.ts  |  2 +-
 .../select-options-container.component.html   |  2 +-
 .../select-options-container.component.ts     |  2 +-
 .../select-trigger-input.component.html       |  2 +-
 .../select-trigger-tags.component.html        |  2 +-
 .../select-trigger-tags.component.scss        |  2 +-
 .../select-trigger.component.html             |  2 +-
 .../select/select-trigger.style.scss          | 12 ++++----
 .../switcher/switcher.component.scss          |  2 +-
 .../textarea-inline.component.scss            |  8 +++---
 .../components/textarea/textarea.styles.scss  |  2 +-
 .../abstract/select-trigger-base.abstract.ts  |  6 ++--
 .../accordion/accordion.component.scss        |  2 +-
 .../badge-marker/badge-marker.component.scss  |  2 +-
 .../button-group-item.component.scss          |  4 +--
 .../button-group/button-group.component.scss  |  8 +++---
 .../button-icon/button-icon.component.html    |  2 +-
 .../button-icon/button-icon.component.ts      |  4 +--
 .../button-multi/button-multi.component.html  |  2 +-
 .../button-round/button-round.component.html  |  2 +-
 .../components/button/button.component.html   |  2 +-
 .../components/button/button.component.ts     |  4 +--
 .../card-container.component.scss             |  6 ++--
 .../checkbox/checkbox.component.scss          |  4 +--
 .../dropdown-template.component.scss          |  2 +-
 .../components/layout/layout.component.html   |  2 +-
 .../link/components/link/link.component.scss  |  4 +--
 .../components/loader/loader.component.scss   |  4 +--
 .../components/loader/loader.component.ts     |  8 ++++--
 .../components/status/status.component.scss   |  4 +--
 .../tabs/components/tabs/tabs.component.scss  |  4 +--
 .../tag-action-button.component.scss          |  2 +-
 .../tooltip-content.component.ts              | 18 ++++++------
 .../alert-layout-close-button.component.scss  |  4 +--
 .../alert-layout-header.component.scss        |  2 +-
 .../alert-layout/alert-layout.component.scss  |  4 +--
 .../drawer-container.component.scss           |  2 +-
 .../drawer-layout-footer.component.scss       |  2 +-
 .../drawer-layout-header-row.component.scss   |  2 +-
 .../drawer-layout.component.scss              |  2 +-
 .../modal-layout/modal-layout.component.scss  | 10 +++----
 .../toast-layout/toast-layout.component.scss  |  2 +-
 .../overlays/src/services/toasts.service.ts   |  4 +--
 .../table-header-cell.component.scss          |  4 +--
 .../table-skeleton.component.scss             |  8 +++---
 .../system/table/table.component.scss         |  4 +--
 .../tree-node-skeleton.component.ts           |  4 +--
 .../tree-node/tree-node.component.ts          |  4 +--
 .../tree-new/tree-new.component.html          |  2 +-
 .../constants/tree-node-offset-rem.const.ts   |  1 +
 .../constants/tree-node-offset.const.ts       |  1 -
 128 files changed, 262 insertions(+), 260 deletions(-)
 delete mode 100644 projects/common/src/declarations/constants/scrollbar-width-px.const.ts
 create mode 100644 projects/common/src/declarations/types/size-rem.type.ts
 create mode 100644 projects/tree/src/declarations/constants/tree-node-offset-rem.const.ts
 delete mode 100644 projects/tree/src/declarations/constants/tree-node-offset.const.ts

diff --git a/projects/common/src/assets/configs/adaptive-config.json b/projects/common/src/assets/configs/adaptive-config.json
index caf5eaf1d..b14c7df7c 100644
--- a/projects/common/src/assets/configs/adaptive-config.json
+++ b/projects/common/src/assets/configs/adaptive-config.json
@@ -18,22 +18,22 @@
     "xxl": 16
   },
   "gutters": {
-    "xs": 8,
-    "sm": 16,
-    "md": 16,
-    "lg": 16,
-    "xlg": 16,
-    "xl": 16,
-    "xxl": 16
+    "xs": 2,
+    "sm": 4,
+    "md": 4,
+    "lg": 4,
+    "xlg": 4,
+    "xl": 4,
+    "xxl": 4
   },
   "offsets": {
-    "xs": 12,
-    "sm": 16,
-    "md": 16,
-    "lg": 24,
-    "xlg": 24,
-    "xl": 24,
-    "xxl": 24
+    "xs": 3,
+    "sm": 4,
+    "md": 4,
+    "lg": 6,
+    "xlg": 6,
+    "xl": 6,
+    "xxl": 6
   },
   "queries": {
     "xs": "(max-width: 767px)",
diff --git a/projects/common/src/declarations/constants/scrollbar-width-px.const.ts b/projects/common/src/declarations/constants/scrollbar-width-px.const.ts
deleted file mode 100644
index f7b483b61..000000000
--- a/projects/common/src/declarations/constants/scrollbar-width-px.const.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const SCROLLBAR_WIDTH_PX: number = 12;
diff --git a/projects/common/src/declarations/types/size-rem.type.ts b/projects/common/src/declarations/types/size-rem.type.ts
new file mode 100644
index 000000000..7649b5a26
--- /dev/null
+++ b/projects/common/src/declarations/types/size-rem.type.ts
@@ -0,0 +1 @@
+export type SizeRem = `${number}rem`;
diff --git a/projects/common/src/styles/functions/adaptive/grid-column-offset.function.scss b/projects/common/src/styles/functions/adaptive/grid-column-offset.function.scss
index 117d30ab1..0e568994f 100644
--- a/projects/common/src/styles/functions/adaptive/grid-column-offset.function.scss
+++ b/projects/common/src/styles/functions/adaptive/grid-column-offset.function.scss
@@ -1,5 +1,5 @@
 @function grid-column-offset($columnCount, $gutter, $breakpointWidth) {
-  $gutter: $gutter * 1px;
+  $gutter: $gutter * 1rem;
   $gutters: ($columnCount - 1) * $gutter;
   $guttersOffset: ($breakpointWidth) * $gutter;
 
diff --git a/projects/common/src/styles/functions/adaptive/grid-column.function.scss b/projects/common/src/styles/functions/adaptive/grid-column.function.scss
index cf589151d..d14e1cb2a 100644
--- a/projects/common/src/styles/functions/adaptive/grid-column.function.scss
+++ b/projects/common/src/styles/functions/adaptive/grid-column.function.scss
@@ -1,5 +1,5 @@
 @function grid-column($columnsCount, $gutter, $size) {
-  $gutter: $gutter * 1px;
+  $gutter: $gutter * 1rem;
   $gutters: ($columnsCount - 1) * $gutter;
 
   @return calc((((100% - #{$gutters}) / #{$columnsCount}) * #{$size}) + #{max(($size - 1) * $gutter, 0)});
diff --git a/projects/common/src/styles/maps/variables.map.scss b/projects/common/src/styles/maps/variables.map.scss
index adb7db6b2..99d3bed76 100644
--- a/projects/common/src/styles/maps/variables.map.scss
+++ b/projects/common/src/styles/maps/variables.map.scss
@@ -1,6 +1,6 @@
 $variablesMap: (
   'box-shadow_hover': 0 2rem 4rem 0 rgba(0, 0, 0, 0.2),
-  'box-shadow_dropdown': 0 14px 6rem rgba(0, 23, 32, 0.08),
+  'box-shadow_dropdown': 0 3.5rem 6rem rgba(0, 23, 32, 0.08),
   'transition-duration_common': 0.3s,
   'transition-duration_shortest': 150ms,
   'transition-duration_shorter': 200ms,
diff --git a/projects/common/src/styles/mixins/adaptive/grid-container-offset.mixin.scss b/projects/common/src/styles/mixins/adaptive/grid-container-offset.mixin.scss
index d4672c345..f7ec8c89c 100644
--- a/projects/common/src/styles/mixins/adaptive/grid-container-offset.mixin.scss
+++ b/projects/common/src/styles/mixins/adaptive/grid-container-offset.mixin.scss
@@ -12,24 +12,24 @@
 
 @mixin grid-container-offset($property: 'padding-left') {
   @include xs() {
-    #{$property}: $xsOffset * 1px;
+    #{$property}: $xsOffset * 1rem;
   }
   @include sm() {
-    #{$property}: $smOffset * 1px;
+    #{$property}: $smOffset * 1rem;
   }
   @include md() {
-    #{$property}: $mdOffset * 1px;
+    #{$property}: $mdOffset * 1rem;
   }
   @include lg() {
-    #{$property}: $lgOffset * 1px;
+    #{$property}: $lgOffset * 1rem;
   }
   @include xlg() {
-    #{$property}: $xlgOffset * 1px;
+    #{$property}: $xlgOffset * 1rem;
   }
   @include xl() {
-    #{$property}: $xlOffset * 1px;
+    #{$property}: $xlOffset * 1rem;
   }
   @include xxl() {
-    #{$property}: $xxlOffset * 1px;
+    #{$property}: $xxlOffset * 1rem;
   }
 }
diff --git a/projects/demo/src/app/common/components/navbar/components/menu-toggle/menu-toggle.component.scss b/projects/demo/src/app/common/components/navbar/components/menu-toggle/menu-toggle.component.scss
index ab695455e..ab68ffbd8 100644
--- a/projects/demo/src/app/common/components/navbar/components/menu-toggle/menu-toggle.component.scss
+++ b/projects/demo/src/app/common/components/navbar/components/menu-toggle/menu-toggle.component.scss
@@ -51,11 +51,11 @@ $strip-height: 2px;
     display: block;
     position: absolute;
     top: $top;
-    left: 0px;
-    right: 0px;
+    left: 0;
+    right: 0;
     height: $strip-height;
 
-    border-radius: 1px;
+    border-radius: 0.25rem;
 
     @include apply-background();
 
@@ -68,7 +68,7 @@ $strip-height: 2px;
       height: $strip-height;
       content: '';
 
-      border-radius: 1px;
+      border-radius: 0.25rem;
 
       @include apply-background();
     }
diff --git a/projects/demo/src/app/common/components/navbar/components/navbar/navbar.component.scss b/projects/demo/src/app/common/components/navbar/components/navbar/navbar.component.scss
index b8b9ac01c..030517595 100644
--- a/projects/demo/src/app/common/components/navbar/components/navbar/navbar.component.scss
+++ b/projects/demo/src/app/common/components/navbar/components/navbar/navbar.component.scss
@@ -64,8 +64,8 @@ $end-item-margin: 4rem;
   }
 
   &__logo-image {
-    height: 24px;
-    width: 164px;
+    height: 6rem;
+    width: 41rem;
     margin-left: 2rem;
 
     @include xs() {
@@ -74,8 +74,8 @@ $end-item-margin: 4rem;
   }
 
   &__logo-icon {
-    height: 32px;
-    width: 32px;
+    height: 8rem;
+    width: 8rem;
   }
 
   &__status {
@@ -99,10 +99,10 @@ $end-item-margin: 4rem;
 
   &__santa-hat-icon {
     position: absolute;
-    top: -13px;
-    left: -13px;
-    height: 32px;
-    width: 32px;
+    top: -3.25rem;
+    left: -3.25rem;
+    height: 8rem;
+    width: 8rem;
   }
 
   &__spacer {
diff --git a/projects/demo/src/app/layouts/kit-layout/kit-layout.component.scss b/projects/demo/src/app/layouts/kit-layout/kit-layout.component.scss
index f8e6ab930..e579120a9 100644
--- a/projects/demo/src/app/layouts/kit-layout/kit-layout.component.scss
+++ b/projects/demo/src/app/layouts/kit-layout/kit-layout.component.scss
@@ -46,7 +46,7 @@
 
 .content {
   box-sizing: border-box;
-  padding: 100px 0 64px 0;
+  padding: 25rem 0 16rem 0;
   margin-left: 80rem;
   min-height: calc(#{vh(100)});
 
diff --git a/projects/demo/src/app/pages/accordion-demo/examples/example-5/example-5.component.html b/projects/demo/src/app/pages/accordion-demo/examples/example-5/example-5.component.html
index d0d941338..96627369c 100644
--- a/projects/demo/src/app/pages/accordion-demo/examples/example-5/example-5.component.html
+++ b/projects/demo/src/app/pages/accordion-demo/examples/example-5/example-5.component.html
@@ -18,7 +18,7 @@
     </pupa-accordion>
     <pupa-accordion [kind]="'border-bottom'">
       <span class="example-container__title">Spinner</span>
-      <pupa-loader *pupaAccordionActionTemplate size="16px"></pupa-loader>
+      <pupa-loader *pupaAccordionActionTemplate size="4rem"></pupa-loader>
       <pupa-accordion-body>Accordion Body</pupa-accordion-body>
     </pupa-accordion>
   </pupa-accordion-group>
diff --git a/projects/demo/src/app/pages/actions-demo/actions-demo.component.scss b/projects/demo/src/app/pages/actions-demo/actions-demo.component.scss
index 6d079840e..78f1a4965 100644
--- a/projects/demo/src/app/pages/actions-demo/actions-demo.component.scss
+++ b/projects/demo/src/app/pages/actions-demo/actions-demo.component.scss
@@ -9,7 +9,7 @@
 .action {
   display: block;
   text-align: center;
-  width: 96px;
+  width: 24rem;
   background: color(danger-150);
   padding: 1rem 0;
   height: 10rem;
diff --git a/projects/demo/src/app/pages/actions-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/actions-demo/examples/example-1/example-1.component.scss
index 916aa879b..3b4370762 100644
--- a/projects/demo/src/app/pages/actions-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/actions-demo/examples/example-1/example-1.component.scss
@@ -4,7 +4,7 @@
 @mixin action {
   display: block;
   text-align: center;
-  width: 96px;
+  width: 24rem;
   background: color(danger-150);
   padding: 1rem 0;
   height: 10rem;
diff --git a/projects/demo/src/app/pages/actions-demo/examples/example-6/example-6.component.scss b/projects/demo/src/app/pages/actions-demo/examples/example-6/example-6.component.scss
index 91f492847..9e465c665 100644
--- a/projects/demo/src/app/pages/actions-demo/examples/example-6/example-6.component.scss
+++ b/projects/demo/src/app/pages/actions-demo/examples/example-6/example-6.component.scss
@@ -1,7 +1,7 @@
 @use 'functions' as *;
 
 .action-container {
-  box-shadow: 0px -1px 0px #ebedee;
+  box-shadow: 0px -0.25rem 0px #ebedee;
   padding: 2rem 8rem;
 }
 
diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-1/example-1.component.scss
index b4b3799c4..f599a31c0 100644
--- a/projects/demo/src/app/pages/adaptive-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/adaptive-demo/examples/example-1/example-1.component.scss
@@ -2,8 +2,8 @@
 @use 'functions' as *;
 
 .block {
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
 
   @include width-between($min-width: 1500, $max-width: 1600) {
diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-2/example-2.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-2/example-2.component.scss
index cc3ee95d0..b3ca15493 100644
--- a/projects/demo/src/app/pages/adaptive-demo/examples/example-2/example-2.component.scss
+++ b/projects/demo/src/app/pages/adaptive-demo/examples/example-2/example-2.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
 
   @include width-less-than($width: 900) {
@@ -12,8 +12,8 @@
   }
 
   @include width-more-than($width: 1500) {
-    width: 200px;
-    height: 200px;
+    width: 50rem;
+    height: 50rem;
   }
 
   @include height-less-than($height: 900) {
diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-3/example-3.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-3/example-3.component.scss
index 67413017c..812d55cee 100644
--- a/projects/demo/src/app/pages/adaptive-demo/examples/example-3/example-3.component.scss
+++ b/projects/demo/src/app/pages/adaptive-demo/examples/example-3/example-3.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
 
   @include landscape() {
     border-radius: unset;
diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-4/example-4.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-4/example-4.component.scss
index 0ca49ad0a..569fbe132 100644
--- a/projects/demo/src/app/pages/adaptive-demo/examples/example-4/example-4.component.scss
+++ b/projects/demo/src/app/pages/adaptive-demo/examples/example-4/example-4.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   border: 2px solid transparent;
   background-color: transparent;
 
diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-5/example-5.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-5/example-5.component.scss
index d65850b73..5ae5cb28d 100644
--- a/projects/demo/src/app/pages/adaptive-demo/examples/example-5/example-5.component.scss
+++ b/projects/demo/src/app/pages/adaptive-demo/examples/example-5/example-5.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
 
   @include lt-xlg() {
diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-6/example-6.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-6/example-6.component.scss
index 725c8306a..eb8547e93 100644
--- a/projects/demo/src/app/pages/adaptive-demo/examples/example-6/example-6.component.scss
+++ b/projects/demo/src/app/pages/adaptive-demo/examples/example-6/example-6.component.scss
@@ -3,8 +3,8 @@
 
 .block {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
 
   @include gt-lg() {
diff --git a/projects/demo/src/app/pages/adaptive-demo/examples/example-9/example-9.component.scss b/projects/demo/src/app/pages/adaptive-demo/examples/example-9/example-9.component.scss
index f4c9066cb..e3333d65e 100644
--- a/projects/demo/src/app/pages/adaptive-demo/examples/example-9/example-9.component.scss
+++ b/projects/demo/src/app/pages/adaptive-demo/examples/example-9/example-9.component.scss
@@ -4,8 +4,8 @@
 .block1,
 .block2 {
   display: block;
-  width: 100px;
-  height: 100px;
+  width: 25rem;
+  height: 25rem;
   background-color: color(primary-500);
   margin-bottom: 2rem;
 }
diff --git a/projects/demo/src/app/pages/breadcrumbs-demo/breadcrumbs-demo.component.scss b/projects/demo/src/app/pages/breadcrumbs-demo/breadcrumbs-demo.component.scss
index 2e3ac1ece..316194b5b 100644
--- a/projects/demo/src/app/pages/breadcrumbs-demo/breadcrumbs-demo.component.scss
+++ b/projects/demo/src/app/pages/breadcrumbs-demo/breadcrumbs-demo.component.scss
@@ -1,5 +1,5 @@
 :host {
   display: flex;
   flex-direction: column;
-  margin-bottom: 100px;
+  margin-bottom: 25rem;
 }
diff --git a/projects/demo/src/app/pages/breadcrumbs-demo/examples/example-2/example-2.component.html b/projects/demo/src/app/pages/breadcrumbs-demo/examples/example-2/example-2.component.html
index 3a97b4839..e548474f1 100644
--- a/projects/demo/src/app/pages/breadcrumbs-demo/examples/example-2/example-2.component.html
+++ b/projects/demo/src/app/pages/breadcrumbs-demo/examples/example-2/example-2.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <pupa-breadcrumbs [breadcrumbs]="breadcrumbs">
     <div class="breadcrumb" *pupaBreadcrumbTemplate="let breadcrumb">
-      <pupa-loader class="breadcrumb__loader" [size]="'16px'"></pupa-loader>
+      <pupa-loader class="breadcrumb__loader" size="4rem"></pupa-loader>
       <span class="breadcrumb__name">{{ breadcrumb.name }}</span>
     </div>
   </pupa-breadcrumbs>
diff --git a/projects/demo/src/app/pages/button-group-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/button-group-demo/examples/example-1/example-1.component.scss
index c7a0d0c43..4cd15035a 100644
--- a/projects/demo/src/app/pages/button-group-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/button-group-demo/examples/example-1/example-1.component.scss
@@ -6,6 +6,6 @@
 
 .pupa-button-group-item {
   &:last-of-type {
-    width: 100px;
+    width: 25rem;
   }
 }
diff --git a/projects/demo/src/app/pages/code-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/code-demo/examples/example-1/example-1.component.scss
index cd2a1aea3..745237600 100644
--- a/projects/demo/src/app/pages/code-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/code-demo/examples/example-1/example-1.component.scss
@@ -2,8 +2,8 @@
 
 .circle {
   display: block;
-  width: 200px;
-  height: 200px;
+  width: 50rem;
+  height: 50rem;
   background-color: color(primary-500);
   border-radius: 50%;
 }
diff --git a/projects/demo/src/app/pages/colors-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/colors-demo/examples/example-1/example-1.component.scss
index be0ae3b34..c4ba31170 100644
--- a/projects/demo/src/app/pages/colors-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/colors-demo/examples/example-1/example-1.component.scss
@@ -10,12 +10,12 @@ $colorsToOverride: (
 @include override-colors($colorsToOverride, ':host');
 
 .usage-example {
-  margin-top: 16px;
+  margin-top: 4rem;
   color: color(neutral-6);
 }
 
 .square {
-  width: 40px;
-  height: 40px;
+  width: 10rem;
+  height: 10rem;
   background-color: color(primary-600, alpha-60);
 }
diff --git a/projects/demo/src/app/pages/colors-demo/examples/example-2/example-2.component.css b/projects/demo/src/app/pages/colors-demo/examples/example-2/example-2.component.css
index a5894e052..9690f3542 100644
--- a/projects/demo/src/app/pages/colors-demo/examples/example-2/example-2.component.css
+++ b/projects/demo/src/app/pages/colors-demo/examples/example-2/example-2.component.css
@@ -5,7 +5,7 @@
 }
 
 .usage-example {
-  margin-top: 16px;
+  margin-top: 4rem;
   color: rgb(var(--color_neutral-6));
 }
 
diff --git a/projects/demo/src/app/pages/drawer-demo/components/test-drawer/test-drawer.component.scss b/projects/demo/src/app/pages/drawer-demo/components/test-drawer/test-drawer.component.scss
index c9a16cc0c..216b4bc89 100644
--- a/projects/demo/src/app/pages/drawer-demo/components/test-drawer/test-drawer.component.scss
+++ b/projects/demo/src/app/pages/drawer-demo/components/test-drawer/test-drawer.component.scss
@@ -1,12 +1,12 @@
 :host {
   display: block;
-  width: 512px;
+  width: 128rem;
   height: 100%;
 }
 
 .drawer {
   &__title-container {
     display: flex;
-    gap: 8px;
+    gap: 4rem;
   }
 }
diff --git a/projects/demo/src/app/pages/drawer-demo/examples/example-1/drawer-layout-example-1/drawer-layout-example-1.component.scss b/projects/demo/src/app/pages/drawer-demo/examples/example-1/drawer-layout-example-1/drawer-layout-example-1.component.scss
index 7057b0939..f3d3889cd 100644
--- a/projects/demo/src/app/pages/drawer-demo/examples/example-1/drawer-layout-example-1/drawer-layout-example-1.component.scss
+++ b/projects/demo/src/app/pages/drawer-demo/examples/example-1/drawer-layout-example-1/drawer-layout-example-1.component.scss
@@ -2,7 +2,7 @@
 
 :host {
   display: block;
-  width: 512px;
+  width: 128rem;
   height: 100%;
 }
 
diff --git a/projects/demo/src/app/pages/highlight-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/highlight-demo/examples/example-1/example-1.component.scss
index 205dc2229..0206db93c 100644
--- a/projects/demo/src/app/pages/highlight-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/highlight-demo/examples/example-1/example-1.component.scss
@@ -1,5 +1,5 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
   margin-top: 2rem;
 }
diff --git a/projects/demo/src/app/pages/loader-demo/examples/demo-loader/demo-loader.component.html b/projects/demo/src/app/pages/loader-demo/examples/demo-loader/demo-loader.component.html
index 8d36d9330..dc52882d8 100644
--- a/projects/demo/src/app/pages/loader-demo/examples/demo-loader/demo-loader.component.html
+++ b/projects/demo/src/app/pages/loader-demo/examples/demo-loader/demo-loader.component.html
@@ -1,5 +1,5 @@
 <div class="loader-container">
-  <pupa-loader size="50px"></pupa-loader>
-  <pupa-loader size="50px" type="determinate" [progress]="50"></pupa-loader>
-  <pupa-loader size="50px" type="determinate" [isError]="true" errorText="Loader error text"></pupa-loader>
+  <pupa-loader size="12.5rem"></pupa-loader>
+  <pupa-loader size="12.5rem" type="determinate" [progress]="50"></pupa-loader>
+  <pupa-loader size="12.5rem" type="determinate" [isError]="true" errorText="Loader error text"></pupa-loader>
 </div>
diff --git a/projects/demo/src/app/pages/loader-demo/loader-demo.component.html b/projects/demo/src/app/pages/loader-demo/loader-demo.component.html
index ab20e1f8f..4eba5fcb5 100644
--- a/projects/demo/src/app/pages/loader-demo/loader-demo.component.html
+++ b/projects/demo/src/app/pages/loader-demo/loader-demo.component.html
@@ -23,7 +23,7 @@ <h3 demoAnchor>Loader Old</h3>
     <demo-example-viewer-content>
       <pupa-loader
         [type]="typeFormControl.value"
-        [size]="sizeFormControl.value + 'px'"
+        [size]="sizeFormControl.value + 'rem'"
         [kind]="kindFormControl.value"
         [progress]="progressFormControl.value"
         [isError]="isErrorFormControl.value"
@@ -39,9 +39,9 @@ <h3 demoAnchor>Properties</h3>
     </demo-example-viewer-property>
 
     <demo-example-viewer-property name="size" type="string" decoratorName="input">
-      <ng-template demoExampleViewerPropertyDescription>Set width and height of loader.</ng-template>
+      <ng-template demoExampleViewerPropertyDescription>Set width and height of loader in rem.</ng-template>
 
-      <pupa-input-text [formControl]="sizeFormControl" placeholder="Enter value"></pupa-input-text>
+      <pupa-input-text [formControl]="sizeFormControl" placeholder="Enter value in rem"></pupa-input-text>
     </demo-example-viewer-property>
 
     <ng-container *ngIf="typeFormControl.value === 'determinate'; else indeterminateOptions">
diff --git a/projects/demo/src/app/pages/loader-demo/loader-demo.component.ts b/projects/demo/src/app/pages/loader-demo/loader-demo.component.ts
index 928a23d14..86c75d7b4 100644
--- a/projects/demo/src/app/pages/loader-demo/loader-demo.component.ts
+++ b/projects/demo/src/app/pages/loader-demo/loader-demo.component.ts
@@ -13,7 +13,7 @@ const BASE_EXAMPLE_URL: string = 'loader-demo/examples';
 export class LoaderDemoComponent {
   public readonly typeFormControl: FormControl<Loader> = new FormControl<Loader>('determinate');
   public readonly kindFormControl: FormControl<LoaderKind> = new FormControl<LoaderKind>('default');
-  public readonly sizeFormControl: FormControl<number | null> = new FormControl<number | null>(50);
+  public readonly sizeFormControl: FormControl<number | null> = new FormControl<number | null>(12.5);
   public readonly progressFormControl: FormControl<number | null> = new FormControl<number | null>(50, [
     Validators.required,
     Validators.min(0),
diff --git a/projects/demo/src/app/pages/main-page/components/main-page/main-page.component.scss b/projects/demo/src/app/pages/main-page/components/main-page/main-page.component.scss
index 226349692..bfa4fc95c 100644
--- a/projects/demo/src/app/pages/main-page/components/main-page/main-page.component.scss
+++ b/projects/demo/src/app/pages/main-page/components/main-page/main-page.component.scss
@@ -23,7 +23,7 @@
 
   &__logo-title {
     height: auto;
-    width: 200px;
+    width: 50rem;
 
     @include width-between-property(
       $property: 'width',
diff --git a/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss b/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss
index c8a633c9d..619d88ea4 100755
--- a/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss
+++ b/projects/demo/src/app/pages/modal-demo/modal-demo-content/modal-demo-content.component.scss
@@ -8,7 +8,7 @@
 }
 
 .modal-layout {
-  width: 400px;
+  width: 100rem;
 }
 
 .dragger {
@@ -16,12 +16,12 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 10px;
+  height: 2.5rem;
   z-index: 10000;
 }
 
 .sample-content {
-  width: 300px;
+  width: 75rem;
 }
 
 pupa-modal-layout-action pupa-button {
diff --git a/projects/demo/src/app/pages/not-found-page/not-found-page.component.scss b/projects/demo/src/app/pages/not-found-page/not-found-page.component.scss
index b146a1079..b5c659a24 100644
--- a/projects/demo/src/app/pages/not-found-page/not-found-page.component.scss
+++ b/projects/demo/src/app/pages/not-found-page/not-found-page.component.scss
@@ -45,7 +45,7 @@
   }
 
   &__action {
-    margin: 0 10px;
+    margin: 0 2.5rem;
   }
 }
 
diff --git a/projects/demo/src/app/pages/paged-virtual-scroll-demo/paged-virtual-scroll-demo.component.scss b/projects/demo/src/app/pages/paged-virtual-scroll-demo/paged-virtual-scroll-demo.component.scss
index 373965019..84c0f587c 100755
--- a/projects/demo/src/app/pages/paged-virtual-scroll-demo/paged-virtual-scroll-demo.component.scss
+++ b/projects/demo/src/app/pages/paged-virtual-scroll-demo/paged-virtual-scroll-demo.component.scss
@@ -1,7 +1,7 @@
 @use 'mixins' as *;
 @use 'functions' as *;
 
-$height_container: 500px;
+$height_container: 125rem;
 
 :host {
   height: 100vh;
diff --git a/projects/demo/src/app/pages/popover-demo/examples/other-example/drawer-layout-other/drawer-layout-other.component.scss b/projects/demo/src/app/pages/popover-demo/examples/other-example/drawer-layout-other/drawer-layout-other.component.scss
index c9a16cc0c..71edce831 100644
--- a/projects/demo/src/app/pages/popover-demo/examples/other-example/drawer-layout-other/drawer-layout-other.component.scss
+++ b/projects/demo/src/app/pages/popover-demo/examples/other-example/drawer-layout-other/drawer-layout-other.component.scss
@@ -1,12 +1,12 @@
 :host {
   display: block;
-  width: 512px;
+  width: 128rem;
   height: 100%;
 }
 
 .drawer {
   &__title-container {
     display: flex;
-    gap: 8px;
+    gap: 2rem;
   }
 }
diff --git a/projects/demo/src/app/pages/scrollable-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/scrollable-demo/examples/example-1/example-1.component.scss
index dde051555..f45a49771 100644
--- a/projects/demo/src/app/pages/scrollable-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/scrollable-demo/examples/example-1/example-1.component.scss
@@ -1,3 +1,3 @@
 .scrollable-box {
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/scrollable-demo/examples/example-2/example-2.component.scss b/projects/demo/src/app/pages/scrollable-demo/examples/example-2/example-2.component.scss
index e77a5591f..7c3656d05 100644
--- a/projects/demo/src/app/pages/scrollable-demo/examples/example-2/example-2.component.scss
+++ b/projects/demo/src/app/pages/scrollable-demo/examples/example-2/example-2.component.scss
@@ -1,11 +1,11 @@
 .scrollable-box {
-  width: 400px;
-  height: 400px;
+  width: 100rem;
+  height: 100rem;
 }
 
 .virtual-scroll-item {
   width: 100%;
-  height: 25px;
+  height: 6.25rem;
 }
 
 .virtual-scroll {
diff --git a/projects/demo/src/app/pages/scrollable-demo/scrollable-demo.component.scss b/projects/demo/src/app/pages/scrollable-demo/scrollable-demo.component.scss
index a63b68500..0c6a9e514 100644
--- a/projects/demo/src/app/pages/scrollable-demo/scrollable-demo.component.scss
+++ b/projects/demo/src/app/pages/scrollable-demo/scrollable-demo.component.scss
@@ -7,8 +7,8 @@
 }
 
 .scrollable-box {
-  width: 300px;
-  height: 300px;
+  width: 75rem;
+  height: 75rem;
 
   .text-content {
     width: 200%;
diff --git a/projects/demo/src/app/pages/select-demo/examples/select-demo-other/example-16/example-16.component.html b/projects/demo/src/app/pages/select-demo/examples/select-demo-other/example-16/example-16.component.html
index 4291d2007..68bb25566 100644
--- a/projects/demo/src/app/pages/select-demo/examples/select-demo-other/example-16/example-16.component.html
+++ b/projects/demo/src/app/pages/select-demo/examples/select-demo-other/example-16/example-16.component.html
@@ -32,7 +32,7 @@
         </pupa-button-group>
       </pupa-select-dropdown-header>
 
-      <pupa-select-options-container [fixedHeightPx]="200">
+      <pupa-select-options-container [fixedHeightRem]="50">
         <pupa-button-group-content>
           <ng-container *pupaButtonGroupItemContentTemplate="'group-1'">
             <pupa-scrollable class="scrollable">
@@ -43,7 +43,7 @@
               >
                 <pupa-select-option
                   *cdkVirtualFor="let user of usersByGroup1$ | async"
-                  [heightPx]="itemSizePx"
+                  [heightRem]="10"
                   [value]="user.id"
                 >
                   <ng-container
@@ -68,7 +68,7 @@
               >
                 <pupa-select-option
                   *cdkVirtualFor="let user of usersByGroup2$ | async"
-                  [heightPx]="itemSizePx"
+                  [heightRem]="10"
                   [value]="user.id"
                 >
                   <ng-container
diff --git a/projects/demo/src/app/pages/select-demo/examples/select-demo-other/example-17/example-17.component.html b/projects/demo/src/app/pages/select-demo/examples/select-demo-other/example-17/example-17.component.html
index af77f9940..6494faba3 100644
--- a/projects/demo/src/app/pages/select-demo/examples/select-demo-other/example-17/example-17.component.html
+++ b/projects/demo/src/app/pages/select-demo/examples/select-demo-other/example-17/example-17.component.html
@@ -70,7 +70,7 @@
 
 <ng-template #errorMessageTemplate>
   <div class="error">
-    <pupa-loader class="error__loader" [size]="'16px'"></pupa-loader>
+    <pupa-loader class="error__loader" size="4rem"></pupa-loader>
     <div class="error__message">Required field</div>
   </div>
 </ng-template>
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-1/example-1.component.scss
index b0eb4cf60..95c68ef9e 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-1/example-1.component.scss
@@ -1,4 +1,4 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-10/example-10.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-10/example-10.component.scss
index b0eb4cf60..95c68ef9e 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-10/example-10.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-10/example-10.component.scss
@@ -1,4 +1,4 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-2/example-2.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-2/example-2.component.scss
index b0eb4cf60..95c68ef9e 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-2/example-2.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-2/example-2.component.scss
@@ -1,4 +1,4 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-3/example-3.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-3/example-3.component.scss
index b0eb4cf60..95c68ef9e 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-3/example-3.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-3/example-3.component.scss
@@ -1,4 +1,4 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-4/example-4.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-4/example-4.component.scss
index bf89b772b..fb230114b 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-4/example-4.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-4/example-4.component.scss
@@ -1,6 +1,6 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
 
 .name-header-cell {
@@ -16,7 +16,7 @@
 
   &_current-draggable {
     background-color: black;
-    border-radius: 50px;
+    border-radius: 12.5rem;
   }
 
   &__dnd-text {
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-5/example-5.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-5/example-5.component.scss
index b0eb4cf60..95c68ef9e 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-5/example-5.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-5/example-5.component.scss
@@ -1,4 +1,4 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-6/example-6.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-6/example-6.component.scss
index 2e4041a90..f171b7d99 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-6/example-6.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-6/example-6.component.scss
@@ -1,20 +1,20 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
 
 .actions {
   & + & {
-    margin-top: 4px;
+    margin-top: 1rem;
   }
 }
 
 .action-button {
   & + & {
-    margin-left: 4px;
+    margin-left: 1rem;
   }
 }
 
 .events {
-  margin: 16px 0;
+  margin: 4rem 0;
 }
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-7/example-7.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-7/example-7.component.scss
index b0eb4cf60..95c68ef9e 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-7/example-7.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-7/example-7.component.scss
@@ -1,4 +1,4 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-8/example-8.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-8/example-8.component.scss
index b0eb4cf60..95c68ef9e 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-8/example-8.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-8/example-8.component.scss
@@ -1,4 +1,4 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/table-demo/examples/example-9/example-9.component.scss b/projects/demo/src/app/pages/table-demo/examples/example-9/example-9.component.scss
index b0eb4cf60..95c68ef9e 100644
--- a/projects/demo/src/app/pages/table-demo/examples/example-9/example-9.component.scss
+++ b/projects/demo/src/app/pages/table-demo/examples/example-9/example-9.component.scss
@@ -1,4 +1,4 @@
 .table {
   display: block;
-  height: 400px;
+  height: 100rem;
 }
diff --git a/projects/demo/src/app/pages/textarea-demo/examples/example-1/example-1.component.scss b/projects/demo/src/app/pages/textarea-demo/examples/example-1/example-1.component.scss
index 184f20ab9..b58d01c0b 100644
--- a/projects/demo/src/app/pages/textarea-demo/examples/example-1/example-1.component.scss
+++ b/projects/demo/src/app/pages/textarea-demo/examples/example-1/example-1.component.scss
@@ -1,7 +1,7 @@
 .textarea {
-  max-width: 300px;
+  max-width: 75rem;
 
   & + & {
-    margin-top: 16px;
+    margin-top: 4rem;
   }
 }
diff --git a/projects/demo/src/app/pages/textarea-demo/examples/example-2/example-2.component.scss b/projects/demo/src/app/pages/textarea-demo/examples/example-2/example-2.component.scss
index 184f20ab9..b58d01c0b 100644
--- a/projects/demo/src/app/pages/textarea-demo/examples/example-2/example-2.component.scss
+++ b/projects/demo/src/app/pages/textarea-demo/examples/example-2/example-2.component.scss
@@ -1,7 +1,7 @@
 .textarea {
-  max-width: 300px;
+  max-width: 75rem;
 
   & + & {
-    margin-top: 16px;
+    margin-top: 4rem;
   }
 }
diff --git a/projects/demo/src/app/pages/textarea-demo/examples/example-3/example-3.component.scss b/projects/demo/src/app/pages/textarea-demo/examples/example-3/example-3.component.scss
index 184f20ab9..b58d01c0b 100644
--- a/projects/demo/src/app/pages/textarea-demo/examples/example-3/example-3.component.scss
+++ b/projects/demo/src/app/pages/textarea-demo/examples/example-3/example-3.component.scss
@@ -1,7 +1,7 @@
 .textarea {
-  max-width: 300px;
+  max-width: 75rem;
 
   & + & {
-    margin-top: 16px;
+    margin-top: 4rem;
   }
 }
diff --git a/projects/demo/src/app/pages/textarea-demo/examples/example-4/example-4.component.scss b/projects/demo/src/app/pages/textarea-demo/examples/example-4/example-4.component.scss
index 184f20ab9..b58d01c0b 100644
--- a/projects/demo/src/app/pages/textarea-demo/examples/example-4/example-4.component.scss
+++ b/projects/demo/src/app/pages/textarea-demo/examples/example-4/example-4.component.scss
@@ -1,7 +1,7 @@
 .textarea {
-  max-width: 300px;
+  max-width: 75rem;
 
   & + & {
-    margin-top: 16px;
+    margin-top: 4rem;
   }
 }
diff --git a/projects/demo/src/app/pages/textarea-demo/examples/example-5/example-5.component.scss b/projects/demo/src/app/pages/textarea-demo/examples/example-5/example-5.component.scss
index 184f20ab9..b58d01c0b 100644
--- a/projects/demo/src/app/pages/textarea-demo/examples/example-5/example-5.component.scss
+++ b/projects/demo/src/app/pages/textarea-demo/examples/example-5/example-5.component.scss
@@ -1,7 +1,7 @@
 .textarea {
-  max-width: 300px;
+  max-width: 75rem;
 
   & + & {
-    margin-top: 16px;
+    margin-top: 4rem;
   }
 }
diff --git a/projects/demo/src/app/pages/textarea-demo/examples/example-6/example-6.component.scss b/projects/demo/src/app/pages/textarea-demo/examples/example-6/example-6.component.scss
index 184f20ab9..b58d01c0b 100644
--- a/projects/demo/src/app/pages/textarea-demo/examples/example-6/example-6.component.scss
+++ b/projects/demo/src/app/pages/textarea-demo/examples/example-6/example-6.component.scss
@@ -1,7 +1,7 @@
 .textarea {
-  max-width: 300px;
+  max-width: 75rem;
 
   & + & {
-    margin-top: 16px;
+    margin-top: 4rem;
   }
 }
diff --git a/projects/demo/src/app/pages/textarea-demo/examples/example-7/example-7.component.scss b/projects/demo/src/app/pages/textarea-demo/examples/example-7/example-7.component.scss
index 184f20ab9..b58d01c0b 100644
--- a/projects/demo/src/app/pages/textarea-demo/examples/example-7/example-7.component.scss
+++ b/projects/demo/src/app/pages/textarea-demo/examples/example-7/example-7.component.scss
@@ -1,7 +1,7 @@
 .textarea {
-  max-width: 300px;
+  max-width: 75rem;
 
   & + & {
-    margin-top: 16px;
+    margin-top: 4rem;
   }
 }
diff --git a/projects/demo/src/app/pages/tooltip-demo/examples/example-2/example-2.component.html b/projects/demo/src/app/pages/tooltip-demo/examples/example-2/example-2.component.html
index 6230e5210..b1936be85 100644
--- a/projects/demo/src/app/pages/tooltip-demo/examples/example-2/example-2.component.html
+++ b/projects/demo/src/app/pages/tooltip-demo/examples/example-2/example-2.component.html
@@ -3,5 +3,5 @@
 
 <ng-template #customTooltipTemplate>
   Tooltip custom template here
-  <pupa-loader [size]="'16px'"></pupa-loader>
+  <pupa-loader size="4rem"></pupa-loader>
 </ng-template>
diff --git a/projects/demo/src/app/pages/tooltip-demo/tooltip-demo.component.scss b/projects/demo/src/app/pages/tooltip-demo/tooltip-demo.component.scss
index 5b9f51439..356d3d9fc 100644
--- a/projects/demo/src/app/pages/tooltip-demo/tooltip-demo.component.scss
+++ b/projects/demo/src/app/pages/tooltip-demo/tooltip-demo.component.scss
@@ -9,7 +9,7 @@
 
 .tooltip-demo {
   &__info-block {
-    margin-top: 20px;
+    margin-top: 5rem;
   }
 }
 
diff --git a/projects/demo/src/app/pages/tree-node-demo/examples/example-2/example-2.component.scss b/projects/demo/src/app/pages/tree-node-demo/examples/example-2/example-2.component.scss
index 4b09ef029..ff9f357f0 100644
--- a/projects/demo/src/app/pages/tree-node-demo/examples/example-2/example-2.component.scss
+++ b/projects/demo/src/app/pages/tree-node-demo/examples/example-2/example-2.component.scss
@@ -1,7 +1,7 @@
 .scrollable-box {
-  width: 400px;
+  width: 100rem;
   max-width: 100%;
-  height: 400px;
+  height: 100rem;
 
   &__container {
     width: fit-content;
diff --git a/projects/demo/src/app/pages/typography-page/examples/example-presets/example-presets.component.scss b/projects/demo/src/app/pages/typography-page/examples/example-presets/example-presets.component.scss
index c6823f5f6..d97dfeac9 100644
--- a/projects/demo/src/app/pages/typography-page/examples/example-presets/example-presets.component.scss
+++ b/projects/demo/src/app/pages/typography-page/examples/example-presets/example-presets.component.scss
@@ -21,7 +21,7 @@ $normal-shadow-color: rgba(33, 33, 33, 0.05);
   border-radius: 1rem;
   border: 1px solid transparent;
 
-  box-shadow: 0 1px 7px $normal-shadow-color;
+  box-shadow: 0 0.25rem 1.75rem $normal-shadow-color;
   background: semantic-color(surface-secondary);
   color: semantic-color(text-primary);
   outline: none;
diff --git a/projects/demo/src/styles/highlightjs.styles.scss b/projects/demo/src/styles/highlightjs.styles.scss
index d25464fc9..c61aa538f 100644
--- a/projects/demo/src/styles/highlightjs.styles.scss
+++ b/projects/demo/src/styles/highlightjs.styles.scss
@@ -33,7 +33,7 @@
 // light theme
 .hljs {
   color: color(neutral-1000);
-  border-radius: 1px;
+  border-radius: 0.25rem;
   background-color: color(neutral-5);
 }
 .hljs-doctag,
@@ -116,10 +116,10 @@
     overflow-x: auto;
     padding: 1em;
 
-    border-radius: 1px;
+    border-radius: 0.25rem;
   }
   code.hljs {
-    padding: 3px 5px;
+    padding: 0.75rem 1.25rem;
   }
   code.hljs {
     background: color(neutral-800);
diff --git a/projects/dnd/src/components/dnd-clone-item/dnd-clone-item.component.scss b/projects/dnd/src/components/dnd-clone-item/dnd-clone-item.component.scss
index c65d5a451..14e350db7 100644
--- a/projects/dnd/src/components/dnd-clone-item/dnd-clone-item.component.scss
+++ b/projects/dnd/src/components/dnd-clone-item/dnd-clone-item.component.scss
@@ -8,7 +8,7 @@
   border-radius: 1rem;
   color: functions.semantic-color(surface-primary);
   background: functions.semantic-color(kind-primary-normal);
-  max-width: 256px;
+  max-width: 64rem;
   box-sizing: border-box;
   @include mixins.ellipsis-text-overflow;
   @include mixins.font-size-xs();
diff --git a/projects/dnd/src/components/dnd-clone-items/dnd-clone-items.component.scss b/projects/dnd/src/components/dnd-clone-items/dnd-clone-items.component.scss
index f91347873..37d5b68ce 100644
--- a/projects/dnd/src/components/dnd-clone-items/dnd-clone-items.component.scss
+++ b/projects/dnd/src/components/dnd-clone-items/dnd-clone-items.component.scss
@@ -9,7 +9,7 @@
 }
 
 .pupa-group-view {
-  box-shadow: 3px 3px functions.semantic-color(kind-primary-normal, 0.6),
-    6px 6px functions.semantic-color(kind-primary-normal, 0.3);
+  box-shadow: 0.75rem 0.75rem functions.semantic-color(kind-primary-normal, 0.6),
+    1.5rem 1.5rem functions.semantic-color(kind-primary-normal, 0.3);
   border-radius: 1rem;
 }
diff --git a/projects/forms/src/components/date-time-picker/components/date-picker-months/date-picker-months.component.scss b/projects/forms/src/components/date-time-picker/components/date-picker-months/date-picker-months.component.scss
index 866602a1a..8e31498a0 100755
--- a/projects/forms/src/components/date-time-picker/components/date-picker-months/date-picker-months.component.scss
+++ b/projects/forms/src/components/date-time-picker/components/date-picker-months/date-picker-months.component.scss
@@ -1,7 +1,7 @@
 @use '../../date-picker.style.scss';
 @use 'mixins';
 
-$max-height_container: 178px;
+$max-height_container: 44.5rem;
 
 :host {
   @include mixins.flex-container(row, flex-start, space-between, wrap);
diff --git a/projects/forms/src/components/date-time-picker/components/date-picker-simple-time/date-picker-simple-time.component.scss b/projects/forms/src/components/date-time-picker/components/date-picker-simple-time/date-picker-simple-time.component.scss
index 1f952d530..1a36b6e7d 100755
--- a/projects/forms/src/components/date-time-picker/components/date-picker-simple-time/date-picker-simple-time.component.scss
+++ b/projects/forms/src/components/date-time-picker/components/date-picker-simple-time/date-picker-simple-time.component.scss
@@ -1,7 +1,7 @@
 @use 'functions';
 
-$width_time-seconds: 110px;
-$width_time: 74px;
+$width_time-seconds: 27.5rem;
+$width_time: 18.5rem;
 
 .pupa-container {
   display: flex;
diff --git a/projects/forms/src/components/date-time-picker/components/date-picker-years/date-picker-years.component.scss b/projects/forms/src/components/date-time-picker/components/date-picker-years/date-picker-years.component.scss
index 173db3ec3..eee8298af 100755
--- a/projects/forms/src/components/date-time-picker/components/date-picker-years/date-picker-years.component.scss
+++ b/projects/forms/src/components/date-time-picker/components/date-picker-years/date-picker-years.component.scss
@@ -2,7 +2,7 @@
 
 @use '../../date-picker.style.scss';
 
-$max-height_container: 178px;
+$max-height_container: 44.5rem;
 
 :host {
   @include mixins.flex-container(row, flex-start, space-between, wrap);
diff --git a/projects/forms/src/components/date-time-picker/components/date-picker/date-picker.component.scss b/projects/forms/src/components/date-time-picker/components/date-picker/date-picker.component.scss
index 8824a9b2c..7187aa668 100755
--- a/projects/forms/src/components/date-time-picker/components/date-picker/date-picker.component.scss
+++ b/projects/forms/src/components/date-time-picker/components/date-picker/date-picker.component.scss
@@ -1,9 +1,9 @@
 @use '../../date-picker.style.scss';
 
-$width_double-calendar: 488px;
-$width_simple-time-seconds-calendar: 355px;
-$width_simple-time-calendar: 319px;
-$width_simple-calendar: 244px;
+$width_double-calendar: 122rem;
+$width_simple-time-seconds-calendar: 88.75rem;
+$width_simple-time-calendar: 79.75rem;
+$width_simple-calendar: 61rem;
 
 :host {
   display: contents;
diff --git a/projects/forms/src/components/date-time-picker/date-picker.style.scss b/projects/forms/src/components/date-time-picker/date-picker.style.scss
index d9c04c2fd..2dab33295 100644
--- a/projects/forms/src/components/date-time-picker/date-picker.style.scss
+++ b/projects/forms/src/components/date-time-picker/date-picker.style.scss
@@ -3,18 +3,18 @@
 
 $padding_days-area-container: 0 4rem 2rem 4rem;
 $padding_days-area: 0 4rem;
-$margin_days-line: 0 0 6px 0;
+$margin_days-line: 0 0 1.5rem 0;
 $width_days-line-item: calc(100% / 7);
 $font-size_days-line-item: 3rem;
 $font-weight_days-line-item: 600;
-$height_date: 24px;
+$height_date: 6rem;
 $box-shadow: 0 2rem 8rem 0 rgba(0, 0, 0, 0.1);
 
 $width_year: calc(100% / 5);
-$height_year: 24px;
+$height_year: 6rem;
 
-$width_month: 64px;
-$height_month: 24px;
+$width_month: 16rem;
+$height_month: 6rem;
 
 .pupa-date-picker {
   all: unset;
@@ -24,7 +24,7 @@ $height_month: 24px;
   @include mixins.flex-container(column, stretch, stretch, nowrap);
 
   &__header {
-    height: 36px;
+    height: 9rem;
     width: 100%;
     box-sizing: border-box;
     padding: $padding_days-area;
@@ -100,7 +100,7 @@ $height_month: 24px;
   width: $width_days-line-item;
   height: $height_date;
 
-  margin-bottom: 6px;
+  margin-bottom: 1.5rem;
 
   padding: 0;
 
@@ -248,7 +248,7 @@ $height_month: 24px;
   width: $width_year;
   height: $height_year;
   font-size: $font-size_days-line-item;
-  margin: 3px 0;
+  margin: 0.75rem 0;
   color: functions.semantic-color(kind-opacity-normal);
   line-height: 4rem;
   font-weight: normal;
@@ -284,7 +284,7 @@ $height_month: 24px;
   width: $width_month;
   height: $height_month;
   font-size: $font-size_days-line-item;
-  margin: 3px 0;
+  margin: 0.75rem 0;
   color: functions.semantic-color(text-primary);
   line-height: 4rem;
   font-weight: normal;
diff --git a/projects/forms/src/components/date-time-picker/time-picker.style.scss b/projects/forms/src/components/date-time-picker/time-picker.style.scss
index bef104b15..118873d11 100644
--- a/projects/forms/src/components/date-time-picker/time-picker.style.scss
+++ b/projects/forms/src/components/date-time-picker/time-picker.style.scss
@@ -2,11 +2,11 @@
 @use 'functions';
 
 $font-size__digit: 3.5rem;
-$max-height__container: 235px;
-$box-shadow: 0 2rem 24px 0 rgba(0, 0, 0, 0.1);
-$height_gradient: 38px;
-$width_time-picker: 80px;
-$width_time-picker-seconds: 112px;
+$max-height__container: 58.75rem;
+$box-shadow: 0 2rem 6rem 0 rgba(0, 0, 0, 0.1);
+$height_gradient: 9.5rem;
+$width_time-picker: 9.5rem;
+$width_time-picker-seconds: 28rem;
 $linear-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
 
 .pupa-time-picker {
diff --git a/projects/forms/src/components/day-selector/components/day-selector-item/day-selector-item.component.scss b/projects/forms/src/components/day-selector/components/day-selector-item/day-selector-item.component.scss
index dfc5928c9..6c4bb66f5 100644
--- a/projects/forms/src/components/day-selector/components/day-selector-item/day-selector-item.component.scss
+++ b/projects/forms/src/components/day-selector/components/day-selector-item/day-selector-item.component.scss
@@ -67,7 +67,7 @@ $box-shadow-selector-item-color: rgba(0, 0, 0, 0.08);
   }
 
   &.pupa-selected &__content {
-    box-shadow: 1px 1px 5px $box-shadow-selector-item-color;
+    box-shadow: 0.25rem 0.25rem 1.25rem $box-shadow-selector-item-color;
 
     background: functions.semantic-color(surface-secondary);
   }
diff --git a/projects/forms/src/components/droppable/components/droppable-content/droppable-content.component.scss b/projects/forms/src/components/droppable/components/droppable-content/droppable-content.component.scss
index 894786ad5..475cb8a27 100644
--- a/projects/forms/src/components/droppable/components/droppable-content/droppable-content.component.scss
+++ b/projects/forms/src/components/droppable/components/droppable-content/droppable-content.component.scss
@@ -3,7 +3,7 @@
 .pupa-droppable-content {
   padding: 1rem 0;
   border-radius: 1rem;
-  max-width: 500px;
+  max-width: 125rem;
   max-height: 70rem;
   overflow: auto;
   box-shadow: functions.variable(box-shadow_hover);
diff --git a/projects/forms/src/components/radio-group/components/radio-image-control/radio-image-control.component.scss b/projects/forms/src/components/radio-group/components/radio-image-control/radio-image-control.component.scss
index adbe9cc0d..e019c6388 100644
--- a/projects/forms/src/components/radio-group/components/radio-image-control/radio-image-control.component.scss
+++ b/projects/forms/src/components/radio-group/components/radio-image-control/radio-image-control.component.scss
@@ -7,7 +7,7 @@
   align-items: flex-start;
   justify-content: flex-start;
   cursor: pointer;
-  border-radius: 1px;
+  border-radius: 0.25rem;
   gap: 2rem;
   padding: 3rem;
   position: relative;
@@ -15,7 +15,7 @@
     functions.variable(transition-timing-function_common);
 
   &_selected:not(&_disabled) {
-    box-shadow: 0 0 0 1px functions.semantic-color(kind-primary-normal);
+    box-shadow: 0 0 0 0.25rem functions.semantic-color(kind-primary-normal);
     border-radius: 1rem;
   }
 
@@ -38,7 +38,7 @@
     cursor: not-allowed;
 
     &.pupa-radio-image-control_selected {
-      box-shadow: 0 0 0 1px functions.semantic-color(lines-opacity);
+      box-shadow: 0 0 0 0.25rem functions.semantic-color(lines-opacity);
       border-radius: 1rem;
     }
   }
diff --git a/projects/forms/src/components/select/components/select-option/select-option.component.html b/projects/forms/src/components/select/components/select-option/select-option.component.html
index f40707a93..9fe1a8be0 100644
--- a/projects/forms/src/components/select/components/select-option/select-option.component.html
+++ b/projects/forms/src/components/select/components/select-option/select-option.component.html
@@ -1,4 +1,4 @@
-<div [style.height.px]="heightPx" (click)="processClick()">
+<div [style.height.rem]="heightRem" (click)="processClick()">
   <pupa-option
     [active]="isPicked$ | async"
     [disabled]="isDisabled$ | async"
diff --git a/projects/forms/src/components/select/components/select-option/select-option.component.ts b/projects/forms/src/components/select/components/select-option/select-option.component.ts
index 1a920e164..fc214ae46 100644
--- a/projects/forms/src/components/select/components/select-option/select-option.component.ts
+++ b/projects/forms/src/components/select/components/select-option/select-option.component.ts
@@ -17,7 +17,7 @@ export class SelectOptionComponent<T> extends SelectOptionBase<T> implements OnD
   @Input() public isDisabled: boolean = false;
   @Input() public hasCheckbox: boolean = false;
 
-  @Input() public heightPx: number = 32;
+  @Input() public heightRem: number = 8;
 
   public readonly isOpened$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
diff --git a/projects/forms/src/components/select/components/select-options-container/select-options-container.component.html b/projects/forms/src/components/select/components/select-options-container/select-options-container.component.html
index 5f786be91..4757a0c7c 100644
--- a/projects/forms/src/components/select/components/select-options-container/select-options-container.component.html
+++ b/projects/forms/src/components/select/components/select-options-container/select-options-container.component.html
@@ -1,3 +1,3 @@
-<section class="pupa-options-container" [style.height.px]="fixedHeightPx">
+<section class="pupa-options-container" [style.height.rem]="fixedHeightRem">
   <ng-content></ng-content>
 </section>
diff --git a/projects/forms/src/components/select/components/select-options-container/select-options-container.component.ts b/projects/forms/src/components/select/components/select-options-container/select-options-container.component.ts
index 58e796960..30c3d5587 100644
--- a/projects/forms/src/components/select/components/select-options-container/select-options-container.component.ts
+++ b/projects/forms/src/components/select/components/select-options-container/select-options-container.component.ts
@@ -10,7 +10,7 @@ import { SelectOptionsContainerBase } from '../../../../declarations/classes/abs
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectOptionsContainerComponent extends SelectOptionsContainerBase {
-  @Input() public fixedHeightPx: number = null;
+  @Input() public fixedHeightRem: number = null;
 
   @HostListener('click', ['$event'])
   @HostListener('touchstart', ['$event'])
diff --git a/projects/forms/src/components/select/components/select-trigger-input/select-trigger-input.component.html b/projects/forms/src/components/select/components/select-trigger-input/select-trigger-input.component.html
index efedbe23a..037f488d1 100644
--- a/projects/forms/src/components/select/components/select-trigger-input/select-trigger-input.component.html
+++ b/projects/forms/src/components/select/components/select-trigger-input/select-trigger-input.component.html
@@ -19,7 +19,7 @@
     <input
       type="text"
       class="pupa-trigger__input"
-      [style.paddingRight.px]="rightPaddingPx$ | async"
+      [style.paddingRight.rem]="rightPaddingRem$ | async"
       [placeholder]="placeholder"
       #inputElement
       [formControl]="control"
diff --git a/projects/forms/src/components/select/components/select-trigger-tags/select-trigger-tags.component.html b/projects/forms/src/components/select/components/select-trigger-tags/select-trigger-tags.component.html
index 51726600d..2470b2e80 100644
--- a/projects/forms/src/components/select/components/select-trigger-tags/select-trigger-tags.component.html
+++ b/projects/forms/src/components/select/components/select-trigger-tags/select-trigger-tags.component.html
@@ -14,7 +14,7 @@
   #overlayOrigin="cdkOverlayOrigin"
   #button
 >
-  <div class="pupa-trigger__text" [style.paddingRight.px]="rightPaddingPx$ | async">
+  <div class="pupa-trigger__text" [style.paddingRight.rem]="rightPaddingRem$ | async">
     <ng-container *ngIf="triggerValueIsVisible$ | async; else placeholder">
       <div class="pupa-tags-container" #tagsContainer [style.gap.px]="tagsContainerGap">
         <div
diff --git a/projects/forms/src/components/select/components/select-trigger-tags/select-trigger-tags.component.scss b/projects/forms/src/components/select/components/select-trigger-tags/select-trigger-tags.component.scss
index e29499f61..adedeb61f 100644
--- a/projects/forms/src/components/select/components/select-trigger-tags/select-trigger-tags.component.scss
+++ b/projects/forms/src/components/select/components/select-trigger-tags/select-trigger-tags.component.scss
@@ -26,7 +26,7 @@
 }
 
 .pupa-tag {
-  max-width: min(170px, calc(var(--tags-container-width-px) - 1rem));
+  max-width: min(42.5rem, calc(var(--tags-container-width-px) - 1rem));
 
   &.pupa-is-one {
     max-width: 100%;
diff --git a/projects/forms/src/components/select/components/select-trigger/select-trigger.component.html b/projects/forms/src/components/select/components/select-trigger/select-trigger.component.html
index 633c33e42..832b59912 100644
--- a/projects/forms/src/components/select/components/select-trigger/select-trigger.component.html
+++ b/projects/forms/src/components/select/components/select-trigger/select-trigger.component.html
@@ -13,7 +13,7 @@
   #overlayOrigin="cdkOverlayOrigin"
   #button
 >
-  <div class="pupa-trigger__text" [style.paddingRight.px]="rightPaddingPx$ | async">
+  <div class="pupa-trigger__text" [style.paddingRight.rem]="rightPaddingRem$ | async">
     <ng-container *ngIf="triggerValueIsVisible$ | async; else placeholder">
       <ng-content></ng-content>
     </ng-container>
diff --git a/projects/forms/src/components/select/select-trigger.style.scss b/projects/forms/src/components/select/select-trigger.style.scss
index 0bd4cfcef..f87afc99b 100644
--- a/projects/forms/src/components/select/select-trigger.style.scss
+++ b/projects/forms/src/components/select/select-trigger.style.scss
@@ -15,7 +15,7 @@
   box-sizing: border-box;
   cursor: pointer;
   width: 100%;
-  padding-right: 14px;
+  padding-right: 3.5rem;
 
   border-radius: variables.$controlBorderRadius;
   border: 1px solid functions.semantic-color(lines-opacity);
@@ -30,7 +30,7 @@
 
   &.large {
     height: 10rem;
-    padding: 9px 3rem;
+    padding: 2.25rem 3rem;
 
     ~ .pupa-icons .pupa-icons__icon {
       @extend .pupa-icons__icon_large;
@@ -39,7 +39,7 @@
 
   &.medium {
     height: 8rem;
-    padding: 5px 2rem;
+    padding: 1.25rem 2rem;
 
     ~ .pupa-icons .pupa-icons__icon {
       @extend .pupa-icons__icon_medium;
@@ -141,11 +141,11 @@
   z-index: 3;
   position: absolute;
   overflow: hidden;
-  top: 1px;
-  bottom: 1px;
+  top: 0.25rem;
+  bottom: 0.25rem;
   right: 9rem;
   box-sizing: border-box;
-  height: calc(100% - 2px);
+  height: calc(100% - 0.5rem);
   width: fit-content;
   background-color: transparent;
   gap: 1.5rem;
diff --git a/projects/forms/src/components/switcher/components/switcher/switcher.component.scss b/projects/forms/src/components/switcher/components/switcher/switcher.component.scss
index 6bc903d24..764218395 100755
--- a/projects/forms/src/components/switcher/components/switcher/switcher.component.scss
+++ b/projects/forms/src/components/switcher/components/switcher/switcher.component.scss
@@ -19,7 +19,7 @@
   &__marker {
     background-color: functions.semantic-color(surface-primary);
     border-radius: 50%;
-    box-shadow: 0px 0px 1rem functions.semantic-color(kind-opacity-normal);
+    box-shadow: 0 0 1rem functions.semantic-color(kind-opacity-normal);
 
     transition: transform functions.variable(transition-duration_shorter)
         functions.variable(transition-timing-function_common),
diff --git a/projects/forms/src/components/textarea/components/textarea-inline/textarea-inline.component.scss b/projects/forms/src/components/textarea/components/textarea-inline/textarea-inline.component.scss
index 723ad629d..b9c5b69e1 100644
--- a/projects/forms/src/components/textarea/components/textarea-inline/textarea-inline.component.scss
+++ b/projects/forms/src/components/textarea/components/textarea-inline/textarea-inline.component.scss
@@ -90,7 +90,7 @@
 .pupa-overlay-container {
   width: 100%;
   height: 100%;
-  padding-left: 8px;
+  padding-left: 2rem;
   box-sizing: border-box;
 
   .pupa-overlay-textarea {
@@ -111,10 +111,10 @@
 
   @include mixins.xs() {
     position: fixed;
-    bottom: 16px;
+    bottom: 4rem;
     left: 0;
     height: auto;
-    padding: 0 20px 32px 20px;
+    padding: 0 5rem 8rem 5rem;
 
     .pupa-textarea {
       transform: none;
@@ -129,7 +129,7 @@
 }
 
 .pupa-textarea {
-  box-shadow: 0 8px 24px rgba(0, 23, 32, 0.04);
+  box-shadow: 0 2rem 6rem rgba(0, 23, 32, 0.04);
 
   &__pseudo-content,
   &__control {
diff --git a/projects/forms/src/components/textarea/textarea.styles.scss b/projects/forms/src/components/textarea/textarea.styles.scss
index e9853c46d..513bb0b0c 100644
--- a/projects/forms/src/components/textarea/textarea.styles.scss
+++ b/projects/forms/src/components/textarea/textarea.styles.scss
@@ -173,7 +173,7 @@
   display: block;
   text-align: right;
   width: 100%;
-  margin-top: 2px;
+  margin-top: 0.5rem;
   @include mixins.font-size-xxs();
   color: functions.semantic-color(text-secondary);
 
diff --git a/projects/forms/src/declarations/classes/abstract/select-trigger-base.abstract.ts b/projects/forms/src/declarations/classes/abstract/select-trigger-base.abstract.ts
index 370e22e40..f508b6138 100644
--- a/projects/forms/src/declarations/classes/abstract/select-trigger-base.abstract.ts
+++ b/projects/forms/src/declarations/classes/abstract/select-trigger-base.abstract.ts
@@ -6,7 +6,7 @@ import { map, switchMap, take } from 'rxjs/operators';
 import { SelectStateServiceDeclaration } from '../../interfaces/select-state-service-declaration.interface';
 import { SelectSize } from '../../types/select-size.type';
 
-const BUTTON_WIDTH_PX: number = 24;
+const BUTTON_WIDTH_REM: number = 6;
 
 @Directive()
 export abstract class SelectTriggerBase<T> implements OnInit, AfterViewInit {
@@ -73,9 +73,9 @@ export abstract class SelectTriggerBase<T> implements OnInit, AfterViewInit {
     )
   );
 
-  public readonly rightPaddingPx$: Observable<number> = combineLatest([this.isInvalid$, this.isVisibleReset$]).pipe(
+  public readonly rightPaddingRem$: Observable<number> = combineLatest([this.isInvalid$, this.isVisibleReset$]).pipe(
     map((states: boolean[]) =>
-      states.reduce((width: number, state: boolean) => (state ? width + BUTTON_WIDTH_PX : width), 0)
+      states.reduce((width: number, state: boolean) => (state ? width + BUTTON_WIDTH_REM : width), 0)
     )
   );
 
diff --git a/projects/kit/src/components/accordion/components/accordion/accordion.component.scss b/projects/kit/src/components/accordion/components/accordion/accordion.component.scss
index 46d930bbe..3349f9c37 100644
--- a/projects/kit/src/components/accordion/components/accordion/accordion.component.scss
+++ b/projects/kit/src/components/accordion/components/accordion/accordion.component.scss
@@ -23,7 +23,7 @@
   &_border-bottom {
     &:not(:hover) {
       border-radius: 0;
-      box-shadow: 0 1px 0 0 functions.semantic-color(lines-normal);
+      box-shadow: 0 0.25rem 0 0 functions.semantic-color(lines-normal);
     }
   }
 
diff --git a/projects/kit/src/components/badge/components/badge-marker/badge-marker.component.scss b/projects/kit/src/components/badge/components/badge-marker/badge-marker.component.scss
index 634711b57..63760d915 100644
--- a/projects/kit/src/components/badge/components/badge-marker/badge-marker.component.scss
+++ b/projects/kit/src/components/badge/components/badge-marker/badge-marker.component.scss
@@ -2,7 +2,7 @@
 
 .pupa-badge {
   position: absolute;
-  left: calc(100% - 2px);
+  left: calc(100% - 0.5rem);
   @include mixins.ellipsis-text-overflow;
 
   &__small {
diff --git a/projects/kit/src/components/button-group/components/button-group-item/button-group-item.component.scss b/projects/kit/src/components/button-group/components/button-group-item/button-group-item.component.scss
index c192f266e..d77200102 100644
--- a/projects/kit/src/components/button-group/components/button-group-item/button-group-item.component.scss
+++ b/projects/kit/src/components/button-group/components/button-group-item/button-group-item.component.scss
@@ -30,7 +30,7 @@
     background-color: transparent;
     color: functions.semantic-color(text-primary);
 
-    box-shadow: 0 2px 8px functions.color(neutral-1000, alpha-3);
+    box-shadow: 0 0.5rem 2rem functions.color(neutral-1000, alpha-3);
   }
 
   &_disabled {
@@ -43,7 +43,7 @@
   }
 
   &_m {
-    padding: 5px 4rem;
+    padding: 1.25rem 4rem;
   }
 
   &_s {
diff --git a/projects/kit/src/components/button-group/components/button-group/button-group.component.scss b/projects/kit/src/components/button-group/components/button-group/button-group.component.scss
index 83baa5449..612816f44 100644
--- a/projects/kit/src/components/button-group/components/button-group/button-group.component.scss
+++ b/projects/kit/src/components/button-group/components/button-group/button-group.component.scss
@@ -1,7 +1,7 @@
 @use 'functions';
 @use 'variables';
 
-$container-padding: 4px;
+$container-padding: 1rem;
 
 :host {
   display: block;
@@ -13,15 +13,15 @@ $container-padding: 4px;
 
 .pupa-button-group {
   &_l {
-    --container-padding: 4px;
+    --container-padding: 1rem;
   }
 
   &_m {
-    --container-padding: 3px;
+    --container-padding: 0.75rem;
   }
 
   &_s {
-    --container-padding: 2px;
+    --container-padding: 0.5rem;
   }
 
   &__container {
diff --git a/projects/kit/src/components/buttons/components/button-icon/button-icon.component.html b/projects/kit/src/components/buttons/components/button-icon/button-icon.component.html
index 034861f17..273660572 100644
--- a/projects/kit/src/components/buttons/components/button-icon/button-icon.component.html
+++ b/projects/kit/src/components/buttons/components/button-icon/button-icon.component.html
@@ -15,6 +15,6 @@
   </div>
 
   <div class="pupa-button__loading" *ngIf="loading$ | async" focusable="false">
-    <pupa-loader [size]="loadingSizePx$ | async"></pupa-loader>
+    <pupa-loader [size]="loadingSizeRem$ | async"></pupa-loader>
   </div>
 </button>
diff --git a/projects/kit/src/components/buttons/components/button-icon/button-icon.component.ts b/projects/kit/src/components/buttons/components/button-icon/button-icon.component.ts
index 71fbfe1ce..a2d6460cd 100644
--- a/projects/kit/src/components/buttons/components/button-icon/button-icon.component.ts
+++ b/projects/kit/src/components/buttons/components/button-icon/button-icon.component.ts
@@ -38,8 +38,8 @@ export class ButtonIconComponent implements OnChanges {
 
   @Input() public tabIndex: string = '0';
 
-  public readonly loadingSizePx$: Observable<string> = this.size$.pipe(
-    map((size: ButtonSize) => (size === 's' ? '12px' : '16px'))
+  public readonly loadingSizeRem$: Observable<string> = this.size$.pipe(
+    map((size: ButtonSize) => (size === 's' ? '3rem' : '4rem'))
   );
 
   public readonly resultClassList$: Observable<string[]> = combineLatest([
diff --git a/projects/kit/src/components/buttons/components/button-multi/button-multi.component.html b/projects/kit/src/components/buttons/components/button-multi/button-multi.component.html
index a3c19af72..ab8b952b3 100644
--- a/projects/kit/src/components/buttons/components/button-multi/button-multi.component.html
+++ b/projects/kit/src/components/buttons/components/button-multi/button-multi.component.html
@@ -19,7 +19,7 @@
       </ng-container>
     </div>
     <div *ngIf="loading$ | async" class="pupa-button__loading" focusable="false">
-      <pupa-loader [size]="'16px'"></pupa-loader>
+      <pupa-loader size="4rem"></pupa-loader>
     </div>
   </button>
   <button
diff --git a/projects/kit/src/components/buttons/components/button-round/button-round.component.html b/projects/kit/src/components/buttons/components/button-round/button-round.component.html
index e4bcfc249..44529d1c9 100644
--- a/projects/kit/src/components/buttons/components/button-round/button-round.component.html
+++ b/projects/kit/src/components/buttons/components/button-round/button-round.component.html
@@ -15,6 +15,6 @@
   </div>
 
   <div *ngIf="loading$ | async" class="pupa-button__loading" focusable="false">
-    <pupa-loader [size]="'24px'"></pupa-loader>
+    <pupa-loader size="6rem"></pupa-loader>
   </div>
 </button>
diff --git a/projects/kit/src/components/buttons/components/button/button.component.html b/projects/kit/src/components/buttons/components/button/button.component.html
index ccf8329ef..4cfb6d666 100644
--- a/projects/kit/src/components/buttons/components/button/button.component.html
+++ b/projects/kit/src/components/buttons/components/button/button.component.html
@@ -20,6 +20,6 @@
   </div>
 
   <div class="pupa-button__loading" *ngIf="loading$ | async" focusable="false">
-    <pupa-loader [size]="loadingSizePx$ | async"></pupa-loader>
+    <pupa-loader [size]="loadingSizeRem$ | async"></pupa-loader>
   </div>
 </button>
diff --git a/projects/kit/src/components/buttons/components/button/button.component.ts b/projects/kit/src/components/buttons/components/button/button.component.ts
index 6fc947685..d163e9e24 100644
--- a/projects/kit/src/components/buttons/components/button/button.component.ts
+++ b/projects/kit/src/components/buttons/components/button/button.component.ts
@@ -62,8 +62,8 @@ export class ButtonComponent implements OnChanges {
     this.disabled$.pipe(map((isDisabled: boolean) => (isDisabled ? 'disabled' : null))),
   ];
 
-  public readonly loadingSizePx$: Observable<string> = this.size$.pipe(
-    map((size: ButtonSize) => (size === 's' ? '12px' : '16px'))
+  public readonly loadingSizeRem$: Observable<string> = this.size$.pipe(
+    map((size: ButtonSize) => (size === 's' ? '3rem' : '4rem'))
   );
 
   public readonly resultClassList$: Observable<string[]> = combineLatest([
diff --git a/projects/kit/src/components/card/components/card-container/card-container.component.scss b/projects/kit/src/components/card/components/card-container/card-container.component.scss
index 035909acb..6a46cbe38 100644
--- a/projects/kit/src/components/card/components/card-container/card-container.component.scss
+++ b/projects/kit/src/components/card/components/card-container/card-container.component.scss
@@ -21,7 +21,7 @@ $disabled-shadow-color: rgba(33, 33, 33, 0.05);
 
   border-radius: variables.$controlBorderRadius;
   border: 2px solid transparent;
-  box-shadow: 2px 3px 8px $normal-shadow-color;
+  box-shadow: 0.5rem 0.75rem 2rem $normal-shadow-color;
   outline: none;
 
   background-color: functions.semantic-color(surface-secondary);
@@ -29,12 +29,12 @@ $disabled-shadow-color: rgba(33, 33, 33, 0.05);
 
   &_disabled {
     color: functions.semantic-color(text-disabled);
-    box-shadow: 0 1px 7px $disabled-shadow-color;
+    box-shadow: 0 0.25rem 1.75rem $disabled-shadow-color;
   }
 
   &:not(.pupa-container_disabled) {
     @include mixins.hover() {
-      box-shadow: 2px 3px 10px $hover-shadow-color;
+      box-shadow: 0.5rem 0.75rem 2.5rem $hover-shadow-color;
     }
   }
 
diff --git a/projects/kit/src/components/checkbox/components/checkbox/checkbox.component.scss b/projects/kit/src/components/checkbox/components/checkbox/checkbox.component.scss
index 5b9a5e849..fe2d3d686 100755
--- a/projects/kit/src/components/checkbox/components/checkbox/checkbox.component.scss
+++ b/projects/kit/src/components/checkbox/components/checkbox/checkbox.component.scss
@@ -82,7 +82,7 @@
   height: 3.5rem;
   border: 1px solid functions.semantic-color(icons-secondary);
   box-sizing: border-box;
-  border-radius: 1px;
+  border-radius: 0.25rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -107,7 +107,7 @@
       &.pupa-checkbox__marker_checked {
         border: none;
         outline: 2px solid functions.semantic-color(lines-accent);
-        outline-offset: 1px;
+        outline-offset: 0.25rem;
         background: functions.semantic-color(kind-danger-normal);
       }
     }
diff --git a/projects/kit/src/components/dropdown/components/dropdown-template/dropdown-template.component.scss b/projects/kit/src/components/dropdown/components/dropdown-template/dropdown-template.component.scss
index 71630e4b0..95ac7231d 100644
--- a/projects/kit/src/components/dropdown/components/dropdown-template/dropdown-template.component.scss
+++ b/projects/kit/src/components/dropdown/components/dropdown-template/dropdown-template.component.scss
@@ -14,7 +14,7 @@
   color: functions.semantic-color(text-primary);
   box-sizing: border-box;
 
-  filter: drop-shadow(0px 14px 24px functions.color(neutral-1000, alpha-3));
+  filter: drop-shadow(0 3.5rem 6rem functions.color(neutral-1000, alpha-3));
 
   @include mixins.blur();
 
diff --git a/projects/kit/src/components/layout/components/layout/layout.component.html b/projects/kit/src/components/layout/components/layout/layout.component.html
index a5fe0f5b5..b704e961f 100644
--- a/projects/kit/src/components/layout/components/layout/layout.component.html
+++ b/projects/kit/src/components/layout/components/layout/layout.component.html
@@ -15,7 +15,7 @@
       [style.left.px]="loaderOverlayLeftOffsetPx$ | async"
       *ngIf="isLoaderVisible$ | async"
     >
-      <pupa-loader [size]="'48px'"></pupa-loader>
+      <pupa-loader size="12rem"></pupa-loader>
     </div>
   </div>
 </div>
diff --git a/projects/kit/src/components/link/components/link/link.component.scss b/projects/kit/src/components/link/components/link/link.component.scss
index f6f6c0863..623731b54 100644
--- a/projects/kit/src/components/link/components/link/link.component.scss
+++ b/projects/kit/src/components/link/components/link/link.component.scss
@@ -71,7 +71,7 @@
       .pupa-substrate {
         border-width: 1px;
         border-style: solid;
-        border-radius: 2px;
+        border-radius: 0.5rem;
 
         border-color: functions.semantic-color(lines-accent);
       }
@@ -87,7 +87,7 @@
 .pupa-substrate {
   position: absolute;
   width: calc(100% + 2rem);
-  height: calc(100% + 2px);
+  height: calc(100% + 0.5rem);
   top: 0;
   left: -1rem;
   z-index: 2;
diff --git a/projects/kit/src/components/loader/components/loader/loader.component.scss b/projects/kit/src/components/loader/components/loader/loader.component.scss
index d003af220..eccfa789f 100644
--- a/projects/kit/src/components/loader/components/loader/loader.component.scss
+++ b/projects/kit/src/components/loader/components/loader/loader.component.scss
@@ -52,8 +52,8 @@
     animation: 0.86s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite pupa-rotate;
 
     &_scale {
-      stroke-dasharray: 80px;
-      stroke-dashoffset: 65px;
+      stroke-dasharray: 20rem;
+      stroke-dashoffset: 16.25rem;
     }
 
     &_default {
diff --git a/projects/kit/src/components/loader/components/loader/loader.component.ts b/projects/kit/src/components/loader/components/loader/loader.component.ts
index 05c40bf64..ec26859a4 100644
--- a/projects/kit/src/components/loader/components/loader/loader.component.ts
+++ b/projects/kit/src/components/loader/components/loader/loader.component.ts
@@ -1,8 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
-import { ComponentChanges, Loader, LoaderKind } from '@bimeister/pupakit.common';
+import { ComponentChanges, Loader, LoaderKind, SizeRem } from '@bimeister/pupakit.common';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 
+type LoaderSize = SizeRem | 'inherit';
+
 const DEFAULT_RADIUS: number = 10;
 
 @Component({
@@ -12,8 +14,8 @@ const DEFAULT_RADIUS: number = 10;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoaderComponent implements OnChanges {
-  @Input() public size: string = 'inherit';
-  public readonly size$: BehaviorSubject<string> = new BehaviorSubject<string>('inherit');
+  @Input() public size: LoaderSize = 'inherit';
+  public readonly size$: BehaviorSubject<LoaderSize> = new BehaviorSubject<LoaderSize>('inherit');
 
   @Input() public type: Loader = 'indeterminate';
   public readonly type$: BehaviorSubject<Loader> = new BehaviorSubject<Loader>('indeterminate');
diff --git a/projects/kit/src/components/status/components/status/status.component.scss b/projects/kit/src/components/status/components/status/status.component.scss
index ad74cad01..2caca6164 100644
--- a/projects/kit/src/components/status/components/status/status.component.scss
+++ b/projects/kit/src/components/status/components/status/status.component.scss
@@ -19,7 +19,7 @@
   &__marker {
     min-width: 1rem;
     width: 1rem;
-    border-radius: 100px;
+    border-radius: 25rem;
     transition: all 0.2s ease;
 
     &_line {
@@ -31,7 +31,7 @@
       min-width: 1.5rem;
       height: 1.5rem;
       width: 1.5rem;
-      border-radius: 1px;
+      border-radius: 0.25rem;
     }
 
     &_dot {
diff --git a/projects/kit/src/components/tabs/components/tabs/tabs.component.scss b/projects/kit/src/components/tabs/components/tabs/tabs.component.scss
index 3bd5b2f45..98fdc9af9 100644
--- a/projects/kit/src/components/tabs/components/tabs/tabs.component.scss
+++ b/projects/kit/src/components/tabs/components/tabs/tabs.component.scss
@@ -20,7 +20,7 @@
   &__rail-container {
     position: absolute;
     left: 0;
-    bottom: -1px;
+    bottom: -0.25rem;
     width: 100%;
     overflow-x: hidden;
   }
@@ -39,7 +39,7 @@
 
   &__highlighter {
     width: 0;
-    height: 2px;
+    height: 0.5rem;
     background-color: functions.semantic-color(kind-primary-normal);
     transition: 0.25s ease-in-out;
   }
diff --git a/projects/kit/src/components/tag/components/tag-action-button/tag-action-button.component.scss b/projects/kit/src/components/tag/components/tag-action-button/tag-action-button.component.scss
index 076a3298f..2eb337396 100644
--- a/projects/kit/src/components/tag/components/tag-action-button/tag-action-button.component.scss
+++ b/projects/kit/src/components/tag/components/tag-action-button/tag-action-button.component.scss
@@ -9,7 +9,7 @@
   height: 5rem;
   color: functions.semantic-color(text-inverse);
   box-sizing: content-box;
-  line-height: 14px;
+  line-height: 3.5rem;
 
   cursor: pointer;
 
diff --git a/projects/kit/src/components/tooltip/components/tooltip-content/tooltip-content.component.ts b/projects/kit/src/components/tooltip/components/tooltip-content/tooltip-content.component.ts
index d7c600934..81341d355 100644
--- a/projects/kit/src/components/tooltip/components/tooltip-content/tooltip-content.component.ts
+++ b/projects/kit/src/components/tooltip/components/tooltip-content/tooltip-content.component.ts
@@ -16,7 +16,7 @@ import { distinctUntilChanged, map, take, withLatestFrom } from 'rxjs/operators'
 import { TOOLTIP_SERVICE_TOKEN } from '../../../../declarations/tokens/tooltip-service.token';
 import { TooltipServiceDeclaration } from '../../../../declarations/interfaces/tooltip-service-declaration.interface';
 
-const OFFSET_PX: number = 4;
+const OFFSET_REM: number = 1;
 const ANIMATION: string = `200ms ease-in-out`;
 
 @Component({
@@ -88,9 +88,9 @@ export class TooltipContentComponent implements OnDestroy {
   }
 
   private calculateTooltipStyleTransform(): Subscription {
-    return zip(this.getTooltipOffsetXPx(), this.getTooltipOffsetYPx())
+    return zip(this.getTooltipOffsetXRem(), this.getTooltipOffsetYRem())
       .pipe(
-        map(([offsetXPx, offsetYPx]: [number, number]) => `translate(${offsetXPx}px, ${offsetYPx}px)`),
+        map(([offsetXRem, offsetYRem]: [number, number]) => `translate(${offsetXRem}rem, ${offsetYRem}rem)`),
         distinctUntilChanged()
       )
       .subscribe((transformStyle: string) => {
@@ -99,16 +99,16 @@ export class TooltipContentComponent implements OnDestroy {
       });
   }
 
-  private getTooltipOffsetXPx(): Observable<number> {
+  private getTooltipOffsetXRem(): Observable<number> {
     return this.tooltipPosition$.pipe(
       filterNotNil(),
       map((tooltipPosition: ConnectedOverlayPositionChange) => tooltipPosition.connectionPair),
       map((connectionPair: ConnectionPositionPair) => {
         switch (connectionPair.overlayX) {
           case 'end':
-            return -OFFSET_PX;
+            return -OFFSET_REM;
           case 'start':
-            return OFFSET_PX;
+            return OFFSET_REM;
           default:
             return 0;
         }
@@ -116,16 +116,16 @@ export class TooltipContentComponent implements OnDestroy {
     );
   }
 
-  private getTooltipOffsetYPx(): Observable<number> {
+  private getTooltipOffsetYRem(): Observable<number> {
     return this.tooltipPosition$.pipe(
       filterNotNil(),
       map((tooltipPosition: ConnectedOverlayPositionChange) => tooltipPosition.connectionPair),
       map((connectionPair: ConnectionPositionPair) => {
         switch (connectionPair.overlayY) {
           case 'bottom':
-            return -OFFSET_PX;
+            return -OFFSET_REM;
           case 'top':
-            return OFFSET_PX;
+            return OFFSET_REM;
           default:
             return 0;
         }
diff --git a/projects/overlays/src/components/alert/components/alert-layout-close-button/alert-layout-close-button.component.scss b/projects/overlays/src/components/alert/components/alert-layout-close-button/alert-layout-close-button.component.scss
index 00742324b..49f00dc2c 100644
--- a/projects/overlays/src/components/alert/components/alert-layout-close-button/alert-layout-close-button.component.scss
+++ b/projects/overlays/src/components/alert/components/alert-layout-close-button/alert-layout-close-button.component.scss
@@ -7,6 +7,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  top: 5px;
-  right: 5px;
+  top: 1.25rem;
+  right: 1.25rem;
 }
diff --git a/projects/overlays/src/components/alert/components/alert-layout-header/alert-layout-header.component.scss b/projects/overlays/src/components/alert/components/alert-layout-header/alert-layout-header.component.scss
index 9ce0c59c9..1f60e4107 100644
--- a/projects/overlays/src/components/alert/components/alert-layout-header/alert-layout-header.component.scss
+++ b/projects/overlays/src/components/alert/components/alert-layout-header/alert-layout-header.component.scss
@@ -7,5 +7,5 @@
   margin-bottom: 2rem;
   @include mixins.font-preset-h4;
   line-height: 1;
-  padding-right: 14px;
+  padding-right: 3.5rem;
 }
diff --git a/projects/overlays/src/components/alert/components/alert-layout/alert-layout.component.scss b/projects/overlays/src/components/alert/components/alert-layout/alert-layout.component.scss
index 11c27787a..c48980df6 100644
--- a/projects/overlays/src/components/alert/components/alert-layout/alert-layout.component.scss
+++ b/projects/overlays/src/components/alert/components/alert-layout/alert-layout.component.scss
@@ -21,7 +21,7 @@
 
 .pupa-alert-layout__color {
   flex-shrink: 0;
-  width: 3px;
+  width: 0.75rem;
   margin: 1rem 0 1rem 1rem;
 }
 
@@ -34,7 +34,7 @@
 
   margin-top: 4rem;
   margin-bottom: 4rem;
-  margin-right: 34px;
+  margin-right: 8.5rem;
 }
 
 .pupa-alert-layout_with-header {
diff --git a/projects/overlays/src/components/drawer/components/drawer-container/drawer-container.component.scss b/projects/overlays/src/components/drawer/components/drawer-container/drawer-container.component.scss
index 376729b6a..165277635 100644
--- a/projects/overlays/src/components/drawer/components/drawer-container/drawer-container.component.scss
+++ b/projects/overlays/src/components/drawer/components/drawer-container/drawer-container.component.scss
@@ -1,7 +1,7 @@
 @use 'mixins';
 @use 'functions';
 
-$drawer_padding: 8px;
+$drawer_padding: 2rem;
 
 .pupa-drawer-container {
   width: fit-content;
diff --git a/projects/overlays/src/components/drawer/components/drawer-layout-footer/drawer-layout-footer.component.scss b/projects/overlays/src/components/drawer/components/drawer-layout-footer/drawer-layout-footer.component.scss
index 62547975b..48a025786 100644
--- a/projects/overlays/src/components/drawer/components/drawer-layout-footer/drawer-layout-footer.component.scss
+++ b/projects/overlays/src/components/drawer/components/drawer-layout-footer/drawer-layout-footer.component.scss
@@ -8,7 +8,7 @@
   padding: 4rem 6rem;
   box-sizing: border-box;
 
-  box-shadow: 0 1px 0 0 inset functions.semantic-color(kind-neutral-normal);
+  box-shadow: 0 0.25rem 0 0 inset functions.semantic-color(kind-neutral-normal);
 
   @include mixins.xs() {
     padding: 2rem 5rem;
diff --git a/projects/overlays/src/components/drawer/components/drawer-layout-header-row/drawer-layout-header-row.component.scss b/projects/overlays/src/components/drawer/components/drawer-layout-header-row/drawer-layout-header-row.component.scss
index e36a0fc86..e9ed144de 100644
--- a/projects/overlays/src/components/drawer/components/drawer-layout-header-row/drawer-layout-header-row.component.scss
+++ b/projects/overlays/src/components/drawer/components/drawer-layout-header-row/drawer-layout-header-row.component.scss
@@ -18,7 +18,7 @@
     margin-bottom: 2rem;
 
     @include mixins.xs() {
-      box-shadow: 0 -1px 0 0 functions.semantic-color(kind-neutral-normal) inset;
+      box-shadow: 0 -0.25rem 0 0 functions.semantic-color(kind-neutral-normal) inset;
     }
   }
 }
diff --git a/projects/overlays/src/components/drawer/components/drawer-layout/drawer-layout.component.scss b/projects/overlays/src/components/drawer/components/drawer-layout/drawer-layout.component.scss
index 40d97363d..1c7c15468 100644
--- a/projects/overlays/src/components/drawer/components/drawer-layout/drawer-layout.component.scss
+++ b/projects/overlays/src/components/drawer/components/drawer-layout/drawer-layout.component.scss
@@ -32,7 +32,7 @@ $layout_border-size: 1px;
   box-sizing: border-box;
 
   &_with-shadow {
-    box-shadow: 0 4px 24px functions.color(neutral-1000, alpha-4);
+    box-shadow: 0 1rem 6rem functions.color(neutral-1000, alpha-4);
 
     @include mixins.host-selector-dark-theme() {
       box-shadow: none;
diff --git a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss
index c5a2117d2..007df899e 100644
--- a/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss
+++ b/projects/overlays/src/components/modal/components/modal-layout/modal-layout.component.scss
@@ -6,13 +6,13 @@
 :host {
   display: block;
   overflow: hidden;
-  max-width: 500px;
+  max-width: 125rem;
   border: 1px solid functions.semantic-color(lines-normal);
   border-radius: calc(variables.$controlBorderRadius + 1rem);
-  box-shadow: 0 4px 24px rgba(0, 29, 41, 0.04);
+  box-shadow: 0 1rem 6rem rgba(0, 29, 41, 0.04);
 
   @include mixins.host-selector-dark-theme {
-    box-shadow: 0 4px 24px rgba(0, 23, 32, 0.12);
+    box-shadow: 0 1rem 6rem rgba(0, 23, 32, 0.12);
   }
 
   @include mixins.xs() {
@@ -24,8 +24,8 @@
 
     // here important need to redefine outside element styles
     width: 100vw !important;
-    height: calc(#{functions.vh(100)} - 80px) !important;
-    margin-top: 80px !important;
+    height: calc(#{functions.vh(100)} - 20rem) !important;
+    margin-top: 20rem !important;
     min-width: none !important;
     max-width: none !important;
     min-height: none !important;
diff --git a/projects/overlays/src/components/toast/components/toast-layout/toast-layout.component.scss b/projects/overlays/src/components/toast/components/toast-layout/toast-layout.component.scss
index 2a1b7cc42..813eba568 100644
--- a/projects/overlays/src/components/toast/components/toast-layout/toast-layout.component.scss
+++ b/projects/overlays/src/components/toast/components/toast-layout/toast-layout.component.scss
@@ -23,7 +23,7 @@
 
 .pupa-toast-layout__color {
   flex-shrink: 0;
-  width: 3px;
+  width: 0.75rem;
   margin: 1rem 0 1rem 1rem;
 }
 
diff --git a/projects/overlays/src/services/toasts.service.ts b/projects/overlays/src/services/toasts.service.ts
index d1460b81f..3b7901dad 100644
--- a/projects/overlays/src/services/toasts.service.ts
+++ b/projects/overlays/src/services/toasts.service.ts
@@ -15,7 +15,7 @@ import { ToastContainerData } from '../declarations/interfaces/toast-container-d
 import { ToastDataType } from '../declarations/types/utility-types/toast-data.utility-type';
 import { ToastReturnType } from '../declarations/types/utility-types/toast-return.utility-type';
 
-const BOTTOM_OFFSET_PX: number = 32;
+const BOTTOM_OFFSET_REM: number = 8;
 
 @Injectable({ providedIn: 'root' })
 export class ToastsService {
@@ -80,7 +80,7 @@ export class ToastsService {
     const startPosition: GlobalPositionStrategy = this.overlay
       .position()
       .global()
-      .bottom(`${BOTTOM_OFFSET_PX}px`)
+      .bottom(`${BOTTOM_OFFSET_REM}rem`)
       .centerHorizontally();
 
     const overlayRef: OverlayRef = this.overlay.create({
diff --git a/projects/table/src/components/external-predefined/table-header-cell/table-header-cell.component.scss b/projects/table/src/components/external-predefined/table-header-cell/table-header-cell.component.scss
index 8747f9d1b..3d48e4e22 100644
--- a/projects/table/src/components/external-predefined/table-header-cell/table-header-cell.component.scss
+++ b/projects/table/src/components/external-predefined/table-header-cell/table-header-cell.component.scss
@@ -53,8 +53,8 @@
 .pupa-header-cell__sort {
   position: sticky;
   right: 0;
-  font-size: 16px;
-  width: 16px;
+  font-size: 4rem;
+  width: 4rem;
   height: 100%;
   display: flex;
   align-items: center;
diff --git a/projects/table/src/components/external-predefined/table-skeleton/table-skeleton.component.scss b/projects/table/src/components/external-predefined/table-skeleton/table-skeleton.component.scss
index d68ab18fe..240d51deb 100644
--- a/projects/table/src/components/external-predefined/table-skeleton/table-skeleton.component.scss
+++ b/projects/table/src/components/external-predefined/table-skeleton/table-skeleton.component.scss
@@ -13,12 +13,12 @@
   align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
-  padding-left: 16px;
+  padding-left: 4rem;
 }
 
 .pupa-skeleton__stick {
-  width: 56px;
-  height: 8px;
-  border-radius: 4px;
+  width: 14rem;
+  height: 2rem;
+  border-radius: 1rem;
   background-color: functions.semantic-color(kind-opacity-normal);
 }
diff --git a/projects/table/src/components/system/table/table.component.scss b/projects/table/src/components/system/table/table.component.scss
index becfa8f25..355428ced 100644
--- a/projects/table/src/components/system/table/table.component.scss
+++ b/projects/table/src/components/system/table/table.component.scss
@@ -299,9 +299,9 @@ $table-border-z-index: 2;
 
 .pupa-columns-dnd-indicator {
   position: absolute;
-  left: 100px;
+  left: 25rem;
   top: 0;
-  width: 2px;
+  width: 0.5rem;
   height: calc(100% - #{variables.$width_scrollbar});
   background-color: functions.semantic-color(kind-primary-normal);
   z-index: 5;
diff --git a/projects/tree/src/components/tree-layout/components/tree-node-skeleton/tree-node-skeleton.component.ts b/projects/tree/src/components/tree-layout/components/tree-node-skeleton/tree-node-skeleton.component.ts
index 7e812f3c0..1472051ba 100644
--- a/projects/tree/src/components/tree-layout/components/tree-node-skeleton/tree-node-skeleton.component.ts
+++ b/projects/tree/src/components/tree-layout/components/tree-node-skeleton/tree-node-skeleton.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
-import { TREE_NODE_OFFSET } from '../../../../declarations/constants/tree-node-offset.const';
+import { TREE_NODE_OFFSET_REM } from '../../../../declarations/constants/tree-node-offset-rem.const';
 
 @Component({
   selector: 'pupa-tree-node-skeleton',
@@ -12,6 +12,6 @@ export class TreeNodeSkeletonComponent {
   @Input() public level: number;
 
   public get offset(): string {
-    return `${this.level * TREE_NODE_OFFSET}px`;
+    return `${this.level * TREE_NODE_OFFSET_REM}rem`;
   }
 }
diff --git a/projects/tree/src/components/tree-layout/components/tree-node/tree-node.component.ts b/projects/tree/src/components/tree-layout/components/tree-node/tree-node.component.ts
index 0c672168a..4f36f3e4a 100644
--- a/projects/tree/src/components/tree-layout/components/tree-node/tree-node.component.ts
+++ b/projects/tree/src/components/tree-layout/components/tree-node/tree-node.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, ContentChild, Input, ViewEncapsulat
 import { TreeNodeActionsDirective } from '../../directives/tree-node-actions.directive';
 import { TreeNodeProperties } from '../../../../declarations/interfaces/tree-node-properties.interface';
 import { isNil } from '@bimeister/utilities';
-import { TREE_NODE_OFFSET } from '../../../../declarations/constants/tree-node-offset.const';
+import { TREE_NODE_OFFSET_REM } from '../../../../declarations/constants/tree-node-offset-rem.const';
 
 @Component({
   selector: 'pupa-tree-node',
@@ -23,7 +23,7 @@ export class TreeNodeComponent {
   }
 
   public get arrowOffset(): string {
-    return `${this.treeNodeProperties.level * TREE_NODE_OFFSET}px`;
+    return `${this.treeNodeProperties.level * TREE_NODE_OFFSET_REM}rem`;
   }
 
   public get isSelected(): boolean {
diff --git a/projects/tree/src/components/tree-new/components/tree-new/tree-new.component.html b/projects/tree/src/components/tree-new/components/tree-new/tree-new.component.html
index e9c5ed6a2..a49f57f9c 100644
--- a/projects/tree/src/components/tree-new/components/tree-new/tree-new.component.html
+++ b/projects/tree/src/components/tree-new/components/tree-new/tree-new.component.html
@@ -1,6 +1,6 @@
 <section class="pupa-tree">
   <div class="pupa-tree__loader" *ngIf="isLoading$ | async">
-    <pupa-loader size="40px"></pupa-loader>
+    <pupa-loader size="10rem"></pupa-loader>
   </div>
 
   <pupa-scrollable [invisibleScrollbars]="['vertical', 'horizontal']" class="pupa-skeleton-scrollable">
diff --git a/projects/tree/src/declarations/constants/tree-node-offset-rem.const.ts b/projects/tree/src/declarations/constants/tree-node-offset-rem.const.ts
new file mode 100644
index 000000000..b29852bfb
--- /dev/null
+++ b/projects/tree/src/declarations/constants/tree-node-offset-rem.const.ts
@@ -0,0 +1 @@
+export const TREE_NODE_OFFSET_REM: number = 3;
diff --git a/projects/tree/src/declarations/constants/tree-node-offset.const.ts b/projects/tree/src/declarations/constants/tree-node-offset.const.ts
deleted file mode 100644
index 5c6fb0a8a..000000000
--- a/projects/tree/src/declarations/constants/tree-node-offset.const.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const TREE_NODE_OFFSET: number = 12;