[core] Migrate to auto-rem

mantinedev · Apr 11, 2024 · 6d195cb · 6d195cb
1 parent 324b3d8
commit 6d195cb
Show file tree

Hide file tree

Showing 199 changed files with 1,164 additions and 1,129 deletions.
diff --git a/apps/help.mantine.dev/src/components/MdxElements/MdxElements.module.css b/apps/help.mantine.dev/src/components/MdxElements/MdxElements.module.css
@@ -1,23 +1,23 @@
 .paragraph {
   line-height: 1.65;
-  font-size: rem(15px);
+  font-size: 15px;
 }
 
 .link {
-  font-size: rem(15px);
+  font-size: 15px;
 }
 
 .ul {
   line-height: 1.65;
-  margin-bottom: rem(20px);
-  margin-top: rem(10px);
-  font-size: rem(15px);
+  margin-bottom: 20px;
+  margin-top: 10px;
+  font-size: 15px;
   padding-left: var(--mantine-spacing-xl);
 }
 
 .li {
-  margin-top: rem(4px);
-  font-size: rem(15px);
+  margin-top: 4px;
+  font-size: 15px;
 }
 
 .title {
@@ -42,11 +42,11 @@
 
 .titleOffset {
   position: relative;
-  top: rem(-62px);
+  top: -62px;
 }
 
 .code {
-  border: rem(1px) solid;
+  border: 1px solid;
   border-radius: var(--mantine-radius-md);
   margin-top: var(--mantine-spacing-md);
   margin-bottom: var(--mantine-spacing-md);

diff --git a/apps/help.mantine.dev/src/components/MdxElements/MdxInfo/MdxInfo.module.css b/apps/help.mantine.dev/src/components/MdxElements/MdxInfo/MdxInfo.module.css
@@ -4,7 +4,7 @@
 
   & > p {
     line-height: 1.65;
-    font-size: rem(15px);
+    font-size: 15px;
   }
 
   /* Considered to be a heading of the info */
@@ -57,6 +57,6 @@
 }
 
 .icon {
-  width: rem(28px);
-  height: rem(28px);
+  width: 28px;
+  height: 28px;
 }
diff --git a/apps/help.mantine.dev/src/components/MdxElements/MdxNpmScript/MdxNpmScript.module.css b/apps/help.mantine.dev/src/components/MdxElements/MdxNpmScript/MdxNpmScript.module.css
@@ -1,5 +1,5 @@
 .root {
-  border: rem(1px) solid;
+  border: 1px solid;
   border-radius: var(--mantine-radius-md);
   overflow: hidden;
   margin-bottom: var(--mantine-spacing-xl);
@@ -14,10 +14,10 @@
 }
 
 .icon {
-  margin-right: rem(5px);
+  margin-right: 5px;
 
   @mixin rtl {
     margin-right: 0;
-    margin-left: rem(5px);
+    margin-left: 5px;
   }
 }
diff --git a/apps/help.mantine.dev/src/components/MdxLayout/MdxLayout.module.css b/apps/help.mantine.dev/src/components/MdxLayout/MdxLayout.module.css
@@ -1,24 +1,24 @@
 .header {
-  padding-top: rem(20px);
-  padding-bottom: rem(60px);
+  padding-top: 20px;
+  padding-bottom: 60px;
   background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
   margin-bottom: var(--mantine-spacing-xl);
 
   @mixin smaller-than $sm {
-    padding-top: rem(60px);
-    padding-bottom: rem(40px);
+    padding-top: 60px;
+    padding-bottom: 40px;
   }
 }
 
 .title {
-  margin-top: rem(30px);
-  font-size: rem(50px);
+  margin-top: 30px;
+  font-size: 50px;
   line-height: 1.1;
   text-wrap: balance;
   color: var(--mantine-color-bright);
 
   @mixin smaller-than $sm {
-    font-size: rem(32px);
+    font-size: 32px;
   }
 }
 
@@ -27,7 +27,7 @@
 }
 
 .inner {
-  --table-of-contents-width: rem(300px);
+  --table-of-contents-width: 300px;
 
   display: flex;
   align-items: flex-start;

diff --git a/apps/help.mantine.dev/src/components/MdxLayout/PageHeaderLink/PageHeaderLink.module.css b/apps/help.mantine.dev/src/components/MdxLayout/PageHeaderLink/PageHeaderLink.module.css
@@ -11,7 +11,7 @@
 
 .label {
   color: var(--mantine-color-dimmed);
-  flex: 0 0 rem(80px);
+  flex: 0 0 80px;
 
   @mixin smaller-than $sm {
     display: none;
@@ -31,12 +31,12 @@
   }
 
   @mixin smaller-than $sm {
-    min-height: rem(24px);
+    min-height: 24px;
   }
 }
 
 .icon {
-  width: rem(18px);
+  width: 18px;
 
   & svg {
     display: block;

diff --git a/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/TableOfContents.module.css b/apps/help.mantine.dev/src/components/MdxLayout/TableOfContents/TableOfContents.module.css
@@ -4,8 +4,8 @@
   top: var(--mantine-spacing-xl);
   right: 0;
   height: auto;
-  padding-top: rem(35px);
-  flex: 0 0 calc(var(--table-of-contents-width) - rem(20px));
+  padding-top: 35px;
+  flex: 0 0 calc(var(--table-of-contents-width) - 20px);
 
   @mixin smaller-than $md {
     display: none;
@@ -27,9 +27,9 @@
 
 .link {
   display: block;
-  border-left: rem(1px) solid transparent;
-  padding: rem(8px) var(--mantine-spacing-md);
-  margin-left: rem(-1px);
+  border-left: 1px solid transparent;
+  padding: 8px var(--mantine-spacing-md);
+  margin-left: -1px;
   padding-left: calc(var(--toc-link-offset) * var(--mantine-spacing-lg));
   border-top-right-radius: var(--mantine-radius-sm);
   border-bottom-right-radius: var(--mantine-radius-sm);
@@ -44,9 +44,9 @@
 
   @mixin rtl {
     border-left: 0;
-    border-right: rem(1px) solid transparent;
+    border-right: 1px solid transparent;
     margin-left: 0;
-    margin-right: rem(-1px);
+    margin-right: -1px;
     border-top-left-radius: var(--mantine-radius-sm);
     border-bottom-left-radius: var(--mantine-radius-sm);
     border-top-right-radius: 0;
@@ -84,7 +84,7 @@
 }
 
 .items {
-  border-left: rem(1px) solid;
+  border-left: 1px solid;
 
   @mixin light {
     border-color: var(--mantine-color-gray-3) !important;
@@ -96,7 +96,7 @@
 
   @mixin rtl {
     border-left: 0;
-    border-right: rem(1px) solid;
+    border-right: 1px solid;
 
     @mixin light {
       border-color: var(--mantine-color-gray-3) !important;

diff --git a/apps/help.mantine.dev/src/components/QuestionsList/NothingFound/NothingFound.module.css b/apps/help.mantine.dev/src/components/QuestionsList/NothingFound/NothingFound.module.css
@@ -1,5 +1,5 @@
 .description {
-  max-width: rem(600px);
+  max-width: 600px;
   font-size: var(--mantine-font-size-xl);
   margin-top: var(--mantine-spacing-md);
 }
diff --git a/...mantine.dev/src/components/QuestionsList/QuestionsListGroup/QuestionsListGroup.module.css b/...mantine.dev/src/components/QuestionsList/QuestionsListGroup/QuestionsListGroup.module.css
@@ -1,6 +1,6 @@
 .group {
   & + & {
-    margin-top: rem(50px);
+    margin-top: 50px;
   }
 }
 
@@ -34,8 +34,8 @@
 .questionDescription {
   font-size: var(--mantine-font-size-md);
   color: var(--mantine-color-dimmed);
-  margin-top: rem(5px);
-  max-width: rem(600px);
+  margin-top: 5px;
+  max-width: 600px;
 }
 
 .category {

diff --git a/...ntine.dev/src/components/QuestionsList/QuestionsListHeader/QuestionsListHeader.module.css b/...ntine.dev/src/components/QuestionsList/QuestionsListHeader/QuestionsListHeader.module.css
@@ -1,24 +1,24 @@
 .root {
   background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-dark-8));
-  padding-top: rem(120px);
-  padding-bottom: rem(40px);
+  padding-top: 120px;
+  padding-bottom: 40px;
 }
 
 .title {
   color: var(--mantine-color-white);
-  font-size: rem(52px);
-  letter-spacing: rem(-0.5px);
+  font-size: 52px;
+  letter-spacing: -0.5px;
   line-height: 1;
-  text-shadow: rem(1px) rem(1px) rem(3px) rgba(0, 0, 0, 0.1);
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 
   @mixin smaller-than $sm {
-    font-size: rem(32px);
+    font-size: 32px;
   }
 }
 
 .description {
   color: var(--mantine-color-white);
-  font-size: rem(20px);
+  font-size: 20px;
   margin-top: var(--mantine-spacing-xs);
   margin-bottom: var(--mantine-spacing-xl);
   opacity: 0.8;

diff --git a/apps/help.mantine.dev/src/components/Shell/Shell.module.css b/apps/help.mantine.dev/src/components/Shell/Shell.module.css
@@ -1,5 +1,5 @@
 .root {
-  --footer-height: rem(120px);
+  --footer-height: 120px;
 }
 
 .inner {
@@ -17,7 +17,7 @@
   position: relative;
   z-index: 1;
   background-color: var(--mantine-color-body);
-  padding-bottom: rem(120px);
+  padding-bottom: 120px;
   box-shadow: var(--mantine-shadow-md);
   min-height: calc(100vh - var(--app-shell-header-height));
 }

diff --git a/apps/help.mantine.dev/src/components/SocialCard/SocialCard.module.css b/apps/help.mantine.dev/src/components/SocialCard/SocialCard.module.css
@@ -1,6 +1,6 @@
 .root {
   position: relative;
-  height: rem(280px);
+  height: 280px;
   padding: var(--mantine-spacing-lg);
   border-radius: var(--mantine-radius-md);
   color: var(--mantine-color-white);
@@ -49,8 +49,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: rem(60px);
-  height: rem(60px);
+  width: 60px;
+  height: 60px;
   border-radius: var(--mantine-radius-md);
 }
 
@@ -71,6 +71,6 @@
   padding: 0;
   font-size: var(--mantine-font-size-sm);
   opacity: 0.8;
-  max-width: rem(360px);
-  margin-top: rem(7px);
+  max-width: 360px;
+  margin-top: 7px;
 }
diff --git a/apps/help.mantine.dev/src/demos/AlignInputButton.demo.module.css b/apps/help.mantine.dev/src/demos/AlignInputButton.demo.module.css
@@ -4,7 +4,7 @@
 
 .error {
   position: absolute;
-  bottom: rem(-18px);
+  bottom: -18px;
 }
 
 .wrapper {

diff --git a/apps/help.mantine.dev/src/demos/InputFocusStyles.demo.module.css b/apps/help.mantine.dev/src/demos/InputFocusStyles.demo.module.css
@@ -1,5 +1,5 @@
 .input {
   &:focus {
-    outline: rem(2px) solid var(--mantine-primary-color-filled);
+    outline: 2px solid var(--mantine-primary-color-filled);
   }
 }
diff --git a/apps/help.mantine.dev/src/demos/InputThemeFocusStyles.demo.module.css b/apps/help.mantine.dev/src/demos/InputThemeFocusStyles.demo.module.css
@@ -1,5 +1,5 @@
 .input {
   &:focus {
-    outline: rem(2px) solid var(--mantine-primary-color-filled);
+    outline: 2px solid var(--mantine-primary-color-filled);
   }
 }
diff --git a/.../mantine.dev/src/app-shell-examples/AppShellPage/ExamplesDrawer/ExamplesDrawer.module.css b/.../mantine.dev/src/app-shell-examples/AppShellPage/ExamplesDrawer/ExamplesDrawer.module.css
@@ -38,10 +38,10 @@
 
 .menuButton {
   @mixin not-rtl {
-    padding-right: rem(5px);
+    padding-right: 5px;
   }
 
   @mixin rtl {
-    padding-left: rem(5px);
+    padding-left: 5px;
   }
 }
diff --git a/apps/mantine.dev/src/combobox-examples/ComboboxDemo/ComboboxDemo.module.css b/apps/mantine.dev/src/combobox-examples/ComboboxDemo/ComboboxDemo.module.css
@@ -1,5 +1,5 @@
 .root {
-  --preview-size: rem(600px);
+  --preview-size: 600px;
   padding-top: var(--preview-size);
 }
 
@@ -24,12 +24,12 @@
   justify-content: space-between;
   padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
   background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
-  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8));
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8));
 
   @media (max-width: $docs-navbar-breakpoint) {
     flex-direction: column-reverse;
     align-items: flex-start;
-    gap: rem(7px);
+    gap: 7px;
   }
 }
 
@@ -46,25 +46,25 @@
 .description {
   font-size: var(--mantine-font-size-xs);
   color: var(--mantine-color-gray-6);
-  margin-top: rem(3px);
+  margin-top: 3px;
 }
 
 .inner {
   display: flex;
   justify-content: center;
   height: 100%;
-  padding-top: rem(180px);
+  padding-top: 180px;
 }
 
 .wrapper {
   flex: 1;
-  max-width: rem(420px);
-  padding-left: rem(20px);
-  padding-right: rem(20px);
+  max-width: 420px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .code {
-  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
   position: relative;
   z-index: 2;
   background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));