@mantine/core 7.17.1 → 8.0.0-alpha.1

package/styles/Switch.css

@@ -23,11 +23,11 @@
   --switch-label-font-size-lg: 9px;
   --switch-label-font-size-xl: 11px;
 
-  --switch-track-label-padding-xs: 1px;
-  --switch-track-label-padding-sm: 2px;
-  --switch-track-label-padding-md: 2px;
+  --switch-track-label-padding-xs: 2px;
+  --switch-track-label-padding-sm: 2.5px;
+  --switch-track-label-padding-md: 3px;
   --switch-track-label-padding-lg: 3px;
-  --switch-track-label-padding-xl: 3px;
+  --switch-track-label-padding-xl: 3.5px;
 
   --switch-height: var(--switch-height-sm);
   --switch-width: var(--switch-width-sm);
@@ -58,7 +58,6 @@
   position: relative;
   border-radius: var(--switch-radius);
   background-color: var(--switch-bg);
-  border: 1px solid var(--switch-bd);
   height: var(--switch-height);
   min-width: var(--switch-width);
   margin: 0;
@@ -88,35 +87,27 @@
 
 .m_926b4011:checked + .m_9307d992 {
     --switch-bg: var(--switch-color);
-    --switch-bd: var(--switch-color);
     --switch-text-color: var(--mantine-color-white);
   }
 
 .m_926b4011:disabled + .m_9307d992,
   .m_926b4011[data-disabled] + .m_9307d992 {
     --switch-bg: var(--switch-disabled-color);
-    --switch-bd: var(--switch-disabled-color);
     --switch-cursor: not-allowed;
   }
 
 [data-mantine-color-scheme='light'] .m_9307d992 {
-    --switch-bg: var(--mantine-color-gray-2);
-    --switch-bd: var(--mantine-color-gray-3);
+    --switch-bg: var(--mantine-color-gray-3);
     --switch-text-color: var(--mantine-color-gray-6);
     --switch-disabled-color: var(--mantine-color-gray-2);
 }
 
 [data-mantine-color-scheme='dark'] .m_9307d992 {
-    --switch-bg: var(--mantine-color-dark-6);
-    --switch-bd: var(--mantine-color-dark-4);
+    --switch-bg: var(--mantine-color-dark-5);
     --switch-text-color: var(--mantine-color-dark-1);
     --switch-disabled-color: var(--mantine-color-dark-4);
 }
 
-.m_9307d992[data-error] {
-    --switch-bd: var(--mantine-color-error);
-  }
-
 .m_9307d992[data-label-position='left'] {
     --switch-order: 2;
   }
@@ -129,33 +120,39 @@
   background-color: var(--switch-thumb-bg, var(--mantine-color-white));
   height: var(--switch-thumb-size);
   width: var(--switch-thumb-size);
-  border: 1px solid var(--switch-thumb-bd);
   inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));
   transition: inset-inline-start 150ms ease;
 }
 
+.m_93039a1d:where([data-with-thumb-indicator])::before {
+    content: '';
+    width: 40%;
+    height: 40%;
+    background-color: var(--switch-bg);
+    position: absolute;
+    border-radius: var(--switch-radius);
+    inset: 50%;
+    transform: translate(-50%, -50%);
+  }
+
 .m_93039a1d > * {
     margin: auto;
   }
 
 .m_926b4011:checked + * > .m_93039a1d {
     --switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));
-    --switch-thumb-bd: var(--mantine-color-white);
   }
 
 .m_926b4011:disabled + * > .m_93039a1d,
   .m_926b4011[data-disabled] + * > .m_93039a1d {
-    --switch-thumb-bd: var(--switch-thumb-bg-disabled);
     --switch-thumb-bg: var(--switch-thumb-bg-disabled);
   }
 
 [data-mantine-color-scheme='light'] .m_93039a1d {
-    --switch-thumb-bd: var(--mantine-color-gray-3);
     --switch-thumb-bg-disabled: var(--mantine-color-gray-0);
 }
 
 [data-mantine-color-scheme='dark'] .m_93039a1d {
-    --switch-thumb-bd: var(--mantine-color-white);
     --switch-thumb-bg-disabled: var(--mantine-color-dark-3);
 }
 

package/styles/Switch.layer.css

@@ -23,11 +23,11 @@
   --switch-label-font-size-lg: 9px;
   --switch-label-font-size-xl: 11px;
 
