@mantine/core 7.7.2 → 7.8.1-alpha.0

package/styles/Drawer.layer.css

@@ -1,9 +1,9 @@
 @layer mantine {.m_f11b401e {
-  --drawer-size-xs: calc(20rem * var(--mantine-scale));
-  --drawer-size-sm: calc(23.75rem * var(--mantine-scale));
-  --drawer-size-md: calc(27.5rem * var(--mantine-scale));
-  --drawer-size-lg: calc(38.75rem * var(--mantine-scale));
-  --drawer-size-xl: calc(48.75rem * var(--mantine-scale));
+  --drawer-size-xs: 320px;
+  --drawer-size-sm: 380px;
+  --drawer-size-md: 440px;
+  --drawer-size-lg: 620px;
+  --drawer-size-xl: 780px;
   --drawer-size: var(--drawer-size-md);
   --drawer-offset: 0rem;
 }

package/styles/Fieldset.css

@@ -6,7 +6,7 @@
 }
 
 .m_84c9523a {
-  border: calc(0.0625rem * var(--mantine-scale)) solid;
+  border: 1px solid;
 }
 
 :where([data-mantine-color-scheme='light']) .m_84c9523a {
@@ -20,7 +20,7 @@
 }
 
 .m_ef274e49 {
-  border: calc(0.0625rem * var(--mantine-scale)) solid;
+  border: 1px solid;
 }
 
 :where([data-mantine-color-scheme='light']) .m_ef274e49 {

package/styles/Fieldset.layer.css

@@ -6,7 +6,7 @@
 }
 
 .m_84c9523a {
-  border: calc(0.0625rem * var(--mantine-scale)) solid;
+  border: 1px solid;
 }
 
 :where([data-mantine-color-scheme='light']) .m_84c9523a {
@@ -20,7 +20,7 @@
 }
 
 .m_ef274e49 {
-  border: calc(0.0625rem * var(--mantine-scale)) solid;
+  border: 1px solid;
 }
 
 :where([data-mantine-color-scheme='light']) .m_ef274e49 {

package/styles/Indicator.css

@@ -11,7 +11,7 @@
 }
 
 .m_e5262200 {
-  --indicator-size: calc(0.625rem * var(--mantine-scale));
+  --indicator-size: 10px;
   --indicator-color: var(--mantine-primary-color-filled);
 
   position: relative;
@@ -31,7 +31,7 @@
   transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
   min-width: var(--indicator-size);
   height: var(--indicator-size);
-  border-radius: var(--indicator-radius, calc(62.5rem * var(--mantine-scale)));
+  border-radius: var(--indicator-radius, 1000rem);
   z-index: var(--indicator-z-index, 200);
   display: flex;
   align-items: center;
@@ -47,7 +47,7 @@
     position: absolute;
     inset: 0;
     background-color: var(--indicator-color);
-    border-radius: var(--indicator-radius, calc(62.5rem * var(--mantine-scale)));
+    border-radius: var(--indicator-radius, 1000rem);
     z-index: -1;
   }
 
@@ -56,7 +56,7 @@
   }
 
 .m_760d1fb1:where([data-with-border]) {
-    border: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-body);
+    border: 2px solid var(--mantine-color-body);
   }
 
 .m_760d1fb1[data-processing]::before {

package/styles/Indicator.layer.css

@@ -11,7 +11,7 @@
 }
 
 .m_e5262200 {
-  --indicator-size: calc(0.625rem * var(--mantine-scale));
+  --indicator-size: 10px;
   --indicator-color: var(--mantine-primary-color-filled);
 
   position: relative;
@@ -31,7 +31,7 @@
   transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
   min-width: var(--indicator-size);
   height: var(--indicator-size);
-  border-radius: var(--indicator-radius, calc(62.5rem * var(--mantine-scale)));
+  border-radius: var(--indicator-radius, 1000rem);
   z-index: var(--indicator-z-index, 200);
   display: flex;
   align-items: center;
@@ -47,7 +47,7 @@
     position: absolute;
     inset: 0;
     background-color: var(--indicator-color);
-    border-radius: var(--indicator-radius, calc(62.5rem * var(--mantine-scale)));
+    border-radius: var(--indicator-radius, 1000rem);
     z-index: -1;
   }
 
