@superdispatch/ui - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

dist-node/index.js

@@ -101,75 +101,89 @@ 'use strict';
 (function (Color) {
+  Color["White"] = "#FFFFFF";
   Color["Orange"] = "#F05432";
-  Color["Grey15"] = "#192334";
-  Color["Grey25"] = "#323C4E";
-  Color["Grey"] = "#5B6371";
-  Color["Grey45"] = "#6A707C";
-  Color["Grey60"] = "#9297A0";
-  Color["Silver80"] = "#C4CDD5";
-  Color["Silver90"] = "#E1E5EA";
-  Color["Silver93"] = "#E8ECF0";
-  Color["Silver"] = "#F3F5F8";
-  Color["Silver97"] = "#F6F7F8";
-  Color["Blue25"] = "#003980";
-  Color["Blue40"] = "#005FCC";
-  Color["Blue"] = "#0075FF";
-  Color["Blue85"] = "#B3D5FF";
-  Color["Blue95"] = "#E7F2FF";
-  Color["Green25"] = "#1E642E";
-  Color["Green35"] = "#338049";
-  Color["Green"] = "#36B352";
-  Color["Green70"] = "#91D5A0";
-  Color["Green95"] = "#ECF7EF";
-  Color["Purple35"] = "#41367B";
-  Color["Purple45"] = "#51469E";
-  Color["Purple"] = "#6757C1";
-  Color["Purple85"] = "#CDC8EA";
-  Color["Purple95"] = "#EFEDF8";
-  Color["Teal25"] = "#015F7E";
-  Color["Teal35"] = "#097CAA";
-  Color["Teal"] = "#0298CA";
-  Color["Teal85"] = "#BDE8F5";
-  Color["Teal95"] = "#E7F6FB";
-  Color["Red30"] = "#931E06";
-  Color["Red45"] = "#DB2D0A";
-  Color["Red"] = "#EC310B";
-  Color["Red80"] = "#F7AFA1";
-  Color["Red95"] = "#FDEDE8";
-  Color["Yellow30"] = "#9B6C00";
-  Color["Yellow45"] = "#E8A200";
-  Color["Yellow"] = "#FFB202";
-  Color["Yellow85"] = "#FFE8B3";
-  Color["Yellow95"] = "#FFF8E7";
+  Color["Grey100"] = "#8F949E";
+  Color["Grey200"] = "#6A707C";
+  Color["Grey300"] = "#5B6371";
+  Color["Grey400"] = "#323C4E";
+  Color["Grey500"] = "#192334";
+  Color["Silver100"] = "#F6F7F8";
+  Color["Silver200"] = "#F3F5F8";
+  Color["Silver300"] = "#E8ECF0";
+  Color["Silver400"] = "#E1E5EA";
+  Color["Silver500"] = "#C4CDD5";
+  Color["Blue50"] = "#EBF4FF";
+  Color["Blue75"] = "#CCE5FF";
+  Color["Blue100"] = "#A8D1FF";
+  Color["Blue200"] = "#66ADFF";
+  Color["Blue300"] = "#0075FF";
+  Color["Blue400"] = "#0063DB";
+  Color["Blue500"] = "#0050B2";
+  Color["Green50"] = "#ECF9EF";
+  Color["Green75"] = "#C8F4D1";
+  Color["Green100"] = "#90EAAE";
+  Color["Green200"] = "#5DDA87";
+  Color["Green300"] = "#1FA84D";
+  Color["Green400"] = "#1E8F46";
+  Color["Green500"] = "#19803D";
+  Color["Purple50"] = "#EFEEFC";
+  Color["Purple75"] = "#DCDBF5";
+  Color["Purple100"] = "#CBC8EE";
+  Color["Purple200"] = "#A7A1E8";
+  Color["Purple300"] = "#6559CF";
+  Color["Purple400"] = "#473ABB";
+  Color["Purple500"] = "#3A2F9D";
+  Color["Red50"] = "#FFEDEB";
+  Color["Red75"] = "#FDD9D3";
+  Color["Red100"] = "#FDC2BA";
+  Color["Red200"] = "#FE988B";
+  Color["Red300"] = "#EE3017";
+  Color["Red400"] = "#D9210D";
+  Color["Red500"] = "#C31909";
+  Color["Teal50"] = "#E3F6FC";
+  Color["Teal75"] = "#BEEDF9";
+  Color["Teal100"] = "#91E3F8";
+  Color["Teal200"] = "#61D3EF";
+  Color["Teal300"] = "#00A0CC";
+  Color["Teal400"] = "#008DB8";
+  Color["Teal500"] = "#007DA3";
+  Color["Yellow50"] = "#FFF9E5";
+  Color["Yellow75"] = "#FFF1C2";
+  Color["Yellow100"] = "#FFE494";
+  Color["Yellow200"] = "#FFDC6B";
+  Color["Yellow300"] = "#FFCB47";
+  Color["Yellow400"] = "#FFA91F";
+  Color["Yellow500"] = "#DB7500";
 })(exports.Color || (exports.Color = {}));
 
-const CLASS_SMALL = '.MuiButton-sizeSmall';
-const CLASS_LARGE = '.MuiButton-sizeLarge';
-const CLASS_OUTLINED = '.MuiButton-outlined';
-const CLASS_CONTAINED = '.MuiButton-contained';
-const CLASS_RED = '.Button-red';
-const CLASS_BLUE = '.Button-blue';
-const CLASS_GREEN = '.Button-green';
-const CLASS_DISABLED = '.Mui-disabled';
-const CLASS_IS_LOADING = '.Button-isLoading';
-const DEFAULT_PROGRESS_SIZE = 16;
-const LARGE_PROGRESS_SIZE = 24;
+let ButtonClassNames;
 