-  --switch-track-label-padding-xs: 1px;
-  --switch-track-label-padding-sm: 2px;
-  --switch-track-label-padding-md: 2px;
+  --switch-track-label-padding-xs: 2px;
+  --switch-track-label-padding-sm: 2.5px;
+  --switch-track-label-padding-md: 3px;
   --switch-track-label-padding-lg: 3px;
-  --switch-track-label-padding-xl: 3px;
+  --switch-track-label-padding-xl: 3.5px;
 
   --switch-height: var(--switch-height-sm);
   --switch-width: var(--switch-width-sm);
@@ -58,7 +58,6 @@
   position: relative;
   border-radius: var(--switch-radius);
   background-color: var(--switch-bg);
-  border: 1px solid var(--switch-bd);
   height: var(--switch-height);
   min-width: var(--switch-width);
   margin: 0;
@@ -88,35 +87,27 @@
 
 .m_926b4011:checked + .m_9307d992 {
     --switch-bg: var(--switch-color);
-    --switch-bd: var(--switch-color);
     --switch-text-color: var(--mantine-color-white);
   }
 
 .m_926b4011:disabled + .m_9307d992,
   .m_926b4011[data-disabled] + .m_9307d992 {
     --switch-bg: var(--switch-disabled-color);
-    --switch-bd: var(--switch-disabled-color);
     --switch-cursor: not-allowed;
   }
 
 [data-mantine-color-scheme='light'] .m_9307d992 {
-    --switch-bg: var(--mantine-color-gray-2);
-    --switch-bd: var(--mantine-color-gray-3);
+    --switch-bg: var(--mantine-color-gray-3);
     --switch-text-color: var(--mantine-color-gray-6);
     --switch-disabled-color: var(--mantine-color-gray-2);
 }
 
 [data-mantine-color-scheme='dark'] .m_9307d992 {
-    --switch-bg: var(--mantine-color-dark-6);
-    --switch-bd: var(--mantine-color-dark-4);
+    --switch-bg: var(--mantine-color-dark-5);
     --switch-text-color: var(--mantine-color-dark-1);
     --switch-disabled-color: var(--mantine-color-dark-4);
 }
 
-.m_9307d992[data-error] {
-    --switch-bd: var(--mantine-color-error);
-  }
-
 .m_9307d992[data-label-position='left'] {
     --switch-order: 2;
   }
@@ -129,33 +120,39 @@
   background-color: var(--switch-thumb-bg, var(--mantine-color-white));
   height: var(--switch-thumb-size);
   width: var(--switch-thumb-size);
-  border: 1px solid var(--switch-thumb-bd);
   inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));
   transition: inset-inline-start 150ms ease;
 }
 
+.m_93039a1d:where([data-with-thumb-indicator])::before {
+    content: '';
+    width: 40%;
+    height: 40%;
+    background-color: var(--switch-bg);
+    position: absolute;
+    border-radius: var(--switch-radius);
+    inset: 50%;
+    transform: translate(-50%, -50%);
+  }
+
 .m_93039a1d > * {
     margin: auto;
   }
 
 .m_926b4011:checked + * > .m_93039a1d {
     --switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));
-    --switch-thumb-bd: var(--mantine-color-white);
   }
 
 .m_926b4011:disabled + * > .m_93039a1d,
   .m_926b4011[data-disabled] + * > .m_93039a1d {
-    --switch-thumb-bd: var(--switch-thumb-bg-disabled);
     --switch-thumb-bg: var(--switch-thumb-bg-disabled);
   }
 
 [data-mantine-color-scheme='light'] .m_93039a1d {
-    --switch-thumb-bd: var(--mantine-color-gray-3);
     --switch-thumb-bg-disabled: var(--mantine-color-gray-0);
 }
 
 [data-mantine-color-scheme='dark'] .m_93039a1d {
-    --switch-thumb-bd: var(--mantine-color-white);
     --switch-thumb-bg-disabled: var(--mantine-color-dark-3);
 }
 

package/styles/Tabs.css