@@ -56,7 +56,7 @@
   }
 
 .m_760d1fb1:where([data-with-border]) {
-    border: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-body);
+    border: 2px solid var(--mantine-color-body);
   }
 
 .m_760d1fb1[data-processing]::before {

package/styles/InlineInput.css

@@ -1,9 +1,9 @@
 .m_5f75b09e {
-  --label-lh-xs: calc(1rem * var(--mantine-scale));
-  --label-lh-sm: calc(1.25rem * var(--mantine-scale));
-  --label-lh-md: calc(1.5rem * var(--mantine-scale));
-  --label-lh-lg: calc(1.875rem * var(--mantine-scale));
-  --label-lh-xl: calc(2.25rem * var(--mantine-scale));
+  --label-lh-xs: 16px;
+  --label-lh-sm: 20px;
+  --label-lh-md: 24px;
+  --label-lh-lg: 30px;
+  --label-lh-xl: 36px;
   --label-lh: var(--label-lh-sm);
 }
 

package/styles/InlineInput.layer.css

@@ -1,9 +1,9 @@
 @layer mantine {.m_5f75b09e {
-  --label-lh-xs: calc(1rem * var(--mantine-scale));
-  --label-lh-sm: calc(1.25rem * var(--mantine-scale));
-  --label-lh-md: calc(1.5rem * var(--mantine-scale));
-  --label-lh-lg: calc(1.875rem * var(--mantine-scale));
-  --label-lh-xl: calc(2.25rem * var(--mantine-scale));
+  --label-lh-xs: 16px;
+  --label-lh-sm: 20px;
+  --label-lh-md: 24px;
+  --label-lh-lg: 30px;
+  --label-lh-xl: 36px;
   --label-lh: var(--label-lh-sm);
 }
 

package/styles/Input.css

@@ -3,17 +3,17 @@
   margin-top: var(--input-margin-top, 0rem);
   margin-bottom: var(--input-margin-bottom, 0rem);
 
-  --input-height-xs: calc(1.875rem * var(--mantine-scale));
-  --input-height-sm: calc(2.25rem * var(--mantine-scale));
-  --input-height-md: calc(2.625rem * var(--mantine-scale));
-  --input-height-lg: calc(3.125rem * var(--mantine-scale));
-  --input-height-xl: calc(3.75rem * var(--mantine-scale));
-
-  --input-padding-y-xs: calc(0.3125rem * var(--mantine-scale));
-  --input-padding-y-sm: calc(0.375rem * var(--mantine-scale));
-  --input-padding-y-md: calc(0.5rem * var(--mantine-scale));
-  --input-padding-y-lg: calc(0.625rem * var(--mantine-scale));
-  --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));
+  --input-height-xs: 30px;
+  --input-height-sm: 36px;
+  --input-height-md: 42px;
+  --input-height-lg: 50px;
+  --input-height-xl: 60px;
+
+  --input-padding-y-xs: 5px;
+  --input-padding-y-sm: 6px;
+  --input-padding-y-md: 8px;
+  --input-padding-y-lg: 10px;
+  --input-padding-y-xl: 13px;
 
   --input-height: var(--input-height-sm);
   --input-radius: var(--mantine-radius-default);
@@ -36,11 +36,11 @@
 
   --input-size: var(--input-height);
 
-  --section-y: calc(0.0625rem * var(--mantine-scale));
-  --left-section-start: calc(0.0625rem * var(--mantine-scale));
+  --section-y: 1px;
+  --left-section-start: 1px;
   --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 
-  --right-section-end: calc(0.0625rem * var(--mantine-scale));
+  --right-section-end: 1px;
   --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
 }
 
@@ -56,11 +56,11 @@
   }
 
   .m_6c018570[data-multiline] {
-    --input-padding-y-xs: calc(0.28125rem * var(--mantine-scale));
-    --input-padding-y-sm: calc(0.34375rem * var(--mantine-scale));
-    --input-padding-y-md: calc(0.4375rem * var(--mantine-scale));
-    --input-padding-y-lg: calc(0.59375rem * var(--mantine-scale));
-    --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));
+    --input-padding-y-xs: 4.5px;
+    --input-padding-y-sm: 5.5px;
+    --input-padding-y-md: 7px;
+    --input-padding-y-lg: 9.5px;
+    --input-padding-y-xl: 13px;
 
     --input-size: auto;
     --input-line-height: var(--mantine-line-height);
