Support nested themes (#107)

Co-authored-by: Bogdan Mihai <bogdan@thinkout.io> Co-authored-by: mikbry <mik@miklabs.com>
mikbry · Feb 7, 2021 · b731234 · b731234
1 parent ebbfa71
commit b731234
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 80 deletions.
diff --git a/src/components/ColorBox/AlphaSlider.jsx b/src/components/ColorBox/AlphaSlider.jsx
@@ -6,45 +6,69 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import styled from 'styled-components';
 import Slider from '@material-ui/core/Slider';
+import { makeStyles } from '@material-ui/core/styles';
+import * as CommonTypes from '../../helpers/commonTypes';
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-export default styled(({ color, ...other }) => <Slider {...other} />)`
-  color: #6666;
-  width: 100%;
-  height: 16px;
-  padding: 0;
-  background: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
-  background-color: rgba(0, 0, 0, 0);
-  background-position-x: 0%, 0%, 0%, 0%;
-  background-position-y: 0%, 0%, 0%, 0%;
-  background-size: auto, auto, auto, auto;
-  background-size: 8px 8px;
-  background-color: white;
-  background-position: 0 0, 4px 0, 4px -4px, 0px 4px;
-  & .MuiSlider-rail {
-    height: 16px;
-    opacity: 1;
-    background: ${props =>
-      `rgba(0, 0, 0, 0) linear-gradient(to right, ${props.color}00 0%, ${props.color} 100%) repeat scroll 0% 0%`};
-    border-radius: 0;
-  }
-  & .MuiSlider-track {
-    height: 16px;
-    opacity: 0;
-    border-radius: 4px;
-  }
-  & .MuiSlider-thumb {
-    width: 16px;
-    height: 16px;
-    margin-top: 0px;
-    margin-left: -8px;
-    background-color: #f0f0f0;
-    box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
-    &:focus {
-      box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
-    }
-  }
-`;
+const useStyles = makeStyles({
+  root: {
+    color: '#666',
+    width: '100%',
+    height: 16,
+    padding: 0,
+    background:
+      'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)',
+    backgroundSize: '8px 8px',
+    backgroundColor: 'white',
+    backgroundPosition: '0 0, 4px 0, 4px -4px, 0px 4px',
+  },
+
+  rail: {
+    height: 16,
+    opacity: 1,
+    background: props =>
+      `rgba(0, 0, 0, 0) linear-gradient(to right, ${props.color}00 0%, ${props.color} 100%) repeat scroll 0% 0%`,
+    borderRadius: 0,
+  },
+
+  track: {
+    height: 16,
+    opacity: 0,
+    borderRadius: 4,
+  },
+
+  thumb: {
+    width: 16,
+    height: 16,
+    marginTop: 0,
+    marginLeft: -8,
+    backgroundColor: '#f0f0f0',
+    boxShadow: 'rgba(0, 0, 0, 0.37) 0px 1px 4px 0px',
+
+    '&:focus': {
+      boxShadow: '0px 0px 0px 8px rgba(63, 81, 181, 0.16)',
+    },
+  },
+});
+
+function AlphaSlider({ color, ...props }) {
+  const classes = useStyles({ color });
+
+  return (
+    <Slider
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      classes={{
+        root: classes.root,
+        rail: classes.rail,
+        track: classes.track,
+        thumb: classes.thumb,
+      }}
+    />
+  );
+}
+AlphaSlider.propTypes = {
+  color: CommonTypes.color.isRequired,
+};
+
+export default AlphaSlider;
diff --git a/src/components/ColorBox/HueSlider.jsx b/src/components/ColorBox/HueSlider.jsx
@@ -5,45 +5,61 @@
  * This source code is licensed under the license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import styled from 'styled-components';
+import React from 'react';
 import Slider from '@material-ui/core/Slider';
+import { makeStyles } from '@material-ui/core/styles';
 
-export default styled(Slider)`
-  width: 100%;
-  height: 16px;
-  padding: 0;
-  & .MuiSlider-rail {
-    height: 16px;
-    opacity: 1;
-    background: rgba(0, 0, 0, 0)
-      linear-gradient(
-        to right,
-        rgb(255, 0, 0) 0%,
-        rgb(255, 255, 0) 17%,
-        rgb(0, 255, 0) 33%,
-        rgb(0, 255, 255) 50%,
-        rgb(0, 0, 255) 67%,
-        rgb(255, 0, 255) 83%,
-        rgb(255, 0, 0) 100%
-      )
-      repeat scroll 0% 0%;
-    border-radius: 0;
-  }
-  & .MuiSlider-track {
-    height: 16px;
-    opacity: 0;
-    border-radius: 4px;
-    background-color: transparent;
-  }
-  & .MuiSlider-thumb {
-    width: 16px;
-    height: 16px;
-    margin-top: 0px;
-    margin-left: -8px;
-    background-color: #f0f0f0;
-    box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
-    &:focus {
-      box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
-    }
-  }
-`;
+const useStyles = makeStyles(() => ({
+  root: {
+    width: '100%',
+    height: 16,
+    padding: 0,
+  },
+
+  rail: {
+    height: 16,
+    opacity: 1,
+    background:
+      'rgba(0, 0, 0, 0) linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100% ) repeat scroll 0% 0%',
+    borderRadius: 0,
+  },
+
+  track: {
+    height: 16,
+    opacity: 0,
+    borderRadius: 4,
+    backgroundColor: 'transparent',
+  },
+
+  thumb: {
+    width: 16,
+    height: 16,
+    marginTop: 0,
+    marginLeft: -8,
+    backgroundColor: '#f0f0f0',
+    boxShadow: 'rgba(0, 0, 0, 0.37) 0px 1px 4px 0px',
+
+    '&:focus': {
+      boxShadow: '0px 0px 0px 8px rgba(63, 81, 181, 0.16)',
+    },
+  },
+}));
+
+function HueSlider(props) {
+  const classes = useStyles();
+
+  return (
+    <Slider
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      classes={{
+        root: classes.root,
+        rail: classes.rail,
+        track: classes.track,
+        thumb: classes.thumb,
+      }}
+    />
+  );
+}
+
+export default HueSlider;