-function containedColor(backgroundColor, boxShadowColor, hoverBackgroundColor) {
+(function (ButtonClassNames) {
+  ButtonClassNames["root"] = "Button-root";
+  ButtonClassNames["isActive"] = "Button-isActive";
+  ButtonClassNames["isLoading"] = "Button-isLoading";
+  ButtonClassNames["colorError"] = "Button-colorError";
+  ButtonClassNames["colorSuccess"] = "Button-colorSuccess";
+  ButtonClassNames["progress"] = "Button-progress";
+})(ButtonClassNames || (ButtonClassNames = {}));
+
+function outlinedColorVariant(activeColor, activeShadowColor, activeBackgroundColor, staleColor = activeColor, staleBorderColor = activeColor) {
   return {
-    color: '#fff',
-    backgroundColor,
-    boxShadow: '0 0 0 0 transparent',
-    '&:hover': {
-      backgroundColor: hoverBackgroundColor
+    [`&.${ButtonClassNames.isLoading}`]: {
+      borderColor: staleBorderColor
     },
-    '&:focus': {
-      boxShadow: `0 0 0 3px ${boxShadowColor}`
+    [`& .${ButtonClassNames.progress}`]: {
+      color: activeColor
     },
-    [`&${CLASS_DISABLED}`]: {
-      boxShadow: 'none',
-      color: exports.Color.Silver80,
-      backgroundColor: exports.Color.Silver,
-      [`&${CLASS_IS_LOADING}`]: {
-        color: 'transparent',
-        backgroundColor
+    '&:not($disabled)': {
+      color: staleColor,
+      borderColor: staleBorderColor,
+      [`&.${ButtonClassNames.isActive}, &:hover, &:active, &:focus`]: {
+        color: activeColor
+      },
+      [`&.${ButtonClassNames.isActive}, &:hover, &:active`]: {
+        borderColor: activeColor,
+        backgroundColor: activeBackgroundColor
+      },
+      '&:focus': {
+        boxShadow: `0 0 0 2px ${activeShadowColor}`
       }
@@ -180,24 +194,15 @@ }
 
-function outlinedColor(activeColor, activeShadowColor, activeBackgroundColor, staleColor = activeColor, staleBorderColor = activeColor) {
+function containedColorVariant(backgroundColor, boxShadowColor, hoverBackgroundColor) {
   return {
-    color: staleColor,
-    borderColor: staleBorderColor,
-    boxShadow: '0 0 0 0 transparent',
-    '&:hover, &:active, &:focus': {
-      color: activeColor
+    [`&.${ButtonClassNames.isLoading}`]: {
+      backgroundColor
     },
-    '&:hover, &:active': {
-      borderColor: activeColor,
-      backgroundColor: activeBackgroundColor
-    },
-    '&:focus': {
-      boxShadow: `0 0 0 2px ${activeShadowColor}`
-    },
-    [`&${CLASS_DISABLED}`]: {
-      boxShadow: 'none',
-      color: exports.Color.Silver80,
-      borderColor: exports.Color.Silver90,
-      backgroundColor: 'transparent',
-      [`&${CLASS_IS_LOADING}`]: {
-        color: 'transparent'
+    '&:not($disabled)': {
+      backgroundColor,
+      color: exports.Color.White,
+      '&:focus': {
+        boxShadow: `0 0 0 3px ${boxShadowColor}`
+      },
+      [`&.${ButtonClassNames.isActive}, &:hover`]: {
+        backgroundColor: hoverBackgroundColor
       }
@@ -208,91 +213,116 @@ }
 
-const useStyles = core.makeStyles(theme => ({
-  root: {
-    fontSize: '14px',
-    lineHeight: '20px',
-    transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color'], {
-      duration: theme.transitions.duration.short
-    }),
-    [`&${CLASS_SMALL}`]: {
+const DEFAULT_PROGRESS_SIZE = 16;
+const LARGE_PROGRESS_SIZE = 24;
+function applyButtonStyles(theme) {
+  theme.props = theme.props || {};
+  theme.overrides = theme.overrides || {};
+  theme.props.MuiButton = {
+    disableFocusRipple: true
+  };
+  theme.overrides.MuiButton = {
+    root: {
       fontSize: '14px',
-      lineHeight: '20px'
+      lineHeight: '20px',
+      transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color'], {
+        duration: theme.transitions.duration.short
+      }),
+      '&$disabled': {
+        color: undefined
+      },
+      [`& .${ButtonClassNames.progress}`]: {
+        top: '50%',
+        left: '50%',
+        position: 'absolute',
+        marginTop: -(DEFAULT_PROGRESS_SIZE / 2),
+        marginLeft: -(DEFAULT_PROGRESS_SIZE / 2),
+        width: `${DEFAULT_PROGRESS_SIZE}px !important`,
+        height: `${DEFAULT_PROGRESS_SIZE}px !important`
+      }
     },
-    [`&${CLASS_LARGE}`]: {
-      fontSize: '16px',
-      lineHeight: '24px'
-    },
-    [`&${CLASS_OUTLINED}`]: {
-      padding: '5px 15px',
-      [`&${CLASS_SMALL}`]: {
+    sizeSmall: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      '&$outlined': {
         padding: '1px 15px'
       },
-      [`&${CLASS_LARGE}`]: {
+      '&$contained': {
+        padding: '2px 16px'
+      }
+    },
+    sizeLarge: {
+      fontSize: '16px',
+      lineHeight: '24px',
+      '&$outlined': {
         padding: '9px 39px'
       },
-      [`&${CLASS_BLUE}`]: outlinedColor(exports.Color.Blue, exports.Color.Blue85, exports.Color.Blue95, exports.Color.Grey15, exports.Color.Silver80),
-      [`&${CLASS_RED}`]: outlinedColor(exports.Color.Red, exports.Color.Red80, exports.Color.Red95),
-      [`&${CLASS_GREEN}`]: outlinedColor(exports.Color.Green, exports.Color.Green70, exports.Color.Green95)
+      '&$contained': {
+        padding: '10px 40px'
+      },
+      [`& .${ButtonClassNames.progress}`]: {
+        marginTop: -(LARGE_PROGRESS_SIZE / 2),
+        marginLeft: -(LARGE_PROGRESS_SIZE / 2),
+        width: `${LARGE_PROGRESS_SIZE}px !important`,
+        height: `${LARGE_PROGRESS_SIZE}px !important`
+      }
     },
-    [`&${CLASS_CONTAINED}`]: {
+    outlined: {
+      padding: '5px 15px',
+      border: '1px solid transparent',
+      '&$disabled': {
+        color: exports.Color.Silver500,
+        borderColor: exports.Color.Silver400
+      },
+      [`&.${ButtonClassNames.colorError}`]: outlinedColorVariant(exports.Color.Red300, exports.Color.Red100, exports.Color.Red50),
+      [`&.${ButtonClassNames.colorSuccess}`]: outlinedColorVariant(exports.Color.Green300, exports.Color.Green100, exports.Color.Green50)
+    },
+    outlinedPrimary: outlinedColorVariant(exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Grey500, exports.Color.Silver500),
+    contained: {
+      color: exports.Color.White,
       padding: '6px 16px',
-      [`&${CLASS_SMALL}`]: {
-        padding: '2px 16px'
+      boxShadow: '0 0 0 0 transparent',
+      '&:active': {
+        boxShadow: undefined
       },
-      [`&${CLASS_LARGE}`]: {
-        padding: '10px 40px'
+      '&$disabled': {
+        color: exports.Color.Silver500,
+        backgroundColor: exports.Color.Silver200
       },
-      [`&${CLASS_RED}`]: containedColor(exports.Color.Red, exports.Color.Red80, exports.Color.Red45),
-      [`&${CLASS_BLUE}`]: containedColor(exports.Color.Blue, exports.Color.Blue85, exports.Color.Blue25),
-      [`&${CLASS_GREEN}`]: containedColor(exports.Color.Green, exports.Color.Green70, exports.Color.Green25)
-    }
-  },
-  progress: {
-    top: '50%',
-    left: '50%',
-    position: 'absolute',
-    marginTop: -(DEFAULT_PROGRESS_SIZE / 2),
-    marginLeft: -(DEFAULT_PROGRESS_SIZE / 2),
-    [`${CLASS_LARGE} &`]: {
-      marginTop: -(LARGE_PROGRESS_SIZE / 2),
-      marginLeft: -(LARGE_PROGRESS_SIZE / 2)
+      [`&.${ButtonClassNames.colorError}`]: containedColorVariant(exports.Color.Red300, exports.Color.Red100, exports.Color.Red500),
+      [`&.${ButtonClassNames.colorSuccess}`]: containedColorVariant(exports.Color.Green300, exports.Color.Green100, exports.Color.Green500),
+      [`& .${ButtonClassNames.progress}`]: {
+        color: exports.Color.White
+      }
     },
-    [`${CLASS_CONTAINED} &`]: {
-      color: 'white'
-    },
-    [`${CLASS_OUTLINED + CLASS_RED} &`]: {
-      color: exports.Color.Red
-    },
-    [`${CLASS_OUTLINED + CLASS_BLUE} &`]: {
-      color: exports.Color.Grey45
-    },
-    [`${CLASS_OUTLINED + CLASS_GREEN} &`]: {
-      color: exports.Color.Green
+    containedPrimary: containedColorVariant(exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue500),
+    disabled: {
+      boxShadow: 'none',
+      [`&.${ButtonClassNames.isLoading}`]: {
+        color: 'transparent'
+      }
     }
-  }
-}), {
-  name: 'Button'
-});
+  };
+}
+
 const Button = React.forwardRef((_ref, ref) => {
   let {
+    size,
+    color,
+    variant,
     children,
     disabled,
+    isActive,
     isLoading,
-    className,
-    size = 'medium',
-    color = 'blue',
-    variant = 'outlined'
+    className
   } = _ref,
-      props = _objectWithoutProperties(_ref, ["children", "disabled", "isLoading", "className", "size", "color", "variant"]);
+      props = _objectWithoutProperties(_ref, ["size", "color", "variant", "children", "disabled", "isActive", "isLoading", "className"]);
 
-  const classes = useStyles();
   return React__default.createElement(core.Button, _extends({}, props, {
     ref: ref,
     size: size,
-    disableFocusRipple: true,
     disabled: disabled || isLoading,
-    variant: variant === 'outlined' ? 'outlined' : 'contained',
-    className: clsx(classes.root, `Button-${color}`, isLoading && `Button-isLoading`, className)
+    color: color === 'primary' ? color : undefined,
+    variant: variant === 'contained' ? variant : 'outlined',
+    className: clsx(ButtonClassNames.root, isActive && ButtonClassNames.isActive, isLoading && ButtonClassNames.isLoading, color === 'error' && ButtonClassNames.colorError, color === 'success' && ButtonClassNames.colorSuccess, className)
   }), !isLoading ? children : React__default.createElement(React__default.Fragment, null, children, React__default.createElement(core.CircularProgress, {
-    className: classes.progress,
-    size: size === 'large' ? LARGE_PROGRESS_SIZE : DEFAULT_PROGRESS_SIZE
+    className: ButtonClassNames.progress
   })));
@@ -325,10 +355,7 @@ });
       primary: {
-        main: exports.Color.Blue
+        main: exports.Color.Blue300
       },
-      secondary: {
-        main: exports.Color.Red
-      },
       action: {
-        hover: exports.Color.Silver97,
-        selected: exports.Color.Silver90
+        hover: exports.Color.Silver100,
+        selected: exports.Color.Silver400
       }
@@ -359,3 +386,3 @@ },
         ripple: {
-          color: exports.Color.Silver80
+          color: exports.Color.Silver100
         }
@@ -374,3 +401,3 @@ },
           '&$selected, &$selected:hover': {
-            color: exports.Color.Blue
+            color: exports.Color.Blue300
           }
@@ -398,5 +425,5 @@ }
         textColorPrimary: {
-          color: exports.Color.Grey15,
+          color: exports.Color.Grey500,
           '&:hover, &:focus': {
-            color: exports.Color.Blue
+            color: exports.Color.Blue300
           }
@@ -436,2 +463,3 @@ }
   });
+  applyButtonStyles(theme);
   return theme;
@@ -589,3 +617,3 @@ }
   height: '28px',
-  color: exports.Color.Grey15,
+  color: exports.Color.Grey500,
   position: 'absolute',
@@ -595,3 +623,3 @@ '&:after': _objectSpread2({}, navButtonArrowStyles),
     cursor: 'pointer',
-    color: exports.Color.Blue
+    color: exports.Color.Blue300
   }
@@ -657,3 +685,3 @@ };
   weekday: _objectSpread2({}, cellStyles, {
-    color: exports.Color.Grey
+    color: exports.Color.Grey300
   }),
@@ -679,3 +707,3 @@ body: {
   day: _objectSpread2({}, cellStyles, {
-    color: exports.Color.Grey15,
+    color: exports.Color.Grey500,
     position: 'relative',
@@ -698,3 +726,3 @@ cursor: 'pointer'
   today: {
-    color: exports.Color.Blue
+    color: exports.Color.Blue300
   },
@@ -710,5 +738,5 @@ selected: {},
   selected: {
-    background: exports.Color.Blue,
-    color: '#FFF',
-    borderRadius: '4px'
+    borderRadius: '4px',
+    color: exports.Color.White,
+    background: exports.Color.Blue300
   }
@@ -757,3 +785,3 @@ });
     borderRadius: 4,
-    background: `${exports.Color.Blue}`
+    background: `${exports.Color.Blue300}`
   }
@@ -776,3 +804,3 @@ };
   selected: {
-    color: exports.Color.Blue25,
+    color: exports.Color.Blue500,
     '&:before': {
@@ -786,3 +814,3 @@ content: '""',
       bottom: 0,
-      background: exports.Color.Blue95
+      background: exports.Color.Blue50
     },
@@ -789,0 +817,0 @@ '&:first-of-type:before': {

dist-src/button/Button.js

 import _extends from "@babel/runtime/helpers/extends";
-import { Button as MaterialButton, CircularProgress, makeStyles } from '@material-ui/core';
+import { Button as MaterialButton, CircularProgress } from '@material-ui/core';
 import clsx from 'clsx';
 import React, { forwardRef } from 'react';
-import { Color } from "../theme/Color.js";
-const CLASS_SMALL = '.MuiButton-sizeSmall';
-const CLASS_LARGE = '.MuiButton-sizeLarge';
-const CLASS_OUTLINED = '.MuiButton-outlined';
-const CLASS_CONTAINED = '.MuiButton-contained';
-const CLASS_RED = '.Button-red';
-const CLASS_BLUE = '.Button-blue';
-const CLASS_GREEN = '.Button-green';
-const CLASS_DISABLED = '.Mui-disabled';
-const CLASS_IS_LOADING = '.Button-isLoading';
-const DEFAULT_PROGRESS_SIZE = 16;
-const LARGE_PROGRESS_SIZE = 24;
-
-function containedColor(backgroundColor, boxShadowColor, hoverBackgroundColor) {
-  return {
-    color: '#fff',
-    backgroundColor,
-    boxShadow: '0 0 0 0 transparent',
-    '&:hover': {
-      backgroundColor: hoverBackgroundColor
-    },
-    '&:focus': {
-      boxShadow: `0 0 0 3px ${boxShadowColor}`
-    },
-    [`&${CLASS_DISABLED}`]: {
-      boxShadow: 'none',
-      color: Color.Silver80,
-      backgroundColor: Color.Silver,
-      [`&${CLASS_IS_LOADING}`]: {
-        color: 'transparent',
-        backgroundColor
-      }
-    }
-  };
-}
-
-function outlinedColor(activeColor, activeShadowColor, activeBackgroundColor, staleColor = activeColor, staleBorderColor = activeColor) {
-  return {
-    color: staleColor,
-    borderColor: staleBorderColor,
-    boxShadow: '0 0 0 0 transparent',
-    '&:hover, &:active, &:focus': {
-      color: activeColor
-    },
-    '&:hover, &:active': {
-      borderColor: activeColor,
-      backgroundColor: activeBackgroundColor
-    },
-    '&:focus': {
-      boxShadow: `0 0 0 2px ${activeShadowColor}`
-    },
-    [`&${CLASS_DISABLED}`]: {
-      boxShadow: 'none',
-      color: Color.Silver80,
-      borderColor: Color.Silver90,
-      backgroundColor: 'transparent',
-      [`&${CLASS_IS_LOADING}`]: {
-        color: 'transparent'
-      }
-    }
-  };
-}
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    fontSize: '14px',
-    lineHeight: '20px',
-    transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color'], {
-      duration: theme.transitions.duration.short
-    }),
-    [`&${CLASS_SMALL}`]: {
-      fontSize: '14px',
-      lineHeight: '20px'
-    },
-    [`&${CLASS_LARGE}`]: {
-      fontSize: '16px',
-      lineHeight: '24px'
-    },
-    [`&${CLASS_OUTLINED}`]: {
-      padding: '5px 15px',
-      [`&${CLASS_SMALL}`]: {
-        padding: '1px 15px'
-      },
-      [`&${CLASS_LARGE}`]: {
-        padding: '9px 39px'
-      },
-      [`&${CLASS_BLUE}`]: outlinedColor(Color.Blue, Color.Blue85, Color.Blue95, Color.Grey15, Color.Silver80),
-      [`&${CLASS_RED}`]: outlinedColor(Color.Red, Color.Red80, Color.Red95),
-      [`&${CLASS_GREEN}`]: outlinedColor(Color.Green, Color.Green70, Color.Green95)
-    },
-    [`&${CLASS_CONTAINED}`]: {
-      padding: '6px 16px',
-      [`&${CLASS_SMALL}`]: {
-        padding: '2px 16px'
-      },
-      [`&${CLASS_LARGE}`]: {
-        padding: '10px 40px'
-      },
-      [`&${CLASS_RED}`]: containedColor(Color.Red, Color.Red80, Color.Red45),
-      [`&${CLASS_BLUE}`]: containedColor(Color.Blue, Color.Blue85, Color.Blue25),
-      [`&${CLASS_GREEN}`]: containedColor(Color.Green, Color.Green70, Color.Green25)
-    }
-  },
-  progress: {
-    top: '50%',
-    left: '50%',
-    position: 'absolute',
-    marginTop: -(DEFAULT_PROGRESS_SIZE / 2),
-    marginLeft: -(DEFAULT_PROGRESS_SIZE / 2),
-    [`${CLASS_LARGE} &`]: {
-      marginTop: -(LARGE_PROGRESS_SIZE / 2),
-      marginLeft: -(LARGE_PROGRESS_SIZE / 2)
-    },
-    [`${CLASS_CONTAINED} &`]: {
-      color: 'white'
-    },
-    [`${CLASS_OUTLINED + CLASS_RED} &`]: {
-      color: Color.Red
-    },
-    [`${CLASS_OUTLINED + CLASS_BLUE} &`]: {
-      color: Color.Grey45
-    },
-    [`${CLASS_OUTLINED + CLASS_GREEN} &`]: {
-      color: Color.Green
-    }
-  }
-}), {
-  name: 'Button'
-});
+import { ButtonClassNames } from "./ButtonStyles.js";
 export const Button = forwardRef(({
+  size,
+  color,
+  variant,
   children,
   disabled,
+  isActive,
   isLoading,
   className,
-  size = 'medium',
-  color = 'blue',
-  variant = 'outlined',
   ...props
-}, ref) => {
-  const classes = useStyles();
-  return React.createElement(MaterialButton, _extends({}, props, {
-    ref: ref,
-    size: size,
-    disableFocusRipple: true,
-    disabled: disabled || isLoading,
-    variant: variant === 'outlined' ? 'outlined' : 'contained',
-    className: clsx(classes.root, `Button-${color}`, isLoading && `Button-isLoading`, className)
-  }), !isLoading ? children : React.createElement(React.Fragment, null, children, React.createElement(CircularProgress, {
-    className: classes.progress,
-    size: size === 'large' ? LARGE_PROGRESS_SIZE : DEFAULT_PROGRESS_SIZE
-  })));
-});
+}, ref) => React.createElement(MaterialButton, _extends({}, props, {
+  ref: ref,
+  size: size,
+  disabled: disabled || isLoading,
+  color: color === 'primary' ? color : undefined,
+  variant: variant === 'contained' ? variant : 'outlined',
+  className: clsx(ButtonClassNames.root, isActive && ButtonClassNames.isActive, isLoading && ButtonClassNames.isLoading, color === 'error' && ButtonClassNames.colorError, color === 'success' && ButtonClassNames.colorSuccess, className)
+}), !isLoading ? children : React.createElement(React.Fragment, null, children, React.createElement(CircularProgress, {
+  className: ButtonClassNames.progress
+}))));
 Button.displayName = 'Button';

