add css generating script and package.json hook

Author: Philip Weiss

src/DefaultHandle.jsx

@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { withStyles, withStylesPropTypes } from 'react-with-styles';
 
-import {
-  DEFAULT_HANDLE_WIDTH_UNITS,
-  BACKGROUND_HEIGHT_UNITS,
-  VERTICAL,
-} from './constants/SliderConstants';
+import { VERTICAL } from './constants/SliderConstants';
 
 import handlePropTypes, { handleDefaultProps } from './propTypes/HandlePropTypes';
 
@@ -52,10 +48,10 @@ DefaultHandle.propTypes = propTypes;
 
 DefaultHandle.defaultProps = defaultProps;
 
-export default withStyles(({ color, unit }) => ({
+export default withStyles(({ color, unit, constants }) => ({
   DefaultHandle_handle: {
-    width: DEFAULT_HANDLE_WIDTH_UNITS * 3.8 * unit,
-    height: DEFAULT_HANDLE_WIDTH_UNITS * 3.8 * unit,
+    width: 2 * constants.DEFAULT_HANDLE_WIDTH * unit,
+    height: 2 * constants.DEFAULT_HANDLE_WIDTH * unit,
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: color.grey,
@@ -65,7 +61,7 @@ export default withStyles(({ color, unit }) => ({
     zIndex: 2,
     boxShadow: `0 ${unit / 4}px ${unit / 4}px ${color.textDisabled}`,
     ':focus': {
-      boxShadow: `${color.focus} 0 0 2px 2px`,
+      boxShadow: `${color.focus} 0 0 1px 1px`,
     },
 
     ':after': {
@@ -99,33 +95,21 @@ export default withStyles(({ color, unit }) => ({
       width: 1,
       left: 13,
     },
-
-    background: {
-      borderRadius: 15,
-    },
   },
 
   DefaultHandle_handle__vertical: {
-    marginTop: -(DEFAULT_HANDLE_WIDTH_UNITS * 1.9) * unit,
-    left: ((BACKGROUND_HEIGHT_UNITS * 1.9) - (DEFAULT_HANDLE_WIDTH_UNITS * 1.9)) * unit,
-    progress: {
-      left: 2,
-      width: 13,
-    },
-    handle: {
-      left: -5,
-      marginTop: -12,
+    marginTop: -(constants.DEFAULT_HANDLE_WIDTH) * unit,
+    left: (constants.BACKGROUND_HEIGHT - constants.DEFAULT_HANDLE_WIDTH) * unit,
 
-      ':before': {
-        top: 10,
-      },
+    ':before': {
+      top: 10,
+    },
 
-      ':after': {
-        top: 13,
-        left: 8,
-        height: 1,
-        width: 10,
-      },
+    ':after': {
+      top: 13,
+      left: 8,
+      height: 1,
+      width: 10,
     },
   },
 

src/DefaultProgressBar.jsx

@@ -60,7 +60,7 @@ export default withStyles(({ color, unit }) => ({
   },
 
   DefaultProgressBar_progressBar: {
-    backgroundColor: color.teal,
+    backgroundColor: color.progressBar,
     position: 'absolute',
   },
 

src/constants/SliderConstants.js

@@ -12,7 +12,5 @@ export const KEYS = {
 export const PERCENT_EMPTY = 0;
 export const PERCENT_FULL = 100;
 export const DEFAULT_STEP = 1;
-export const BACKGROUND_HEIGHT_UNITS = 0.5;
-export const DEFAULT_HANDLE_WIDTH_UNITS = 0.8;
 export const HORIZONTAL = 'horizontal';
 export const VERTICAL = 'vertical';

src/themes/DefaultTheme.js

@@ -1,11 +1,29 @@
+const core = {
+  black: 'black',
+  white: '#fcfcfc',
+  grey: '#d8d8d8',
+  teal: '#abc4e8',
+  lightgrey: '#dbdbdb',
+};
+
 const DefaultTheme = {
   unit: 8,
-  responsive: {},
+
+  responsive: {
+    mediumAndAbove: '@media (min-width: 744px)',
+    largeAndAbove: '@media (min-width: 1128px)',
+  },
+
+  constants: {
+    DEFAULT_HANDLE_WIDTH: 1.5,
+    BACKGROUND_HEIGHT: 0.25,
+  },
+
   color: {
-    black: 'black',
-    white: '#fcfcfc',
-    grey: '#d8d8d8',
-    teal: '#abc4e8',
+    ...core,
+    progressBar: core.teal,
+    focus: core.teal,
+    textDisabled: core.lightgrey,
 
     buttons: {
       defaultDisabledColor: 'blue',