try n°2

.yarnrc

@@ -1,2 +1,2 @@
-
+--install.frozen-lockfile true
 network-timeout 150000

docs/src/pages/style/color/ColorTool.js

@@ -11,7 +11,7 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import CheckIcon from '@material-ui/icons/Check';
 import Slider from '@material-ui/lab/Slider';
-import { rgbToHex } from '@material-ui/core/styles/colorManipulator';
+// import { rgbToHex } from '@material-ui/core/styles/colorManipulator';
 import { capitalize } from '@material-ui/core/utils/helpers';
 import ColorDemo from './ColorDemo';
 import themeInitialState from 'docs/src/modules/styles/themeInitialState';
@@ -171,7 +171,7 @@ class ColorTool extends React.Component {
                 variant="caption"
                 style={{ color: theme.palette.getContrastText(background[key]) }}
               >
-                {rgbToHex(background[key])}
+                {background[key]}
               </Typography>
             </div>
           ))}

packages/material-ui-lab/src/Slider/Slider.js

@@ -2,8 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { fade, withStyles } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { setRef, withForwardedRef } from '@material-ui/core/utils';
 import { clamp } from '@material-ui/lab/utils';

packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js

@@ -3,8 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import { emphasize } from '@material-ui/core/styles/colorManipulator';
+import { emphasize, withStyles } from '@material-ui/core/styles';
 import Fab from '@material-ui/core/Fab';
 import Tooltip from '@material-ui/core/Tooltip';
 import { withForwardedRef } from '@material-ui/core/utils';

packages/material-ui-lab/src/ToggleButton/ToggleButton.js

@@ -3,8 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { fade, withStyles } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 
 export const styles = theme => ({

packages/material-ui/src/styles/colorManipulator.js

@@ -1,131 +1,6 @@
 /* eslint-disable no-use-before-define */
 
-import { lighten as lighten2, darken as darken2, rgba } from 'polished';
-
-/**
- * Converts a color from CSS hex format to CSS rgb format.
- *
- * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
- * @returns {string} A CSS rgb color string
- */
-export function hexToRgb(color) {
-  color = color.substr(1);
-
-  const re = new RegExp(`.{1,${color.length / 3}}`, 'g');
-  let colors = color.match(re);
-
-  if (colors && colors[0].length === 1) {
-    colors = colors.map(n => n + n);
-  }
-
-  return colors ? `rgb(${colors.map(n => parseInt(n, 16)).join(', ')})` : '';
-}
-
-function intToHex(int) {
-  const hex = int.toString(16);
-  return hex.length === 1 ? `0${hex}` : hex;
-}
-
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- *
- * @param {string} color - RGB color, i.e. rgb(n, n, n)
- * @returns {string} A CSS rgb color string, i.e. #nnnnnn
- */
-export function rgbToHex(color) {
-  // Idempotent
-  if (color.indexOf('#') === 0) {
-    return color;
-  }
-
-  const { values } = decomposeColor(color);
-  return `#${values.map(n => intToHex(n)).join('')}`;
-}
-
-/**
- * Converts a color from hsl format to rgb format.
- *
- * @param {string} color - HSL color values
- * @returns {string} rgb color values
- */
-export function hslToRgb(color) {
-  color = decomposeColor(color);
-  const { values } = color;
-  const h = values[0];
-  const s = values[1] / 100;
-  const l = values[2] / 100;
-  const a = s * Math.min(l, 1 - l);
-  const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-
-  let type = 'rgb';
-  const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-
-  if (color.type === 'hsla') {
-    type += 'a';
-    rgb.push(values[3]);
-  }
-
-  return recomposeColor({ type, values: rgb });
-}
-
-/**
- * Returns an object with the type and values of a color.
- *
- * Note: Does not support rgb % values.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {object} - A MUI color object: {type: string, values: number[]}
- */
-export function decomposeColor(color) {
-  // Idempotent
-  if (color.type) {
-    return color;
-  }
-
-  if (color.charAt(0) === '#') {
-    return decomposeColor(hexToRgb(color));
-  }
-
-  const marker = color.indexOf('(');
-  const type = color.substring(0, marker);
-
-  if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
-    throw new Error(
-      [
-        `Material-UI: unsupported \`${color}\` color.`,
-        'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().',
-      ].join('\n'),
-    );
-  }
-
-  let values = color.substring(marker + 1, color.length - 1).split(',');
-  values = values.map(value => parseFloat(value));
-
-  return { type, values };
-}
-
-/**
- * Converts a color object with type and values to a string.
- *
- * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
- * @param {array} color.values - [n,n,n] or [n,n,n,n]
- * @returns {string} A CSS color string
- */
-export function recomposeColor(color) {
-  const { type } = color;
-  let { values } = color;
-
-  if (type.indexOf('rgb') !== -1) {
-    // Only convert the first 3 values to int (i.e. not alpha)
-    values = values.map((n, i) => (i < 3 ? parseInt(n, 10) : n));
-  } else if (type.indexOf('hsl') !== -1) {
-    values[1] = `${values[1]}%`;
-    values[2] = `${values[2]}%`;
-  }
-
-  return `${type}(${values.join(', ')})`;
-}
+import { lighten as lighten2, darken as darken2, rgba, getLuminance } from 'polished';
 
 /**
  * Calculates the contrast ratio between two colors.
@@ -151,18 +26,7 @@ export function getContrastRatio(foreground, background) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} The relative brightness of the color in the range 0 - 1
  */
-export function getLuminance(color) {
-  color = decomposeColor(color);
-
-  let rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
-  rgb = rgb.map(val => {
-    val /= 255; // normalized
-    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
-  });
-
-  // Truncate at 3 digits
-  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
-}
+export { getLuminance };
 
 /**
  * Darken or lighten a color, depending on its luminance.

packages/material-ui/src/styles/createPalette.js

@@ -5,9 +5,7 @@ import pink from '../colors/pink';
 import grey from '../colors/grey';
 import red from '../colors/red';
 import common from '../colors/common';
-import { darken, lighten } from 'polished';
-
-const getContrastRatio = () => 3;
+import { getContrastRatio, darken, lighten } from './colorManipulator';
 
 export const light = {
   // The colors used to style the text.
@@ -73,9 +71,9 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
     if (intent.hasOwnProperty(shade)) {
       intent[direction] = intent[shade];
     } else if (direction === 'light') {
-      intent.light = lighten(tonalOffset, intent.main);
+      intent.light = lighten(intent.main, tonalOffset);
     } else if (direction === 'dark') {
-      intent.dark = darken(tonalOffset * 1.5, intent.main);
+      intent.dark = darken(intent.main, tonalOffset * 1.5);
     }
   }
 }

packages/material-ui/src/styles/index.js

@@ -1,3 +1,4 @@
+export * from './colorManipulator';
 export { default as createMuiTheme } from './createMuiTheme';
 export { default as createStyles } from './createStyles';
 export { default as makeStyles } from './makeStyles';