@@ -148,7 +148,7 @@
 
   text-align: var(--input-text-align);
   color: var(--input-color);
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
+  border: 1px solid var(--input-bd);
   background-color: var(--input-bg);
   font-family: var(--input-font-family, var(--mantine-font-family));
   height: var(--input-size);

package/styles/Input.layer.css

@@ -3,17 +3,17 @@
   margin-top: var(--input-margin-top, 0rem);
   margin-bottom: var(--input-margin-bottom, 0rem);
 
-  --input-height-xs: calc(1.875rem * var(--mantine-scale));
-  --input-height-sm: calc(2.25rem * var(--mantine-scale));
-  --input-height-md: calc(2.625rem * var(--mantine-scale));
-  --input-height-lg: calc(3.125rem * var(--mantine-scale));
-  --input-height-xl: calc(3.75rem * var(--mantine-scale));
-
-  --input-padding-y-xs: calc(0.3125rem * var(--mantine-scale));
-  --input-padding-y-sm: calc(0.375rem * var(--mantine-scale));
-  --input-padding-y-md: calc(0.5rem * var(--mantine-scale));
-  --input-padding-y-lg: calc(0.625rem * var(--mantine-scale));
-  --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));
+  --input-height-xs: 30px;
+  --input-height-sm: 36px;
+  --input-height-md: 42px;
+  --input-height-lg: 50px;
+  --input-height-xl: 60px;
+
+  --input-padding-y-xs: 5px;
+  --input-padding-y-sm: 6px;
+  --input-padding-y-md: 8px;
+  --input-padding-y-lg: 10px;
+  --input-padding-y-xl: 13px;
 
   --input-height: var(--input-height-sm);
   --input-radius: var(--mantine-radius-default);
@@ -36,11 +36,11 @@
 
   --input-size: var(--input-height);
 
-  --section-y: calc(0.0625rem * var(--mantine-scale));
-  --left-section-start: calc(0.0625rem * var(--mantine-scale));
+  --section-y: 1px;
+  --left-section-start: 1px;
   --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
 
-  --right-section-end: calc(0.0625rem * var(--mantine-scale));
+  --right-section-end: 1px;
   --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
 }
 
@@ -56,11 +56,11 @@
   }
 
   .m_6c018570[data-multiline] {
-    --input-padding-y-xs: calc(0.28125rem * var(--mantine-scale));
-    --input-padding-y-sm: calc(0.34375rem * var(--mantine-scale));
-    --input-padding-y-md: calc(0.4375rem * var(--mantine-scale));
-    --input-padding-y-lg: calc(0.59375rem * var(--mantine-scale));
-    --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));
+    --input-padding-y-xs: 4.5px;
+    --input-padding-y-sm: 5.5px;
+    --input-padding-y-md: 7px;
+    --input-padding-y-lg: 9.5px;
+    --input-padding-y-xl: 13px;
 
     --input-size: auto;
     --input-line-height: var(--mantine-line-height);
@@ -148,7 +148,7 @@
 
   text-align: var(--input-text-align);
   color: var(--input-color);
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
+  border: 1px solid var(--input-bd);
   background-color: var(--input-bg);
   font-family: var(--input-font-family, var(--mantine-font-family));
   height: var(--input-size);

package/styles/Kbd.css

@@ -1,16 +1,16 @@
 .m_dc6f14e2 {
-  --kbd-fz-xs: calc(0.625rem * var(--mantine-scale));
-  --kbd-fz-sm: calc(0.75rem * var(--mantine-scale));
-  --kbd-fz-md: calc(0.875rem * var(--mantine-scale));
-  --kbd-fz-lg: calc(1rem * var(--mantine-scale));
-  --kbd-fz-xl: calc(1.25rem * var(--mantine-scale));
+  --kbd-fz-xs: 10px;
+  --kbd-fz-sm: 12px;
+  --kbd-fz-md: 14px;
+  --kbd-fz-lg: 16px;
+  --kbd-fz-xl: 20px;
   --kbd-fz: var(--kbd-fz-sm);
 
-  --kbd-padding-xs: calc(0.125rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale));
-  --kbd-padding-sm: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
-  --kbd-padding-md: calc(0.25rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale));
-  --kbd-padding-lg: calc(0.3125rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale));
-  --kbd-padding-xl: calc(0.5rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale));
+  --kbd-padding-xs: 2px 4px;
+  --kbd-padding-sm: 3px 5px;
+  --kbd-padding-md: 4px 7px;
+  --kbd-padding-lg: 5px 9px;
+  --kbd-padding-xl: 8px 14px;
   --kbd-padding: var(--kbd-padding-sm);
 
   font-family: var(--mantine-font-family-monospace);