@@ -1,8 +1,14 @@
-.m_89d60db1 {
+[data-mantine-color-scheme='light'] .m_89d60db1 {
+    --tab-border-color: var(--mantine-color-gray-3);
+}
+  [data-mantine-color-scheme='dark'] .m_89d60db1 {
+    --tab-border-color: var(--mantine-color-dark-4);
+}
+  .m_89d60db1 {
+
   display: var(--tabs-display);
   flex-direction: var(--tabs-flex-direction);
 
-  --tab-justify: flex-start;
   --tabs-list-direction: row;
   --tabs-panel-grow: unset;
   --tabs-display: block;
@@ -66,18 +72,6 @@
         --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);
 }
 
-  [data-mantine-color-scheme='light'] .m_89d60db1 {
-    --tab-border-color: var(--mantine-color-gray-3);
-}
-
-  [data-mantine-color-scheme='dark'] .m_89d60db1 {
-    --tab-border-color: var(--mantine-color-dark-4);
-}
-
-  .m_89d60db1[data-orientation='horizontal'] {
-    --tab-justify: center;
-  }
-
   .m_89d60db1[data-variant='default'] {
     --tabs-list-border-width: 2px;
   }
@@ -112,12 +106,10 @@
   justify-content: var(--tabs-justify, flex-start);
   flex-direction: var(--tabs-list-direction);
   gap: var(--tabs-list-gap);
-
-  --tab-grow: unset;
 }
 