dist-src/date-picker/DatepickerBaseStyles.js

@@ -27,3 +27,3 @@ import { createStyles } from '@material-ui/styles';
   height: '28px',
-  color: Color.Grey15,
+  color: Color.Grey500,
   position: 'absolute',
@@ -34,3 +34,3 @@ '&:after': { ...navButtonArrowStyles
     cursor: 'pointer',
-    color: Color.Blue
+    color: Color.Blue300
   }
@@ -96,3 +96,3 @@ };
   weekday: { ...cellStyles,
-    color: Color.Grey
+    color: Color.Grey300
   },
@@ -118,3 +118,3 @@ body: {
   day: { ...cellStyles,
-    color: Color.Grey15,
+    color: Color.Grey500,
     position: 'relative',
@@ -137,3 +137,3 @@ cursor: 'pointer'
   today: {
-    color: Color.Blue
+    color: Color.Blue300
   },
@@ -140,0 +140,0 @@ selected: {},

dist-src/date-picker/DatePickerStyles.js

@@ -6,7 +6,7 @@ import { makeStyles } from '@material-ui/styles';
   selected: {
-    background: Color.Blue,
-    color: '#FFF',
-    borderRadius: '4px'
+    borderRadius: '4px',
+    color: Color.White,
+    background: Color.Blue300
   }
 };
 export const useDatePickerStyles = makeStyles(datePickerStyles);

dist-src/date-picker/DateRangePickerStyles.js

@@ -16,3 +16,3 @@ import { createStyles, makeStyles } from '@material-ui/styles';
     borderRadius: 4,
-    background: `${Color.Blue}`
+    background: `${Color.Blue300}`
   }