@@ -19,8 +19,8 @@
   padding: var(--kbd-padding);
   font-size: var(--kbd-fz);
   border-radius: var(--mantine-radius-sm);
-  border: calc(0.0625rem * var(--mantine-scale)) solid;
-  border-bottom-width: calc(0.1875rem * var(--mantine-scale));
+  border: 1px solid;
+  border-bottom-width: 3px;
   unicode-bidi: embed;
 }
 

package/styles/Kbd.layer.css

@@ -1,16 +1,16 @@
 @layer mantine {.m_dc6f14e2 {
-  --kbd-fz-xs: calc(0.625rem * var(--mantine-scale));
-  --kbd-fz-sm: calc(0.75rem * var(--mantine-scale));
-  --kbd-fz-md: calc(0.875rem * var(--mantine-scale));
-  --kbd-fz-lg: calc(1rem * var(--mantine-scale));
-  --kbd-fz-xl: calc(1.25rem * var(--mantine-scale));
+  --kbd-fz-xs: 10px;
+  --kbd-fz-sm: 12px;
+  --kbd-fz-md: 14px;
+  --kbd-fz-lg: 16px;
+  --kbd-fz-xl: 20px;
   --kbd-fz: var(--kbd-fz-sm);
 
-  --kbd-padding-xs: calc(0.125rem * var(--mantine-scale)) calc(0.25rem * var(--mantine-scale));
-  --kbd-padding-sm: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
-  --kbd-padding-md: calc(0.25rem * var(--mantine-scale)) calc(0.4375rem * var(--mantine-scale));
-  --kbd-padding-lg: calc(0.3125rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale));
-  --kbd-padding-xl: calc(0.5rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale));
+  --kbd-padding-xs: 2px 4px;
+  --kbd-padding-sm: 3px 5px;
+  --kbd-padding-md: 4px 7px;
+  --kbd-padding-lg: 5px 9px;
+  --kbd-padding-xl: 8px 14px;
   --kbd-padding: var(--kbd-padding-sm);
 
   font-family: var(--mantine-font-family-monospace);
@@ -19,8 +19,8 @@
   padding: var(--kbd-padding);
   font-size: var(--kbd-fz);
   border-radius: var(--mantine-radius-sm);
-  border: calc(0.0625rem * var(--mantine-scale)) solid;
-  border-bottom-width: calc(0.1875rem * var(--mantine-scale));
+  border: 1px solid;
+  border-bottom-width: 3px;
   unicode-bidi: embed;
 }
 

package/styles/Loader.css

@@ -1,9 +1,9 @@
 .m_5ae2e3c {
-  --loader-size-xs: calc(1.125rem * var(--mantine-scale));
-  --loader-size-sm: calc(1.375rem * var(--mantine-scale));
-  --loader-size-md: calc(2.25rem * var(--mantine-scale));
-  --loader-size-lg: calc(2.75rem * var(--mantine-scale));
-  --loader-size-xl: calc(3.625rem * var(--mantine-scale));
+  --loader-size-xs: 18px;
+  --loader-size-sm: 22px;
+  --loader-size-md: 36px;
+  --loader-size-lg: 44px;
+  --loader-size-xl: 58px;
   --loader-size: var(--loader-size-md);
   --loader-color: var(--mantine-primary-color-filled);
 }
@@ -33,7 +33,7 @@
   flex: 1;
   background: var(--loader-color);
   animation: m_5d2b3b9d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