-.m_89d33d6d[data-grow] {
-    --tab-grow: 1;
+.m_89d33d6d:where([data-grow]) .m_4ec4dce6 {
+    flex: 1;
   }
 
 .m_b0c91715 {
@@ -134,12 +126,9 @@
   align-items: center;
   line-height: 1;
   user-select: none;
-  flex-grow: var(--tab-grow);
-  justify-content: var(--tab-justify);
 }
 
-.m_4ec4dce6:disabled,
-  .m_4ec4dce6[data-disabled] {
+.m_4ec4dce6:where(:disabled, [data-disabled]) {
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -152,27 +141,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: var(--tab-section-margin-left, 0);
-  margin-right: var(--tab-section-margin-right, 0);
 }
 
-.m_fc420b1f[data-position='left']:not(:only-child) {
-      --tab-section-margin-right: var(--mantine-spacing-xs);
-    }
-
-[dir="rtl"] .m_fc420b1f[data-position='left']:not(:only-child) {
-        --tab-section-margin-right: 0rem;
-        --tab-section-margin-left: var(--mantine-spacing-xs);
-}
-
-.m_fc420b1f[data-position='right']:not(:only-child) {
-      --tab-section-margin-left: var(--mantine-spacing-xs);
-    }
+.m_fc420b1f:where([data-position='left']:not(:only-child)) {
+    margin-inline-end: var(--mantine-spacing-xs);
+  }
 
-[dir="rtl"] .m_fc420b1f[data-position='right']:not(:only-child) {
-        --tab-section-margin-left: 0rem;
-        --tab-section-margin-right: var(--mantine-spacing-xs);
-}
+.m_fc420b1f:where([data-position='right']:not(:only-child)) {
+    margin-inline-start: var(--mantine-spacing-xs);
+  }
 
 /*************************************** default variant ***************************************/
 .m_576c9d4 {
@@ -181,9 +158,7 @@
 .m_576c9d4::before {
     content: '';
     position: absolute;
-    border-color: var(--tab-border-color);
-    border-width: var(--tabs-list-border-size);
-    border-style: solid;
+    border: 1px solid var(--tab-border-color);
     bottom: var(--tabs-list-line-bottom);
     inset-inline-start: var(--tabs-list-line-start);
     inset-inline-end: var(--tabs-list-line-end);
@@ -195,9 +170,7 @@
   border-width: var(--tab-border-width);
   border-style: solid;
   border-color: transparent;
-  background-color: var(--tab-bg);
-
-  --tab-bg: transparent;
+  background-color: transparent;
 }
 
 .m_539e827b:where([data-active]) {
@@ -205,10 +178,9 @@
   }
 
 @media (hover: hover) {
-
-  .m_539e827b:hover {
-    --tab-bg: var(--tab-hover-color);
-  }
+    .m_539e827b:hover {
+    background-color: var(--tab-hover-color);
+    }
 
     .m_539e827b:hover:where(:not([data-active])) {
       border-color: var(--tab-border-color);
@@ -216,10 +188,9 @@
 }
 
 @media (hover: none) {
-
-  .m_539e827b:active {
-    --tab-bg: var(--tab-hover-color);
-  }
+    .m_539e827b:active {
+    background-color: var(--tab-hover-color);
+    }
 
     .m_539e827b:active:where(:not([data-active])) {
       border-color: var(--tab-border-color);
@@ -227,17 +198,15 @@
 }
 
 @media (hover: hover) {
-
-  .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover {
-      --tab-bg: transparent;
-  }
+    .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover {
+      background-color: transparent;
+    }
 }
 
 @media (hover: none) {
-
-  .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active {
-      --tab-bg: transparent;
-  }
+    .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active {
+      background-color: transparent;
+    }
 }
 
 /*************************************** outline variant ***************************************/
@@ -369,30 +338,26 @@
   --tab-color: inherit;
 }
 @media (hover: hover) {
-
-  .m_c3381914:not([data-disabled]):hover {
+    .m_c3381914:not([data-disabled]):hover {
       --tab-bg: var(--tab-hover-color);
-  }
+    }
 }
 @media (hover: none) {
-
-  .m_c3381914:not([data-disabled]):active {
+    .m_c3381914:not([data-disabled]):active {
       --tab-bg: var(--tab-hover-color);
-  }
+    }
 }
 .m_c3381914[data-active][data-active] {
     --tab-bg: var(--tabs-color);
     --tab-color: var(--tabs-text-color, var(--mantine-color-white));
   }
 @media (hover: hover) {
-
-  .m_c3381914[data-active][data-active]:hover {
+    .m_c3381914[data-active][data-active]:hover {
       --tab-bg: var(--tabs-color);
-  }
+    }
 }
 @media (hover: none) {
-
-  .m_c3381914[data-active][data-active]:active {
+    .m_c3381914[data-active][data-active]:active {
       --tab-bg: var(--tabs-color);
-  }
+    }
 }

package/styles/Tabs.layer.css

@@ -1,8 +1,14 @@
-@layer mantine {.m_89d60db1 {
+@layer mantine {[data-mantine-color-scheme='light'] .m_89d60db1 {
+    --tab-border-color: var(--mantine-color-gray-3);
+}
+  [data-mantine-color-scheme='dark'] .m_89d60db1 {
+    --tab-border-color: var(--mantine-color-dark-4);
+}
+  .m_89d60db1 {
+
   display: var(--tabs-display);
   flex-direction: var(--tabs-flex-direction);
 
-  --tab-justify: flex-start;
   --tabs-list-direction: row;
   --tabs-panel-grow: unset;
   --tabs-display: block;
@@ -66,18 +72,6 @@
         --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);
 }
 
-  [data-mantine-color-scheme='light'] .m_89d60db1 {
-    --tab-border-color: var(--mantine-color-gray-3);
-}
-
-  [data-mantine-color-scheme='dark'] .m_89d60db1 {
-    --tab-border-color: var(--mantine-color-dark-4);
-}
-
-  .m_89d60db1[data-orientation='horizontal'] {
-    --tab-justify: center;
-  }
-
   .m_89d60db1[data-variant='default'] {
     --tabs-list-border-width: 2px;
   }
@@ -112,12 +106,10 @@
   justify-content: var(--tabs-justify, flex-start);
   flex-direction: var(--tabs-list-direction);
   gap: var(--tabs-list-gap);
-
-  --tab-grow: unset;
 }
 
-.m_89d33d6d[data-grow] {
-    --tab-grow: 1;
+.m_89d33d6d:where([data-grow]) .m_4ec4dce6 {
+    flex: 1;
   }
 
 .m_b0c91715 {
@@ -134,12 +126,9 @@
   align-items: center;
   line-height: 1;
   user-select: none;
-  flex-grow: var(--tab-grow);
-  justify-content: var(--tab-justify);
 }
 
-.m_4ec4dce6:disabled,
-  .m_4ec4dce6[data-disabled] {
+.m_4ec4dce6:where(:disabled, [data-disabled]) {
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -152,27 +141,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: var(--tab-section-margin-left, 0);
-  margin-right: var(--tab-section-margin-right, 0);
 }
 
-.m_fc420b1f[data-position='left']:not(:only-child) {
-      --tab-section-margin-right: var(--mantine-spacing-xs);
-    }
-
-[dir="rtl"] .m_fc420b1f[data-position='left']:not(:only-child) {
-        --tab-section-margin-right: 0rem;
-        --tab-section-margin-left: var(--mantine-spacing-xs);
-}
-
-.m_fc420b1f[data-position='right']:not(:only-child) {
-      --tab-section-margin-left: var(--mantine-spacing-xs);
-    }
+.m_fc420b1f:where([data-position='left']:not(:only-child)) {
+    margin-inline-end: var(--mantine-spacing-xs);
+  }
 
-[dir="rtl"] .m_fc420b1f[data-position='right']:not(:only-child) {
-        --tab-section-margin-left: 0rem;
-        --tab-section-margin-right: var(--mantine-spacing-xs);
-}
+.m_fc420b1f:where([data-position='right']:not(:only-child)) {
+    margin-inline-start: var(--mantine-spacing-xs);
+  }
 
 /*************************************** default variant ***************************************/
 .m_576c9d4 {
@@ -181,9 +158,7 @@
 .m_576c9d4::before {
     content: '';
     position: absolute;
-    border-color: var(--tab-border-color);
-    border-width: var(--tabs-list-border-size);
-    border-style: solid;
+    border: 1px solid var(--tab-border-color);
     bottom: var(--tabs-list-line-bottom);
     inset-inline-start: var(--tabs-list-line-start);
     inset-inline-end: var(--tabs-list-line-end);
@@ -195,9 +170,7 @@
   border-width: var(--tab-border-width);
   border-style: solid;
   border-color: transparent;
-  background-color: var(--tab-bg);
-
-  --tab-bg: transparent;
+  background-color: transparent;
 }
 
 .m_539e827b:where([data-active]) {
@@ -205,10 +178,9 @@
   }
 
 @media (hover: hover) {
-
-  .m_539e827b:hover {
-    --tab-bg: var(--tab-hover-color);
-  }
+    .m_539e827b:hover {
+    background-color: var(--tab-hover-color);
+    }
 
     .m_539e827b:hover:where(:not([data-active])) {
       border-color: var(--tab-border-color);
@@ -216,10 +188,9 @@
 }
 
 @media (hover: none) {
-
-  .m_539e827b:active {
-    --tab-bg: var(--tab-hover-color);
-  }
+    .m_539e827b:active {
+    background-color: var(--tab-hover-color);
+    }
 
     .m_539e827b:active:where(:not([data-active])) {
       border-color: var(--tab-border-color);
@@ -227,17 +198,15 @@
 }
 
 @media (hover: hover) {
-
-  .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover {
-      --tab-bg: transparent;
-  }
+    .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover {
+      background-color: transparent;
+    }
 }
 
 @media (hover: none) {
-
-  .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active {
-      --tab-bg: transparent;
-  }
+    .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active {
+      background-color: transparent;
+    }
 }
 
 /*************************************** outline variant ***************************************/
@@ -369,31 +338,27 @@
   --tab-color: inherit;
 }
 @media (hover: hover) {
-
-  .m_c3381914:not([data-disabled]):hover {
+    .m_c3381914:not([data-disabled]):hover {
       --tab-bg: var(--tab-hover-color);
-  }
+    }
 }
 @media (hover: none) {
-
-  .m_c3381914:not([data-disabled]):active {
+    .m_c3381914:not([data-disabled]):active {
       --tab-bg: var(--tab-hover-color);
-  }
+    }
 }
 .m_c3381914[data-active][data-active] {
     --tab-bg: var(--tabs-color);
     --tab-color: var(--tabs-text-color, var(--mantine-color-white));
   }
 @media (hover: hover) {
-
-  .m_c3381914[data-active][data-active]:hover {
+    .m_c3381914[data-active][data-active]:hover {
       --tab-bg: var(--tabs-color);
-  }
+    }
 }
 @media (hover: none) {
-
-  .m_c3381914[data-active][data-active]:active {
+    .m_c3381914[data-active][data-active]:active {
       --tab-bg: var(--tabs-color);
-  }
+    }
 }
 }

package/styles/baseline.css

@@ -0,0 +1,40 @@
+:root {
+  color-scheme: var(--mantine-color-scheme);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+body {
+  margin: 0;
+  font-family: var(--mantine-font-family);
+  font-size: var(--mantine-font-size-md);
+  line-height: var(--mantine-line-height);
+  background-color: var(--mantine-color-body);
+  color: var(--mantine-color-text);
+
+  -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
+  -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
+}
+
+@media screen and (max-device-width: 31.25em) {
+
+body {
+    -webkit-text-size-adjust: 100%
+}
+  }