@@ -35,3 +35,3 @@ };
   selected: {
-    color: Color.Blue25,
+    color: Color.Blue500,
     '&:before': {
@@ -45,3 +45,3 @@ content: '""',
       bottom: 0,
-      background: Color.Blue95
+      background: Color.Blue50
     },
@@ -48,0 +48,0 @@ '&:first-of-type:before': {

dist-src/theme/Color.js

 export let Color;
 
 (function (Color) {
+  Color["White"] = "#FFFFFF";
   Color["Orange"] = "#F05432";
-  Color["Grey15"] = "#192334";
-  Color["Grey25"] = "#323C4E";
-  Color["Grey"] = "#5B6371";
-  Color["Grey45"] = "#6A707C";
-  Color["Grey60"] = "#9297A0";
-  Color["Silver80"] = "#C4CDD5";
-  Color["Silver90"] = "#E1E5EA";
-  Color["Silver93"] = "#E8ECF0";
-  Color["Silver"] = "#F3F5F8";
-  Color["Silver97"] = "#F6F7F8";
-  Color["Blue25"] = "#003980";
-  Color["Blue40"] = "#005FCC";
-  Color["Blue"] = "#0075FF";
-  Color["Blue85"] = "#B3D5FF";
-  Color["Blue95"] = "#E7F2FF";
-  Color["Green25"] = "#1E642E";
-  Color["Green35"] = "#338049";
-  Color["Green"] = "#36B352";
-  Color["Green70"] = "#91D5A0";
-  Color["Green95"] = "#ECF7EF";
-  Color["Purple35"] = "#41367B";
-  Color["Purple45"] = "#51469E";
-  Color["Purple"] = "#6757C1";
-  Color["Purple85"] = "#CDC8EA";
-  Color["Purple95"] = "#EFEDF8";
-  Color["Teal25"] = "#015F7E";
-  Color["Teal35"] = "#097CAA";
-  Color["Teal"] = "#0298CA";
-  Color["Teal85"] = "#BDE8F5";
-  Color["Teal95"] = "#E7F6FB";
-  Color["Red30"] = "#931E06";
-  Color["Red45"] = "#DB2D0A";
-  Color["Red"] = "#EC310B";
-  Color["Red80"] = "#F7AFA1";
-  Color["Red95"] = "#FDEDE8";
-  Color["Yellow30"] = "#9B6C00";
-  Color["Yellow45"] = "#E8A200";
-  Color["Yellow"] = "#FFB202";
-  Color["Yellow85"] = "#FFE8B3";
-  Color["Yellow95"] = "#FFF8E7";
+  Color["Grey100"] = "#8F949E";
+  Color["Grey200"] = "#6A707C";
+  Color["Grey300"] = "#5B6371";
+  Color["Grey400"] = "#323C4E";
+  Color["Grey500"] = "#192334";
+  Color["Silver100"] = "#F6F7F8";
+  Color["Silver200"] = "#F3F5F8";
+  Color["Silver300"] = "#E8ECF0";
+  Color["Silver400"] = "#E1E5EA";
+  Color["Silver500"] = "#C4CDD5";
+  Color["Blue50"] = "#EBF4FF";
+  Color["Blue75"] = "#CCE5FF";
+  Color["Blue100"] = "#A8D1FF";
+  Color["Blue200"] = "#66ADFF";
+  Color["Blue300"] = "#0075FF";
+  Color["Blue400"] = "#0063DB";
+  Color["Blue500"] = "#0050B2";
+  Color["Green50"] = "#ECF9EF";
+  Color["Green75"] = "#C8F4D1";
+  Color["Green100"] = "#90EAAE";
+  Color["Green200"] = "#5DDA87";
+  Color["Green300"] = "#1FA84D";
+  Color["Green400"] = "#1E8F46";
+  Color["Green500"] = "#19803D";
+  Color["Purple50"] = "#EFEEFC";
+  Color["Purple75"] = "#DCDBF5";
+  Color["Purple100"] = "#CBC8EE";
+  Color["Purple200"] = "#A7A1E8";
+  Color["Purple300"] = "#6559CF";
+  Color["Purple400"] = "#473ABB";
+  Color["Purple500"] = "#3A2F9D";
+  Color["Red50"] = "#FFEDEB";
+  Color["Red75"] = "#FDD9D3";
+  Color["Red100"] = "#FDC2BA";
+  Color["Red200"] = "#FE988B";
+  Color["Red300"] = "#EE3017";
+  Color["Red400"] = "#D9210D";
+  Color["Red500"] = "#C31909";
+  Color["Teal50"] = "#E3F6FC";
+  Color["Teal75"] = "#BEEDF9";
+  Color["Teal100"] = "#91E3F8";
+  Color["Teal200"] = "#61D3EF";
+  Color["Teal300"] = "#00A0CC";
+  Color["Teal400"] = "#008DB8";
+  Color["Teal500"] = "#007DA3";
+  Color["Yellow50"] = "#FFF9E5";
+  Color["Yellow75"] = "#FFF1C2";
+  Color["Yellow100"] = "#FFE494";
+  Color["Yellow200"] = "#FFDC6B";
+  Color["Yellow300"] = "#FFCB47";
+  Color["Yellow400"] = "#FFA91F";
+  Color["Yellow500"] = "#DB7500";
 })(Color || (Color = {}));

dist-src/theme/ThemeProvider.js

 import { createMuiTheme, CssBaseline } from '@material-ui/core';
 import { ThemeProvider as MaterialThemeProvider } from '@material-ui/styles';
 import React, { useMemo } from 'react';
+import { applyButtonStyles } from "../button/ButtonStyles.js";
 import { Color } from "./Color.js";
@@ -28,10 +29,7 @@ const MOBILE_MEDIA = '@media (max-width: 767px)';
       primary: {
-        main: Color.Blue
+        main: Color.Blue300
       },
-      secondary: {
-        main: Color.Red
-      },
       action: {
-        hover: Color.Silver97,
-        selected: Color.Silver90
+        hover: Color.Silver100,
+        selected: Color.Silver400
       }
@@ -62,3 +60,3 @@ },
         ripple: {
-          color: Color.Silver80
+          color: Color.Silver100
         }
@@ -77,3 +75,3 @@ },
           '&$selected, &$selected:hover': {
-            color: Color.Blue
+            color: Color.Blue300
           }