-  border-radius: calc(0.125rem * var(--mantine-scale));
+  border-radius: 2px;
 }
 
 .m_870bb79:nth-of-type(1) {
@@ -106,7 +106,7 @@
     display: block;
     width: var(--loader-size);
     height: var(--loader-size);
-    border-radius: calc(625rem * var(--mantine-scale));
+    border-radius: 10000px;
     border-width: calc(var(--loader-size) / 8);
     border-style: solid;
     border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent;

package/styles/Loader.layer.css

@@ -1,9 +1,9 @@
 @layer mantine {.m_5ae2e3c {
-  --loader-size-xs: calc(1.125rem * var(--mantine-scale));
-  --loader-size-sm: calc(1.375rem * var(--mantine-scale));
-  --loader-size-md: calc(2.25rem * var(--mantine-scale));
-  --loader-size-lg: calc(2.75rem * var(--mantine-scale));
-  --loader-size-xl: calc(3.625rem * var(--mantine-scale));
+  --loader-size-xs: 18px;
+  --loader-size-sm: 22px;
+  --loader-size-md: 36px;
+  --loader-size-lg: 44px;
+  --loader-size-xl: 58px;
   --loader-size: var(--loader-size-md);
   --loader-color: var(--mantine-primary-color-filled);
 }
@@ -33,7 +33,7 @@
   flex: 1;
   background: var(--loader-color);
   animation: m_5d2b3b9d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
-  border-radius: calc(0.125rem * var(--mantine-scale));
+  border-radius: 2px;
 }
 
 .m_870bb79:nth-of-type(1) {
@@ -106,7 +106,7 @@
     display: block;
     width: var(--loader-size);
     height: var(--loader-size);
-    border-radius: calc(625rem * var(--mantine-scale));
+    border-radius: 10000px;
     border-width: calc(var(--loader-size) / 8);
     border-style: solid;
     border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent;

package/styles/Menu.css

@@ -1,5 +1,5 @@
 .m_dc9b7c9f {
-  padding: calc(0.25rem * var(--mantine-scale));
+  padding: 4px;
 }
 
 .m_9bfac126 {
@@ -11,9 +11,9 @@
 }
 
 .m_efdf90cb {
-  margin-top: calc(0.25rem * var(--mantine-scale));
-  margin-bottom: calc(0.25rem * var(--mantine-scale));
-  border-top: calc(0.0625rem * var(--mantine-scale)) solid;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  border-top: 1px solid;
 }
 
 :where([data-mantine-color-scheme='light']) .m_efdf90cb {

package/styles/Menu.layer.css

@@ -1,5 +1,5 @@
 @layer mantine {.m_dc9b7c9f {
-  padding: calc(0.25rem * var(--mantine-scale));
+  padding: 4px;
 }
 
 .m_9bfac126 {
@@ -11,9 +11,9 @@
 }
 
 .m_efdf90cb {
-  margin-top: calc(0.25rem * var(--mantine-scale));
-  margin-bottom: calc(0.25rem * var(--mantine-scale));
-  border-top: calc(0.0625rem * var(--mantine-scale)) solid;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  border-top: 1px solid;
 }
 
 :where([data-mantine-color-scheme='light']) .m_efdf90cb {

package/styles/Modal.css

@@ -1,9 +1,9 @@
 .m_9df02822 {
-  --modal-size-xs: calc(20rem * var(--mantine-scale));
-  --modal-size-sm: calc(23.75rem * var(--mantine-scale));
-  --modal-size-md: calc(27.5rem * var(--mantine-scale));
-  --modal-size-lg: calc(38.75rem * var(--mantine-scale));
-  --modal-size-xl: calc(48.75rem * var(--mantine-scale));
+  --modal-size-xs: 320px;
+  --modal-size-sm: 380px;
+  --modal-size-md: 440px;
+  --modal-size-lg: 620px;
+  --modal-size-xl: 780px;
   --modal-size: var(--modal-size-md);
 
   --modal-y-offset: 5dvh;

package/styles/Modal.layer.css

@@ -1,9 +1,9 @@
 @layer mantine {.m_9df02822 {
-  --modal-size-xs: calc(20rem * var(--mantine-scale));
-  --modal-size-sm: calc(23.75rem * var(--mantine-scale));
-  --modal-size-md: calc(27.5rem * var(--mantine-scale));
-  --modal-size-lg: calc(38.75rem * var(--mantine-scale));
-  --modal-size-xl: calc(48.75rem * var(--mantine-scale));
+  --modal-size-xs: 320px;
+  --modal-size-sm: 380px;
+  --modal-size-md: 440px;
+  --modal-size-lg: 620px;
+  --modal-size-xl: 780px;
   --modal-size: var(--modal-size-md);
 
   --modal-y-offset: 5dvh;

package/styles/ModalBase.css

@@ -16,7 +16,7 @@
   top: 0;
   background-color: var(--mantine-color-body);
   z-index: 1000;
-  min-height: calc(3.75rem * var(--mantine-scale));
+  min-height: 60px;
 }
 
 .m_60c222c7 {

package/styles/ModalBase.layer.css

@@ -16,7 +16,7 @@
   top: 0;
   background-color: var(--mantine-color-body);
   z-index: 1000;
-  min-height: calc(3.75rem * var(--mantine-scale));
+  min-height: 60px;
 }
 
 .m_60c222c7 {

package/styles/NavLink.css

@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: calc(0.5rem * var(--mantine-scale)) var(--mantine-spacing-sm);
+  padding: 8px var(--mantine-spacing-sm);
   user-select: none;
 }
 

package/styles/NavLink.layer.css

@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: calc(0.5rem * var(--mantine-scale)) var(--mantine-spacing-sm);
+  padding: 8px var(--mantine-spacing-sm);
   user-select: none;
 }
 

package/styles/Notification.css

@@ -7,7 +7,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding-inline-start: calc(1.375rem * var(--mantine-scale));
+  padding-inline-start: 22px;
   padding-inline-end: var(--mantine-spacing-xs);
   padding-top: var(--mantine-spacing-xs);
   padding-bottom: var(--mantine-spacing-xs);
@@ -19,10 +19,10 @@
     content: '';
     display: block;
     position: absolute;
-    width: calc(0.375rem * var(--mantine-scale));
+    width: 6px;
     top: var(--notification-radius);
     bottom: var(--notification-radius);
-    inset-inline-start: calc(0.25rem * var(--mantine-scale));
+    inset-inline-start: 4px;
     border-radius: var(--notification-radius);
     background-color: var(--notification-color);
   }
@@ -44,19 +44,19 @@
     }
 
   :where([data-mantine-color-scheme='light']) .m_a513464:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+      border: 1px solid var(--mantine-color-gray-3);
 }
 
   :where([data-mantine-color-scheme='dark']) .m_a513464:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+      border: 1px solid var(--mantine-color-dark-4);
 }
 
 .m_a4ceffb {
   box-sizing: border-box;
   margin-inline-end: var(--mantine-spacing-md);
-  width: calc(1.75rem * var(--mantine-scale));
-  height: calc(1.75rem * var(--mantine-scale));
-  border-radius: calc(1.75rem * var(--mantine-scale));
+  width: 28px;
+  height: 28px;
+  border-radius: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -75,7 +75,7 @@
 }
 
 .m_3feedf16 {
-  margin-bottom: calc(0.125rem * var(--mantine-scale));
+  margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: var(--mantine-font-size-sm);

package/styles/Notification.layer.css

@@ -7,7 +7,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding-inline-start: calc(1.375rem * var(--mantine-scale));
+  padding-inline-start: 22px;
   padding-inline-end: var(--mantine-spacing-xs);
   padding-top: var(--mantine-spacing-xs);
   padding-bottom: var(--mantine-spacing-xs);
@@ -19,10 +19,10 @@
     content: '';
     display: block;
     position: absolute;
-    width: calc(0.375rem * var(--mantine-scale));
+    width: 6px;
     top: var(--notification-radius);
     bottom: var(--notification-radius);
-    inset-inline-start: calc(0.25rem * var(--mantine-scale));
+    inset-inline-start: 4px;
     border-radius: var(--notification-radius);
     background-color: var(--notification-color);
   }
@@ -44,19 +44,19 @@
     }
 
   :where([data-mantine-color-scheme='light']) .m_a513464:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+      border: 1px solid var(--mantine-color-gray-3);
 }
 
   :where([data-mantine-color-scheme='dark']) .m_a513464:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+      border: 1px solid var(--mantine-color-dark-4);
 }
 
 .m_a4ceffb {
   box-sizing: border-box;
   margin-inline-end: var(--mantine-spacing-md);
-  width: calc(1.75rem * var(--mantine-scale));
-  height: calc(1.75rem * var(--mantine-scale));
-  border-radius: calc(1.75rem * var(--mantine-scale));
+  width: 28px;
+  height: 28px;
+  border-radius: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -75,7 +75,7 @@
 }
 
 .m_3feedf16 {
-  margin-bottom: calc(0.125rem * var(--mantine-scale));
+  margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: var(--mantine-font-size-sm);