Don't use Material imports in unstyled demos

michaldudak · Aug 31, 2021 · 40045aa · 40045aa
1 parent bbc5561
commit 40045aa
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 32 deletions.
diff --git a/docs/src/pages/components/buttons/UnstyledButtonCustom.js b/docs/src/pages/components/buttons/UnstyledButtonCustom.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import ButtonUnstyled, {
   buttonUnstyledClasses,
 } from '@material-ui/unstyled/ButtonUnstyled';
-import { ThemeProvider, createTheme } from '@material-ui/core/styles';
-import { styled, alpha } from '@material-ui/system';
+import { styled } from '@material-ui/system';
 
 const ButtonRoot = React.forwardRef(function ButtonRoot(props, ref) {
   const { children, ...other } = props;
@@ -28,24 +27,39 @@ const CustomButtonRoot = styled(ButtonRoot)(
   ({ theme }) => `
   overflow: visible;
   cursor: pointer;
-  
+  --main-color: ${
+    theme.palette.mode === 'light' ? 'rgb(25,118,210)' : 'rgb(144,202,249)'
+  };
+  --hover-color: ${
+    theme.palette.mode === 'light'
+      ? 'rgba(25,118,210,0.04)'
+      : 'rgba(144,202,249,0.08)'
+  };
+  --active-color: ${
+    theme.palette.mode === 'light'
+      ? 'rgba(25,118,210,0.12)'
+      : 'rgba(144,202,249,0.24)'
+  };
+
   & polygon {
     fill: transparent;
     transition: all 800ms ease;
     pointer-events: none;
   }
   
   & .bg {
-    stroke: ${theme.palette.primary.main};
+    stroke: var(--main-color);
     stroke-width: 0.5;
     filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
+    fill: transparent;
   }
 
   & .borderEffect {
-    stroke: ${theme.palette.primary.main};
+    stroke: var(--main-color);
     stroke-width: 2;
     stroke-dasharray: 150 600;
     stroke-dashoffset: 150;
+    fill: transparent;
   }
 
   &:hover,
@@ -55,7 +69,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     }
 
     .bg {
-      fill: ${alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)};
+      fill: var(--hover-color);
     }
   }
 
@@ -66,10 +80,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
 
   &.${buttonUnstyledClasses.active} { 
     & .bg {
-      fill: ${alpha(
-        theme.palette.primary.main,
-        theme.palette.action.activatedOpacity,
-      )};
+      fill: var(--active-color);
       transition: fill 300ms ease-out;
     }
   }
@@ -85,7 +96,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${theme.palette.primary.main};
+      color: var(--main-color);
       text-transform: uppercase;
     }
 
@@ -100,9 +111,5 @@ const SvgButton = React.forwardRef(function SvgButton(props, ref) {
 });
 
 export default function UnstyledButtonCustom() {
-  return (
-    <ThemeProvider theme={createTheme()}>
-      <SvgButton>Button</SvgButton>
-    </ThemeProvider>
-  );
+  return <SvgButton>Button</SvgButton>;
 }
diff --git a/docs/src/pages/components/buttons/UnstyledButtonCustom.tsx b/docs/src/pages/components/buttons/UnstyledButtonCustom.tsx
@@ -3,8 +3,7 @@ import ButtonUnstyled, {
   ButtonUnstyledProps,
   buttonUnstyledClasses,
 } from '@material-ui/unstyled/ButtonUnstyled';
-import { Theme, ThemeProvider, createTheme } from '@material-ui/core/styles';
-import { styled, alpha } from '@material-ui/system';
+import { styled, Theme } from '@material-ui/system';
 
 const ButtonRoot = React.forwardRef(function ButtonRoot(
   props: React.PropsWithChildren<{}>,
@@ -27,24 +26,39 @@ const CustomButtonRoot = styled(ButtonRoot)(
   ({ theme }: { theme: Theme }) => `
   overflow: visible;
   cursor: pointer;
-  
+  --main-color: ${
+    theme.palette.mode === 'light' ? 'rgb(25,118,210)' : 'rgb(144,202,249)'
+  };
+  --hover-color: ${
+    theme.palette.mode === 'light'
+      ? 'rgba(25,118,210,0.04)'
+      : 'rgba(144,202,249,0.08)'
+  };
+  --active-color: ${
+    theme.palette.mode === 'light'
+      ? 'rgba(25,118,210,0.12)'
+      : 'rgba(144,202,249,0.24)'
+  };
+
   & polygon {
     fill: transparent;
     transition: all 800ms ease;
     pointer-events: none;
   }
   
   & .bg {
-    stroke: ${theme.palette.primary.main};
+    stroke: var(--main-color);
     stroke-width: 0.5;
     filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
+    fill: transparent;
   }
 
   & .borderEffect {
-    stroke: ${theme.palette.primary.main};
+    stroke: var(--main-color);
     stroke-width: 2;
     stroke-dasharray: 150 600;
     stroke-dashoffset: 150;
+    fill: transparent;
   }
 
   &:hover,
@@ -54,7 +68,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
     }
 
     .bg {
-      fill: ${alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)};
+      fill: var(--hover-color);
     }
   }
 
@@ -65,10 +79,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
 
   &.${buttonUnstyledClasses.active} { 
     & .bg {
-      fill: ${alpha(
-        theme.palette.primary.main,
-        theme.palette.action.activatedOpacity,
-      )};
+      fill: var(--active-color);
       transition: fill 300ms ease-out;
     }
   }
@@ -84,7 +95,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${theme.palette.primary.main};
+      color: var(--main-color);
       text-transform: uppercase;
     }
 
@@ -102,9 +113,5 @@ const SvgButton = React.forwardRef(function SvgButton(
 });
 
 export default function UnstyledButtonCustom() {
-  return (
-    <ThemeProvider theme={createTheme()}>
-      <SvgButton>Button</SvgButton>
-    </ThemeProvider>
-  );
+  return <SvgButton>Button</SvgButton>;
 }