@@ -101,5 +99,5 @@ }
         textColorPrimary: {
-          color: Color.Grey15,
+          color: Color.Grey500,
           '&:hover, &:focus': {
-            color: Color.Blue
+            color: Color.Blue300
           }
@@ -139,2 +137,3 @@ }
   });
+  applyButtonStyles(theme);
   return theme;
@@ -141,0 +140,0 @@ }

dist-types/button/Button.d.ts

 import { ButtonProps as MaterialButtonProps } from '@material-ui/core/Button';
 import React from 'react';
-import { ColorVariant } from '../theme/Color';
-export declare type ButtonColor = Exclude<ColorVariant, 'silver' | 'purple' | 'teal' | 'yellow'>;
-export interface ButtonProps extends Omit<MaterialButtonProps, 'color' | 'variant' | 'disableFocusRipple'> {
+export declare type ButtonColor = 'primary' | 'error' | 'success';
+export interface ButtonProps extends Omit<MaterialButtonProps, 'color' | 'variant'> {
     color?: ButtonColor;
+    isActive?: boolean;
     isLoading?: boolean;
     variant?: 'outlined' | 'contained';
 }
-export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "color" | "hidden" | "size" | "style" | "disabled" | "name" | "form" | "title" | "className" | "classes" | "innerRef" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "type" | "value" | "variant" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "fullWidth" | "href" | "isLoading"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "color" | "hidden" | "size" | "style" | "disabled" | "form" | "title" | "className" | "classes" | "innerRef" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "variant" | "href" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "fullWidth" | "disableFocusRipple" | "isActive" | "isLoading"> & React.RefAttributes<HTMLButtonElement>>;

dist-types/date-picker/DatePickerStyles.d.ts

 import { Color } from '../theme/Color';
 export declare const datePickerStyles: {
     selected: {
+        borderRadius: string;
+        color: Color;
         background: Color;
-        color: string;
-        borderRadius: string;
     };
@@ -8,0 +8,0 @@ outside: import("@material-ui/styles").CSSProperties | (() => import("@material-ui/styles").CSSProperties);

dist-types/theme/Color.d.ts

 export declare type ColorVariant = 'grey' | 'silver' | 'blue' | 'green' | 'purple' | 'teal' | 'red' | 'yellow';
 export declare enum Color {
+    White = "#FFFFFF",
     Orange = "#F05432",
-    Grey15 = "#192334",
-    Grey25 = "#323C4E",
-    Grey = "#5B6371",
-    Grey45 = "#6A707C",
-    Grey60 = "#9297A0",
-    Silver80 = "#C4CDD5",
-    Silver90 = "#E1E5EA",
-    Silver93 = "#E8ECF0",
-    Silver = "#F3F5F8",
-    Silver97 = "#F6F7F8",
-    Blue25 = "#003980",
-    Blue40 = "#005FCC",
-    Blue = "#0075FF",
-    Blue85 = "#B3D5FF",
-    Blue95 = "#E7F2FF",
-    Green25 = "#1E642E",
-    Green35 = "#338049",
-    Green = "#36B352",
-    Green70 = "#91D5A0",
-    Green95 = "#ECF7EF",
-    Purple35 = "#41367B",
-    Purple45 = "#51469E",
-    Purple = "#6757C1",
-    Purple85 = "#CDC8EA",
-    Purple95 = "#EFEDF8",
-    Teal25 = "#015F7E",
-    Teal35 = "#097CAA",
-    Teal = "#0298CA",
-    Teal85 = "#BDE8F5",
-    Teal95 = "#E7F6FB",
-    Red30 = "#931E06",
-    Red45 = "#DB2D0A",
-    Red = "#EC310B",
-    Red80 = "#F7AFA1",
-    Red95 = "#FDEDE8",
-    Yellow30 = "#9B6C00",
-    Yellow45 = "#E8A200",
-    Yellow = "#FFB202",
-    Yellow85 = "#FFE8B3",
-    Yellow95 = "#FFF8E7"
+    Grey100 = "#8F949E",
+    Grey200 = "#6A707C",
+    Grey300 = "#5B6371",
+    Grey400 = "#323C4E",
+    Grey500 = "#192334",
+    Silver100 = "#F6F7F8",
+    Silver200 = "#F3F5F8",
+    Silver300 = "#E8ECF0",
+    Silver400 = "#E1E5EA",
+    Silver500 = "#C4CDD5",
+    Blue50 = "#EBF4FF",
+    Blue75 = "#CCE5FF",
+    Blue100 = "#A8D1FF",
+    Blue200 = "#66ADFF",
+    Blue300 = "#0075FF",
+    Blue400 = "#0063DB",
+    Blue500 = "#0050B2",
+    Green50 = "#ECF9EF",
+    Green75 = "#C8F4D1",
+    Green100 = "#90EAAE",
+    Green200 = "#5DDA87",
+    Green300 = "#1FA84D",
+    Green400 = "#1E8F46",
+    Green500 = "#19803D",
+    Purple50 = "#EFEEFC",
+    Purple75 = "#DCDBF5",
+    Purple100 = "#CBC8EE",
+    Purple200 = "#A7A1E8",
+    Purple300 = "#6559CF",
+    Purple400 = "#473ABB",
+    Purple500 = "#3A2F9D",
+    Red50 = "#FFEDEB",
+    Red75 = "#FDD9D3",
+    Red100 = "#FDC2BA",
+    Red200 = "#FE988B",
+    Red300 = "#EE3017",
+    Red400 = "#D9210D",
+    Red500 = "#C31909",
+    Teal50 = "#E3F6FC",
+    Teal75 = "#BEEDF9",
+    Teal100 = "#91E3F8",
+    Teal200 = "#61D3EF",
+    Teal300 = "#00A0CC",
+    Teal400 = "#008DB8",
+    Teal500 = "#007DA3",
+    Yellow50 = "#FFF9E5",
+    Yellow75 = "#FFF1C2",
+    Yellow100 = "#FFE494",
+    Yellow200 = "#FFDC6B",
+    Yellow300 = "#FFCB47",
+    Yellow400 = "#FFA91F",
+    Yellow500 = "#DB7500"
 }

dist-web/index.js

 import _extends from '@babel/runtime/helpers/extends';
-import { makeStyles, Button as Button$1, CircularProgress, CssBaseline, createMuiTheme, Popover, Paper, Grid, List, ListItem, Typography, Hidden, Divider } from '@material-ui/core';
+import { Button as Button$1, CircularProgress, CssBaseline, createMuiTheme, Popover, Paper, Grid, List, ListItem, Typography, Hidden, Divider } from '@material-ui/core';
 import clsx from 'clsx';
 import React, { forwardRef, useMemo, useState } from 'react';
-import { ThemeProvider as ThemeProvider$1, createStyles, makeStyles as makeStyles$1 } from '@material-ui/styles';
+import { ThemeProvider as ThemeProvider$1, createStyles, makeStyles } from '@material-ui/styles';
 import DayPicker from 'react-day-picker';
@@ -11,75 +11,89 @@
 (function (Color) {
+  Color["White"] = "#FFFFFF";
   Color["Orange"] = "#F05432";
-  Color["Grey15"] = "#192334";
-  Color["Grey25"] = "#323C4E";
-  Color["Grey"] = "#5B6371";
-  Color["Grey45"] = "#6A707C";
-  Color["Grey60"] = "#9297A0";
-  Color["Silver80"] = "#C4CDD5";
-  Color["Silver90"] = "#E1E5EA";
-  Color["Silver93"] = "#E8ECF0";
-  Color["Silver"] = "#F3F5F8";
-  Color["Silver97"] = "#F6F7F8";
-  Color["Blue25"] = "#003980";
-  Color["Blue40"] = "#005FCC";
-  Color["Blue"] = "#0075FF";
-  Color["Blue85"] = "#B3D5FF";
-  Color["Blue95"] = "#E7F2FF";
-  Color["Green25"] = "#1E642E";
-  Color["Green35"] = "#338049";
-  Color["Green"] = "#36B352";
-  Color["Green70"] = "#91D5A0";
-  Color["Green95"] = "#ECF7EF";
-  Color["Purple35"] = "#41367B";
-  Color["Purple45"] = "#51469E";
-  Color["Purple"] = "#6757C1";
-  Color["Purple85"] = "#CDC8EA";
-  Color["Purple95"] = "#EFEDF8";
-  Color["Teal25"] = "#015F7E";
-  Color["Teal35"] = "#097CAA";
-  Color["Teal"] = "#0298CA";
-  Color["Teal85"] = "#BDE8F5";
-  Color["Teal95"] = "#E7F6FB";
-  Color["Red30"] = "#931E06";
-  Color["Red45"] = "#DB2D0A";
-  Color["Red"] = "#EC310B";
-  Color["Red80"] = "#F7AFA1";
-  Color["Red95"] = "#FDEDE8";
-  Color["Yellow30"] = "#9B6C00";
-  Color["Yellow45"] = "#E8A200";
-  Color["Yellow"] = "#FFB202";
-  Color["Yellow85"] = "#FFE8B3";
-  Color["Yellow95"] = "#FFF8E7";
+  Color["Grey100"] = "#8F949E";
+  Color["Grey200"] = "#6A707C";
+  Color["Grey300"] = "#5B6371";
+  Color["Grey400"] = "#323C4E";
+  Color["Grey500"] = "#192334";
+  Color["Silver100"] = "#F6F7F8";
+  Color["Silver200"] = "#F3F5F8";
+  Color["Silver300"] = "#E8ECF0";
+  Color["Silver400"] = "#E1E5EA";
+  Color["Silver500"] = "#C4CDD5";
+  Color["Blue50"] = "#EBF4FF";
+  Color["Blue75"] = "#CCE5FF";
+  Color["Blue100"] = "#A8D1FF";
+  Color["Blue200"] = "#66ADFF";
+  Color["Blue300"] = "#0075FF";
+  Color["Blue400"] = "#0063DB";
+  Color["Blue500"] = "#0050B2";
+  Color["Green50"] = "#ECF9EF";
+  Color["Green75"] = "#C8F4D1";
+  Color["Green100"] = "#90EAAE";
+  Color["Green200"] = "#5DDA87";
+  Color["Green300"] = "#1FA84D";
+  Color["Green400"] = "#1E8F46";
+  Color["Green500"] = "#19803D";
+  Color["Purple50"] = "#EFEEFC";
+  Color["Purple75"] = "#DCDBF5";
+  Color["Purple100"] = "#CBC8EE";
+  Color["Purple200"] = "#A7A1E8";
+  Color["Purple300"] = "#6559CF";
+  Color["Purple400"] = "#473ABB";
+  Color["Purple500"] = "#3A2F9D";
+  Color["Red50"] = "#FFEDEB";
+  Color["Red75"] = "#FDD9D3";
+  Color["Red100"] = "#FDC2BA";
+  Color["Red200"] = "#FE988B";
+  Color["Red300"] = "#EE3017";
+  Color["Red400"] = "#D9210D";
+  Color["Red500"] = "#C31909";
+  Color["Teal50"] = "#E3F6FC";
+  Color["Teal75"] = "#BEEDF9";
+  Color["Teal100"] = "#91E3F8";
+  Color["Teal200"] = "#61D3EF";
+  Color["Teal300"] = "#00A0CC";
+  Color["Teal400"] = "#008DB8";
+  Color["Teal500"] = "#007DA3";
+  Color["Yellow50"] = "#FFF9E5";
+  Color["Yellow75"] = "#FFF1C2";
+  Color["Yellow100"] = "#FFE494";
+  Color["Yellow200"] = "#FFDC6B";
+  Color["Yellow300"] = "#FFCB47";
+  Color["Yellow400"] = "#FFA91F";
+  Color["Yellow500"] = "#DB7500";
 })(Color || (Color = {}));
 
-const CLASS_SMALL = '.MuiButton-sizeSmall';
-const CLASS_LARGE = '.MuiButton-sizeLarge';
-const CLASS_OUTLINED = '.MuiButton-outlined';
-const CLASS_CONTAINED = '.MuiButton-contained';
-const CLASS_RED = '.Button-red';
-const CLASS_BLUE = '.Button-blue';
-const CLASS_GREEN = '.Button-green';
-const CLASS_DISABLED = '.Mui-disabled';
-const CLASS_IS_LOADING = '.Button-isLoading';
-const DEFAULT_PROGRESS_SIZE = 16;
-const LARGE_PROGRESS_SIZE = 24;
+let ButtonClassNames;
 
-function containedColor(backgroundColor, boxShadowColor, hoverBackgroundColor) {
+(function (ButtonClassNames) {
+  ButtonClassNames["root"] = "Button-root";
+  ButtonClassNames["isActive"] = "Button-isActive";
+  ButtonClassNames["isLoading"] = "Button-isLoading";
+  ButtonClassNames["colorError"] = "Button-colorError";
+  ButtonClassNames["colorSuccess"] = "Button-colorSuccess";
+  ButtonClassNames["progress"] = "Button-progress";
+})(ButtonClassNames || (ButtonClassNames = {}));
+
+function outlinedColorVariant(activeColor, activeShadowColor, activeBackgroundColor, staleColor = activeColor, staleBorderColor = activeColor) {
   return {
-    color: '#fff',
-    backgroundColor,
-    boxShadow: '0 0 0 0 transparent',
-    '&:hover': {
-      backgroundColor: hoverBackgroundColor
+    [`&.${ButtonClassNames.isLoading}`]: {
+      borderColor: staleBorderColor
     },
-    '&:focus': {
-      boxShadow: `0 0 0 3px ${boxShadowColor}`
+    [`& .${ButtonClassNames.progress}`]: {
+      color: activeColor
     },
-    [`&${CLASS_DISABLED}`]: {
-      boxShadow: 'none',
-      color: Color.Silver80,
-      backgroundColor: Color.Silver,
-      [`&${CLASS_IS_LOADING}`]: {
-        color: 'transparent',
-        backgroundColor
+    '&:not($disabled)': {
+      color: staleColor,
+      borderColor: staleBorderColor,
+      [`&.${ButtonClassNames.isActive}, &:hover, &:active, &:focus`]: {
+        color: activeColor
+      },
+      [`&.${ButtonClassNames.isActive}, &:hover, &:active`]: {
+        borderColor: activeColor,
+        backgroundColor: activeBackgroundColor
+      },
+      '&:focus': {
+        boxShadow: `0 0 0 2px ${activeShadowColor}`
       }
@@ -90,24 +104,15 @@ }
 
-function outlinedColor(activeColor, activeShadowColor, activeBackgroundColor, staleColor = activeColor, staleBorderColor = activeColor) {
+function containedColorVariant(backgroundColor, boxShadowColor, hoverBackgroundColor) {
   return {
-    color: staleColor,
-    borderColor: staleBorderColor,
-    boxShadow: '0 0 0 0 transparent',
-    '&:hover, &:active, &:focus': {
-      color: activeColor
+    [`&.${ButtonClassNames.isLoading}`]: {
+      backgroundColor
     },
-    '&:hover, &:active': {
-      borderColor: activeColor,
-      backgroundColor: activeBackgroundColor
-    },
-    '&:focus': {
-      boxShadow: `0 0 0 2px ${activeShadowColor}`
-    },
-    [`&${CLASS_DISABLED}`]: {
-      boxShadow: 'none',
-      color: Color.Silver80,
-      borderColor: Color.Silver90,
-      backgroundColor: 'transparent',
-      [`&${CLASS_IS_LOADING}`]: {
-        color: 'transparent'
+    '&:not($disabled)': {
+      backgroundColor,
+      color: Color.White,
+      '&:focus': {
+        boxShadow: `0 0 0 3px ${boxShadowColor}`
+      },
+      [`&.${ButtonClassNames.isActive}, &:hover`]: {
+        backgroundColor: hoverBackgroundColor
       }
@@ -118,91 +123,114 @@ }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    fontSize: '14px',
-    lineHeight: '20px',
-    transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color'], {
-      duration: theme.transitions.duration.short
-    }),
-    [`&${CLASS_SMALL}`]: {
+const DEFAULT_PROGRESS_SIZE = 16;
+const LARGE_PROGRESS_SIZE = 24;
+function applyButtonStyles(theme) {
+  theme.props = theme.props || {};
+  theme.overrides = theme.overrides || {};
+  theme.props.MuiButton = {
+    disableFocusRipple: true
+  };
+  theme.overrides.MuiButton = {
+    root: {
       fontSize: '14px',
-      lineHeight: '20px'
+      lineHeight: '20px',
+      transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color'], {
+        duration: theme.transitions.duration.short
+      }),
+      '&$disabled': {
+        color: undefined
+      },
+      [`& .${ButtonClassNames.progress}`]: {
+        top: '50%',
+        left: '50%',
+        position: 'absolute',
+        marginTop: -(DEFAULT_PROGRESS_SIZE / 2),
+        marginLeft: -(DEFAULT_PROGRESS_SIZE / 2),
+        width: `${DEFAULT_PROGRESS_SIZE}px !important`,
+        height: `${DEFAULT_PROGRESS_SIZE}px !important`
+      }
     },
-    [`&${CLASS_LARGE}`]: {
-      fontSize: '16px',
-      lineHeight: '24px'
-    },
-    [`&${CLASS_OUTLINED}`]: {
-      padding: '5px 15px',
-      [`&${CLASS_SMALL}`]: {
+    sizeSmall: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      '&$outlined': {
         padding: '1px 15px'
       },
-      [`&${CLASS_LARGE}`]: {
+      '&$contained': {
+        padding: '2px 16px'
+      }
+    },
+    sizeLarge: {
+      fontSize: '16px',
+      lineHeight: '24px',
+      '&$outlined': {
         padding: '9px 39px'
       },
-      [`&${CLASS_BLUE}`]: outlinedColor(Color.Blue, Color.Blue85, Color.Blue95, Color.Grey15, Color.Silver80),
-      [`&${CLASS_RED}`]: outlinedColor(Color.Red, Color.Red80, Color.Red95),
-      [`&${CLASS_GREEN}`]: outlinedColor(Color.Green, Color.Green70, Color.Green95)
+      '&$contained': {
+        padding: '10px 40px'
+      },
+      [`& .${ButtonClassNames.progress}`]: {
+        marginTop: -(LARGE_PROGRESS_SIZE / 2),
+        marginLeft: -(LARGE_PROGRESS_SIZE / 2),
+        width: `${LARGE_PROGRESS_SIZE}px !important`,
+        height: `${LARGE_PROGRESS_SIZE}px !important`
+      }
     },
-    [`&${CLASS_CONTAINED}`]: {
+    outlined: {
+      padding: '5px 15px',
+      border: '1px solid transparent',
+      '&$disabled': {
+        color: Color.Silver500,
+        borderColor: Color.Silver400
+      },
+      [`&.${ButtonClassNames.colorError}`]: outlinedColorVariant(Color.Red300, Color.Red100, Color.Red50),
+      [`&.${ButtonClassNames.colorSuccess}`]: outlinedColorVariant(Color.Green300, Color.Green100, Color.Green50)
+    },
+    outlinedPrimary: outlinedColorVariant(Color.Blue300, Color.Blue100, Color.Blue50, Color.Grey500, Color.Silver500),
+    contained: {
+      color: Color.White,
       padding: '6px 16px',
-      [`&${CLASS_SMALL}`]: {
-        padding: '2px 16px'
+      boxShadow: '0 0 0 0 transparent',
+      '&:active': {
+        boxShadow: undefined
       },
-      [`&${CLASS_LARGE}`]: {
-        padding: '10px 40px'
+      '&$disabled': {
+        color: Color.Silver500,
+        backgroundColor: Color.Silver200
       },
-      [`&${CLASS_RED}`]: containedColor(Color.Red, Color.Red80, Color.Red45),
-      [`&${CLASS_BLUE}`]: containedColor(Color.Blue, Color.Blue85, Color.Blue25),
-      [`&${CLASS_GREEN}`]: containedColor(Color.Green, Color.Green70, Color.Green25)
-    }
-  },
-  progress: {
-    top: '50%',
-    left: '50%',
-    position: 'absolute',
-    marginTop: -(DEFAULT_PROGRESS_SIZE / 2),
-    marginLeft: -(DEFAULT_PROGRESS_SIZE / 2),
-    [`${CLASS_LARGE} &`]: {
-      marginTop: -(LARGE_PROGRESS_SIZE / 2),
-      marginLeft: -(LARGE_PROGRESS_SIZE / 2)
+      [`&.${ButtonClassNames.colorError}`]: containedColorVariant(Color.Red300, Color.Red100, Color.Red500),
+      [`&.${ButtonClassNames.colorSuccess}`]: containedColorVariant(Color.Green300, Color.Green100, Color.Green500),
+      [`& .${ButtonClassNames.progress}`]: {
+        color: Color.White
+      }
     },
-    [`${CLASS_CONTAINED} &`]: {
-      color: 'white'
-    },
-    [`${CLASS_OUTLINED + CLASS_RED} &`]: {
-      color: Color.Red
-    },
-    [`${CLASS_OUTLINED + CLASS_BLUE} &`]: {
-      color: Color.Grey45
-    },
-    [`${CLASS_OUTLINED + CLASS_GREEN} &`]: {
-      color: Color.Green
+    containedPrimary: containedColorVariant(Color.Blue300, Color.Blue100, Color.Blue500),
+    disabled: {
+      boxShadow: 'none',
+      [`&.${ButtonClassNames.isLoading}`]: {
+        color: 'transparent'
+      }
     }
-  }
-}), {
-  name: 'Button'
-});
+  };
+}
+
 const Button = forwardRef(({
+  size,
+  color,
+  variant,
   children,
   disabled,
+  isActive,
   isLoading,
   className,
-  size = 'medium',
-  color = 'blue',
-  variant = 'outlined',
   ...props
-}, ref) => {
-  const classes = useStyles();
-  return React.createElement(Button$1, _extends({}, props, {
-    ref: ref,
-    size: size,
-    disableFocusRipple: true,
-    disabled: disabled || isLoading,
-    variant: variant === 'outlined' ? 'outlined' : 'contained',
-    className: clsx(classes.root, `Button-${color}`, isLoading && `Button-isLoading`, className)
-  }), !isLoading ? children : React.createElement(React.Fragment, null, children, React.createElement(CircularProgress, {
-    className: classes.progress,
-    size: size === 'large' ? LARGE_PROGRESS_SIZE : DEFAULT_PROGRESS_SIZE
-  })));
-});
+}, ref) => React.createElement(Button$1, _extends({}, props, {
+  ref: ref,
+  size: size,
+  disabled: disabled || isLoading,
+  color: color === 'primary' ? color : undefined,
+  variant: variant === 'contained' ? variant : 'outlined',
+  className: clsx(ButtonClassNames.root, isActive && ButtonClassNames.isActive, isLoading && ButtonClassNames.isLoading, color === 'error' && ButtonClassNames.colorError, color === 'success' && ButtonClassNames.colorSuccess, className)
+}), !isLoading ? children : React.createElement(React.Fragment, null, children, React.createElement(CircularProgress, {
+  className: ButtonClassNames.progress
+}))));
 Button.displayName = 'Button';
@@ -233,10 +261,7 @@
       primary: {
-        main: Color.Blue
+        main: Color.Blue300
       },
-      secondary: {
-        main: Color.Red
-      },
       action: {
-        hover: Color.Silver97,
-        selected: Color.Silver90
+        hover: Color.Silver100,
+        selected: Color.Silver400
       }
@@ -267,3 +292,3 @@ },
         ripple: {
-          color: Color.Silver80
+          color: Color.Silver100
         }
@@ -282,3 +307,3 @@ },
           '&$selected, &$selected:hover': {
-            color: Color.Blue
+            color: Color.Blue300
           }
@@ -306,5 +331,5 @@ }
         textColorPrimary: {
-          color: Color.Grey15,
+          color: Color.Grey500,
           '&:hover, &:focus': {
-            color: Color.Blue
+            color: Color.Blue300
           }
@@ -344,2 +369,3 @@ }
   });
+  applyButtonStyles(theme);
   return theme;
@@ -491,3 +517,3 @@ }
   height: '28px',
-  color: Color.Grey15,
+  color: Color.Grey500,
   position: 'absolute',
@@ -498,3 +524,3 @@ '&:after': { ...navButtonArrowStyles
     cursor: 'pointer',
-    color: Color.Blue
+    color: Color.Blue300
   }
@@ -560,3 +586,3 @@ };
   weekday: { ...cellStyles,
-    color: Color.Grey
+    color: Color.Grey300
   },
@@ -582,3 +608,3 @@ body: {
   day: { ...cellStyles,
-    color: Color.Grey15,
+    color: Color.Grey500,
     position: 'relative',
@@ -601,3 +627,3 @@ cursor: 'pointer'
   today: {
-    color: Color.Blue
+    color: Color.Blue300
   },
@@ -613,8 +639,8 @@ selected: {},
   selected: {
-    background: Color.Blue,
-    color: '#FFF',
-    borderRadius: '4px'
+    borderRadius: '4px',
+    color: Color.White,
+    background: Color.Blue300
   }
 };
-const useDatePickerStyles = makeStyles$1(datePickerStyles);
+const useDatePickerStyles = makeStyles(datePickerStyles);
 
@@ -658,3 +684,3 @@ function DatePicker({
     borderRadius: 4,
-    background: `${Color.Blue}`
+    background: `${Color.Blue300}`
   }
@@ -677,3 +703,3 @@ };
   selected: {
-    color: Color.Blue25,
+    color: Color.Blue500,
     '&:before': {
@@ -687,3 +713,3 @@ content: '""',
       bottom: 0,
-      background: Color.Blue95
+      background: Color.Blue50
     },
@@ -698,3 +724,3 @@ '&:first-of-type:before': {
 });
-const useDateRangePickerStyles = makeStyles$1(dateRangePickerStyles);
+const useDateRangePickerStyles = makeStyles(dateRangePickerStyles);
 
@@ -701,0 +727,0 @@ const compareDates = (dateA, dateB) => dateA && dateB ? dateA.getTime() - dateB.getTime() : 0;

package.json

 {
   "name": "@superdispatch/ui",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "license": "MIT",
@@ -5,0 +5,0 @@ "files": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176398

increased by5.98%

Number of package files

29

increased by7.41%

Lines of code

2545

increased by4%

No dependency changes