Add light-root, dark-root, ltr and not-ltr mixins

mantinedev · Oct 15, 2023 · 3905b4f · 3905b4f
1 parent bcf81c6
commit 3905b4f
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/src/preset.ts b/src/preset.ts
@@ -11,6 +11,14 @@ function colorSchemeMixin(colorScheme: 'light' | 'dark') {
   };
 }
 
+function rootColorSchemeMixin(colorScheme: 'light' | 'dark') {
+  return {
+    [`&[data-mantine-color-scheme='${colorScheme}']`]: {
+      '@mixin-content': {},
+    },
+  };
+}
+
 const hoverMixin = {
   '@media (hover: hover)': {
     '&:hover': {
@@ -30,12 +38,24 @@ const rtlMixin = {
   },
 };
 
+const ltrMixin = {
+  '[dir="ltr"] &': {
+    '@mixin-content': {},
+  },
+};
+
 const notRtlMixin = {
   ':root:not([dir="rtl"]) &': {
     '@mixin-content': {},
   },
 };
 
+const notLtrMixin = {
+  ':root:not([dir="ltr"]) &': {
+    '@mixin-content': {},
+  },
+};
+
 module.exports = () => {
   return {
     postcssPlugin: 'postcss-preset-mantine',
@@ -47,9 +67,13 @@ module.exports = () => {
         mixins: {
           light: colorSchemeMixin('light'),
           dark: colorSchemeMixin('dark'),
+          'light-root': rootColorSchemeMixin('light'),
+          'dark-root': rootColorSchemeMixin('dark'),
           hover: hoverMixin,
           rtl: rtlMixin,
+          ltr: ltrMixin,
           'not-rtl': notRtlMixin,
+          'not-ltr': notLtrMixin,
         },
       }),
     ],