@erpsquad/common 1.7.2 → 1.7.3

package/src/styles/sass/_mui-overrides.scss

@@ -1,177 +0,0 @@
-/**
- * MUI Override Layer
- * 
- * This file provides a specificity boost to all custom component styles
- * to ensure they override MUI's dynamically injected Emotion styles.
- * 
- * MUI uses Emotion which injects styles at runtime, causing them to appear
- * after static CSS in the DOM, which makes them win due to source order.
- * 
- * Solution: Increase specificity of all custom styles globally.
- */
-
-// ============================================
-// GLOBAL SPECIFICITY BOOST
-// ============================================
-
-// This selector increases specificity for all elements within the app
-// without requiring changes to individual component files
-:where(html) {
-  
-  // Typography overrides
-  .MuiTypography-root {
-    &.css-pba0ee-MuiTypography-root,
-    &.css-ghkqlm-MuiTypography-root,
-    &[class*="MuiTypography"] {
-      // Let component styles override
-    }
-  }
-  
-  // Box overrides
-  .MuiBox-root {
-    &[class*="css-"] {
-      // Component styles will have higher specificity
-    }
-  }
-  
-  // Button overrides  
-  .MuiButton-root,
-  .MuiIconButton-root {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-  
-  // Collapse/Accordion overrides
-  .MuiCollapse-root,
-  .MuiCollapse-wrapper,
-  .MuiCollapse-wrapperInner,
-  .MuiCollapse-horizontal {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-  
-  // Grid overrides
-  .MuiGrid-root,
-  .MuiGrid-container,
-  .MuiGrid-item {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-  
-  // TextField/Input overrides
-  .MuiTextField-root,
-  .MuiInputBase-root,
-  .MuiOutlinedInput-root,
-  .MuiInput-root {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-  
-  // Card overrides
-  .MuiCard-root,
-  .MuiCardContent-root,
-  .MuiCardActions-root {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-  
-  // Tabs overrides
-  .MuiTabs-root,
-  .MuiTab-root,
-  .MuiTabPanel-root {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-  
-  // Table/DataGrid overrides
-  .MuiTable-root,
-  .MuiTableCell-root,
-  .MuiTableRow-root,
-  .MuiDataGrid-root {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-  
-  // Divider overrides
-  .MuiDivider-root {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-  
-  // All other MUI components
-  [class*="Mui"][class*="root"],
-  [class*="Mui"][class*="-"] {
-    &[class*="css-"] {
-      // Component styles will override
-    }
-  }
-}
-
-// ============================================
-// ALTERNATIVE: Layer-based approach (for modern browsers)
-// ============================================
-
-// Use CSS Cascade Layers to control specificity
-// This ensures component styles always win over MUI
-@supports (color: color(display-p3 1 1 1)) {
-  @layer mui-base, component-styles, utilities;
-  
-  // MUI styles will be in mui-base layer (lowest priority)
-  // Component styles will be in component-styles layer
-  // Utility classes will be in utilities layer (highest priority)
-}
-
-// ============================================
-// IMPORTANT OVERRIDES
-// ============================================
-
-// Critical overrides that must always work
-// These use !important as a last resort
-
-// Ensure dividers are visible
-html .MuiDivider-root[class*="css-"] {
-  opacity: 1 !important;
-}
-
-// Ensure proper spacing
-html .MuiBox-root[class*="css-"][style*="margin"],
-html .MuiBox-root[class*="css-"][style*="padding"] {
-  // Let inline styles work but allow component overrides
-}
-
-// Ensure text is visible
-html .MuiTypography-root[class*="css-"] {
-  opacity: 1 !important;
-}
-
-// ============================================
-// EMOTION/MUI STYLE SPECIFICITY HELPERS
-// ============================================
-
-// These utility classes can be used in components to boost specificity
-.override-mui {
-  // Add this class to force override MUI styles
-  &.MuiButton-root,
-  &.MuiBox-root,
-  &.MuiTypography-root,
-  &[class*="Mui"] {
-    // Component styles will win
-  }
-}
-
-// Wrapper class for entire application
-.erp-ui-app {
-  // All styles within this wrapper have higher specificity
-  [class*="Mui"] {
-    // Component styles will override MUI defaults
-  }
-}
-