From b0d3cf7c67434816673c840c2299668de401e993 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 9 Jun 2021 12:18:41 +0200 Subject: [PATCH 1/2] init --- .../src/colorManipulator.d.ts | 18 ++ .../src/colorManipulator.js | 283 +++++++++++++++++ .../src}/colorManipulator.test.js | 0 packages/material-ui-system/src/index.d.ts | 2 + packages/material-ui-system/src/index.js | 1 + .../src/styles/colorManipulator.d.ts | 33 +- .../src/styles/colorManipulator.js | 296 +----------------- 7 files changed, 332 insertions(+), 301 deletions(-) create mode 100644 packages/material-ui-system/src/colorManipulator.d.ts create mode 100644 packages/material-ui-system/src/colorManipulator.js rename packages/{material-ui/src/styles => material-ui-system/src}/colorManipulator.test.js (100%) diff --git a/packages/material-ui-system/src/colorManipulator.d.ts b/packages/material-ui-system/src/colorManipulator.d.ts new file mode 100644 index 00000000000000..5f1dc06d9ef4b9 --- /dev/null +++ b/packages/material-ui-system/src/colorManipulator.d.ts @@ -0,0 +1,18 @@ +export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla'; +export interface ColorObject { + type: ColorFormat; + values: [number, number, number] | [number, number, number, number]; + colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020'; +} + +export function hexToRgb(hex: string): string; +export function rgbToHex(color: string): string; +export function hslToRgb(color: string): string; +export function decomposeColor(color: string): ColorObject; +export function recomposeColor(color: ColorObject): string; +export function getContrastRatio(foreground: string, background: string): number; +export function getLuminance(color: string): number; +export function emphasize(color: string, coefficient?: number): string; +export function alpha(color: string, value: number): string; +export function darken(color: string, coefficient: number): string; +export function lighten(color: string, coefficient: number): string; diff --git a/packages/material-ui-system/src/colorManipulator.js b/packages/material-ui-system/src/colorManipulator.js new file mode 100644 index 00000000000000..5b750c4151ba20 --- /dev/null +++ b/packages/material-ui-system/src/colorManipulator.js @@ -0,0 +1,283 @@ +import MuiError from '@material-ui/utils/macros/MuiError.macro'; +/* eslint-disable @typescript-eslint/no-use-before-define */ + +/** + * Returns a number whose value is limited to the given range. + * @param {number} value The value to be clamped + * @param {number} min The lower boundary of the output range + * @param {number} max The upper boundary of the output range + * @returns {number} A number in the range [min, max] + */ +function clamp(value, min = 0, max = 1) { + if (process.env.NODE_ENV !== 'production') { + if (value < min || value > max) { + console.error(`Material-UI: The value provided ${value} is out of range [${min}, ${max}].`); + } + } + + return Math.min(Math.max(min, value), max); +} + +/** + * 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 >= 6 ? 2 : 1}}`, 'g'); + let colors = color.match(re); + + if (colors && colors[0].length === 1) { + colors = colors.map((n) => n + n); + } + + return colors + ? `rgb${colors.length === 4 ? 'a' : ''}(${colors + .map((n, index) => { + return index < 3 ? parseInt(n, 16) : Math.round((parseInt(n, 16) / 255) * 1000) / 1000; + }) + .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, i) => intToHex(i === 3 ? Math.round(255 * n) : 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', 'color'].indexOf(type) === -1) { + throw new MuiError( + 'Material-UI: Unsupported `%s` color.\n' + + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().', + color, + ); + } + + let values = color.substring(marker + 1, color.length - 1); + let colorSpace; + + if (type === 'color') { + values = values.split(' '); + colorSpace = values.shift(); + if (values.length === 4 && values[3].charAt(0) === '/') { + values[3] = values[3].substr(1); + } + if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) { + throw new MuiError( + 'Material-UI: unsupported `%s` color space.\n' + + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.', + colorSpace, + ); + } + } else { + values = values.split(','); + } + values = values.map((value) => parseFloat(value)); + + return { type, values, colorSpace }; +} + +/** + * 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, colorSpace } = 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]}%`; + } + if (type.indexOf('color') !== -1) { + values = `${colorSpace} ${values.join(' ')}`; + } else { + values = `${values.join(', ')}`; + } + + return `${type}(${values})`; +} + +/** + * Calculates the contrast ratio between two colors. + * + * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests + * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() + * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() + * @returns {number} A contrast ratio value in the range 0 - 21. + */ +export function getContrastRatio(foreground, background) { + const lumA = getLuminance(foreground); + const lumB = getLuminance(background); + return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05); +} + +/** + * The relative brightness of any point in a color space, + * normalized to 0 for darkest black and 1 for lightest white. + * + * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests + * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() + * @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) => { + if (color.type !== 'color') { + 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)); +} + +/** + * Darken or lighten a color, depending on its luminance. + * Light colors are darkened, dark colors are lightened. + * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() + * @param {number} coefficient=0.15 - multiplier in the range 0 - 1 + * @returns {string} A CSS color string. Hex input values are returned as rgb + */ +export function emphasize(color, coefficient = 0.15) { + return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient); +} + +/** + * Set the absolute transparency of a color. + * Any existing alpha values are overwritten. + * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() + * @param {number} value - value to set the alpha channel to in the range 0 - 1 + * @returns {string} A CSS color string. Hex input values are returned as rgb + */ +export function alpha(color, value) { + color = decomposeColor(color); + value = clamp(value); + + if (color.type === 'rgb' || color.type === 'hsl') { + color.type += 'a'; + } + if (color.type === 'color') { + color.values[3] = `/${value}`; + } else { + color.values[3] = value; + } + + return recomposeColor(color); +} + +/** + * Darkens a color. + * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() + * @param {number} coefficient - multiplier in the range 0 - 1 + * @returns {string} A CSS color string. Hex input values are returned as rgb + */ +export function darken(color, coefficient) { + color = decomposeColor(color); + coefficient = clamp(coefficient); + + if (color.type.indexOf('hsl') !== -1) { + color.values[2] *= 1 - coefficient; + } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) { + for (let i = 0; i < 3; i += 1) { + color.values[i] *= 1 - coefficient; + } + } + return recomposeColor(color); +} + +/** + * Lightens a color. + * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() + * @param {number} coefficient - multiplier in the range 0 - 1 + * @returns {string} A CSS color string. Hex input values are returned as rgb + */ +export function lighten(color, coefficient) { + color = decomposeColor(color); + coefficient = clamp(coefficient); + + if (color.type.indexOf('hsl') !== -1) { + color.values[2] += (100 - color.values[2]) * coefficient; + } else if (color.type.indexOf('rgb') !== -1) { + for (let i = 0; i < 3; i += 1) { + color.values[i] += (255 - color.values[i]) * coefficient; + } + } else if (color.type.indexOf('color') !== -1) { + for (let i = 0; i < 3; i += 1) { + color.values[i] += (1 - color.values[i]) * coefficient; + } + } + + return recomposeColor(color); +} diff --git a/packages/material-ui/src/styles/colorManipulator.test.js b/packages/material-ui-system/src/colorManipulator.test.js similarity index 100% rename from packages/material-ui/src/styles/colorManipulator.test.js rename to packages/material-ui-system/src/colorManipulator.test.js diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index f9e4cce21a27a2..7c246c30cbab24 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -131,3 +131,5 @@ export { SpacingOptions, Spacing } from './createTheme/createSpacing'; export { default as shape } from './createTheme/shape'; export * from './createTheme/shape'; + +export * from './colorManipulator'; diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js index 065d2ac4fd0443..b88bdad6e96c20 100644 --- a/packages/material-ui-system/src/index.js +++ b/packages/material-ui-system/src/index.js @@ -33,3 +33,4 @@ export { default as styled } from './styled'; export { default as createTheme } from './createTheme'; export { default as createBreakpoints } from './createTheme/createBreakpoints'; export { default as shape } from './createTheme/shape'; +export * from './colorManipulator'; diff --git a/packages/material-ui/src/styles/colorManipulator.d.ts b/packages/material-ui/src/styles/colorManipulator.d.ts index 5f1dc06d9ef4b9..f00b94abde8a35 100644 --- a/packages/material-ui/src/styles/colorManipulator.d.ts +++ b/packages/material-ui/src/styles/colorManipulator.d.ts @@ -1,18 +1,15 @@ -export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla'; -export interface ColorObject { - type: ColorFormat; - values: [number, number, number] | [number, number, number, number]; - colorSpace?: 'srgb' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec-2020'; -} - -export function hexToRgb(hex: string): string; -export function rgbToHex(color: string): string; -export function hslToRgb(color: string): string; -export function decomposeColor(color: string): ColorObject; -export function recomposeColor(color: ColorObject): string; -export function getContrastRatio(foreground: string, background: string): number; -export function getLuminance(color: string): number; -export function emphasize(color: string, coefficient?: number): string; -export function alpha(color: string, value: number): string; -export function darken(color: string, coefficient: number): string; -export function lighten(color: string, coefficient: number): string; +export { + hexToRgb, + rgbToHex, + hslToRgb, + decomposeColor, + recomposeColor, + getContrastRatio, + getLuminance, + emphasize, + alpha, + darken, + lighten, + ColorFormat, + ColorObject, +} from '@material-ui/system'; diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index 5b750c4151ba20..d08dd20c38a7aa 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -1,283 +1,13 @@ -import MuiError from '@material-ui/utils/macros/MuiError.macro'; -/* eslint-disable @typescript-eslint/no-use-before-define */ - -/** - * Returns a number whose value is limited to the given range. - * @param {number} value The value to be clamped - * @param {number} min The lower boundary of the output range - * @param {number} max The upper boundary of the output range - * @returns {number} A number in the range [min, max] - */ -function clamp(value, min = 0, max = 1) { - if (process.env.NODE_ENV !== 'production') { - if (value < min || value > max) { - console.error(`Material-UI: The value provided ${value} is out of range [${min}, ${max}].`); - } - } - - return Math.min(Math.max(min, value), max); -} - -/** - * 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 >= 6 ? 2 : 1}}`, 'g'); - let colors = color.match(re); - - if (colors && colors[0].length === 1) { - colors = colors.map((n) => n + n); - } - - return colors - ? `rgb${colors.length === 4 ? 'a' : ''}(${colors - .map((n, index) => { - return index < 3 ? parseInt(n, 16) : Math.round((parseInt(n, 16) / 255) * 1000) / 1000; - }) - .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, i) => intToHex(i === 3 ? Math.round(255 * n) : 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', 'color'].indexOf(type) === -1) { - throw new MuiError( - 'Material-UI: Unsupported `%s` color.\n' + - 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().', - color, - ); - } - - let values = color.substring(marker + 1, color.length - 1); - let colorSpace; - - if (type === 'color') { - values = values.split(' '); - colorSpace = values.shift(); - if (values.length === 4 && values[3].charAt(0) === '/') { - values[3] = values[3].substr(1); - } - if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) { - throw new MuiError( - 'Material-UI: unsupported `%s` color space.\n' + - 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.', - colorSpace, - ); - } - } else { - values = values.split(','); - } - values = values.map((value) => parseFloat(value)); - - return { type, values, colorSpace }; -} - -/** - * 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, colorSpace } = 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]}%`; - } - if (type.indexOf('color') !== -1) { - values = `${colorSpace} ${values.join(' ')}`; - } else { - values = `${values.join(', ')}`; - } - - return `${type}(${values})`; -} - -/** - * Calculates the contrast ratio between two colors. - * - * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests - * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() - * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla() - * @returns {number} A contrast ratio value in the range 0 - 21. - */ -export function getContrastRatio(foreground, background) { - const lumA = getLuminance(foreground); - const lumB = getLuminance(background); - return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05); -} - -/** - * The relative brightness of any point in a color space, - * normalized to 0 for darkest black and 1 for lightest white. - * - * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests - * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() - * @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) => { - if (color.type !== 'color') { - 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)); -} - -/** - * Darken or lighten a color, depending on its luminance. - * Light colors are darkened, dark colors are lightened. - * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() - * @param {number} coefficient=0.15 - multiplier in the range 0 - 1 - * @returns {string} A CSS color string. Hex input values are returned as rgb - */ -export function emphasize(color, coefficient = 0.15) { - return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient); -} - -/** - * Set the absolute transparency of a color. - * Any existing alpha values are overwritten. - * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() - * @param {number} value - value to set the alpha channel to in the range 0 - 1 - * @returns {string} A CSS color string. Hex input values are returned as rgb - */ -export function alpha(color, value) { - color = decomposeColor(color); - value = clamp(value); - - if (color.type === 'rgb' || color.type === 'hsl') { - color.type += 'a'; - } - if (color.type === 'color') { - color.values[3] = `/${value}`; - } else { - color.values[3] = value; - } - - return recomposeColor(color); -} - -/** - * Darkens a color. - * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() - * @param {number} coefficient - multiplier in the range 0 - 1 - * @returns {string} A CSS color string. Hex input values are returned as rgb - */ -export function darken(color, coefficient) { - color = decomposeColor(color); - coefficient = clamp(coefficient); - - if (color.type.indexOf('hsl') !== -1) { - color.values[2] *= 1 - coefficient; - } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) { - for (let i = 0; i < 3; i += 1) { - color.values[i] *= 1 - coefficient; - } - } - return recomposeColor(color); -} - -/** - * Lightens a color. - * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color() - * @param {number} coefficient - multiplier in the range 0 - 1 - * @returns {string} A CSS color string. Hex input values are returned as rgb - */ -export function lighten(color, coefficient) { - color = decomposeColor(color); - coefficient = clamp(coefficient); - - if (color.type.indexOf('hsl') !== -1) { - color.values[2] += (100 - color.values[2]) * coefficient; - } else if (color.type.indexOf('rgb') !== -1) { - for (let i = 0; i < 3; i += 1) { - color.values[i] += (255 - color.values[i]) * coefficient; - } - } else if (color.type.indexOf('color') !== -1) { - for (let i = 0; i < 3; i += 1) { - color.values[i] += (1 - color.values[i]) * coefficient; - } - } - - return recomposeColor(color); -} +export { + hexToRgb, + rgbToHex, + hslToRgb, + decomposeColor, + recomposeColor, + getContrastRatio, + getLuminance, + emphasize, + alpha, + darken, + lighten, +} from '@material-ui/system'; From e574f7f5be2b609471f59754a22a38400a1d1a8d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 10 Jun 2021 13:07:02 +0200 Subject: [PATCH 2/2] remove styles.colorManipulators & update imports --- packages/material-ui/src/Alert/Alert.js | 2 +- .../material-ui/src/Autocomplete/Autocomplete.js | 2 +- .../src/Breadcrumbs/BreadcrumbCollapsed.js | 2 +- packages/material-ui/src/Button/Button.js | 2 +- .../material-ui/src/ButtonGroup/ButtonGroup.js | 2 +- packages/material-ui/src/Checkbox/Checkbox.js | 2 +- packages/material-ui/src/Chip/Chip.js | 2 +- packages/material-ui/src/Divider/Divider.js | 2 +- packages/material-ui/src/IconButton/IconButton.js | 2 +- .../src/LinearProgress/LinearProgress.js | 2 +- packages/material-ui/src/ListItem/ListItem.js | 2 +- .../src/ListItemButton/ListItemButton.js | 2 +- .../src/PaginationItem/PaginationItem.js | 2 +- packages/material-ui/src/Paper/Paper.js | 2 +- packages/material-ui/src/Radio/Radio.js | 2 +- packages/material-ui/src/Slider/Slider.js | 2 +- .../src/SnackbarContent/SnackbarContent.js | 2 +- .../src/SpeedDialAction/SpeedDialAction.js | 2 +- packages/material-ui/src/Switch/Switch.js | 2 +- packages/material-ui/src/TableCell/TableCell.js | 2 +- packages/material-ui/src/TableRow/TableRow.js | 2 +- packages/material-ui/src/Tooltip/Tooltip.js | 2 +- .../material-ui/src/styles/colorManipulator.d.ts | 15 --------------- .../material-ui/src/styles/colorManipulator.js | 13 ------------- packages/material-ui/src/styles/createPalette.js | 2 +- .../material-ui/src/styles/createPalette.test.js | 2 +- packages/material-ui/src/styles/index.d.ts | 15 ++++++++++++++- packages/material-ui/src/styles/index.js | 14 +++++++++++++- scripts/sizeSnapshot/webpack.config.js | 2 +- 29 files changed, 52 insertions(+), 55 deletions(-) delete mode 100644 packages/material-ui/src/styles/colorManipulator.d.ts delete mode 100644 packages/material-ui/src/styles/colorManipulator.js diff --git a/packages/material-ui/src/Alert/Alert.js b/packages/material-ui/src/Alert/Alert.js index 6203bb0cd492aa..796b3e984b6794 100644 --- a/packages/material-ui/src/Alert/Alert.js +++ b/packages/material-ui/src/Alert/Alert.js @@ -2,9 +2,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { darken, lighten } from '@material-ui/system'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import { darken, lighten } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; import Paper from '../Paper'; import alertClasses, { getAlertUtilityClass } from './alertClasses'; diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js index ffd23bdb0fa8ad..1afae22d3831f7 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { chainPropTypes, integerPropType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { alpha } from '../styles/colorManipulator'; +import { alpha } from '@material-ui/system'; import Popper from '../Popper'; import ListSubheader from '../ListSubheader'; import Paper from '../Paper'; diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js index 8d794fcc06653f..a093f921d77ee2 100644 --- a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js +++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { emphasize } from '@material-ui/system'; import styled from '../styles/styled'; -import { emphasize } from '../styles/colorManipulator'; import MoreHorizIcon from '../internal/svg-icons/MoreHoriz'; import ButtonBase from '../ButtonBase'; diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index c8fd55d99c3d08..e29e23273fb0b3 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -2,9 +2,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import styled, { rootShouldForwardProp } from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js index cabadf4357d2f6..0f6f565ca3243a 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.js @@ -3,8 +3,8 @@ import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import capitalize from '../utils/capitalize'; -import { alpha } from '../styles/colorManipulator'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses'; diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 67f862a521c6b4..82f65273519727 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -2,10 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import SwitchBase from '../internal/SwitchBase'; import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank'; import CheckBoxIcon from '../internal/svg-icons/CheckBox'; -import { alpha } from '../styles/colorManipulator'; import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox'; import capitalize from '../utils/capitalize'; import useThemeProps from '../styles/useThemeProps'; diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 39b703a93122a2..ca28da50fd5575 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -2,8 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import CancelIcon from '../internal/svg-icons/Cancel'; -import { alpha } from '../styles/colorManipulator'; import useForkRef from '../utils/useForkRef'; import unsupportedProp from '../utils/unsupportedProp'; import capitalize from '../utils/capitalize'; diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index b90366071043eb..ea970940c6c50f 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -2,9 +2,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import { alpha } from '../styles/colorManipulator'; import { getDividerUtilityClass } from './dividerClasses'; const useUtilityClasses = (styleProps) => { diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index a335cddcf12a72..1715e49bf0ee2b 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { chainPropTypes } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses'; diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js index 5605af4cecb8e2..ef366f26ca5a0b 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import { keyframes, css } from '@material-ui/styled-engine'; +import { darken, lighten } from '@material-ui/system'; import capitalize from '../utils/capitalize'; -import { darken, lighten } from '../styles/colorManipulator'; import useTheme from '../styles/useTheme'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js index 2b9aff35d16860..6a6e5f01277407 100644 --- a/packages/material-ui/src/ListItem/ListItem.js +++ b/packages/material-ui/src/ListItem/ListItem.js @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses, isHostComponent } from '@material-ui/unstyled'; import { chainPropTypes, elementTypeAcceptingRef } from '@material-ui/utils'; +import { alpha } from '@material-ui/system'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; import isMuiElement from '../utils/isMuiElement'; import useEnhancedEffect from '../utils/useEnhancedEffect'; diff --git a/packages/material-ui/src/ListItemButton/ListItemButton.js b/packages/material-ui/src/ListItemButton/ListItemButton.js index 2c563700f61d96..ddeaa134cbb611 100644 --- a/packages/material-ui/src/ListItemButton/ListItemButton.js +++ b/packages/material-ui/src/ListItemButton/ListItemButton.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { alpha } from '../styles/colorManipulator'; +import { alpha } from '@material-ui/system'; import styled, { rootShouldForwardProp } from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; import ButtonBase from '../ButtonBase'; diff --git a/packages/material-ui/src/PaginationItem/PaginationItem.js b/packages/material-ui/src/PaginationItem/PaginationItem.js index 49919f27ba0ea3..807c864482163b 100644 --- a/packages/material-ui/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui/src/PaginationItem/PaginationItem.js @@ -2,10 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import useThemeProps from '../styles/useThemeProps'; import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses'; import { useTheme } from '../styles'; -import { alpha } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import FirstPageIcon from '../internal/svg-icons/FirstPage'; diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index 620aab7ef3c1c3..1f6fb7983bce7d 100644 --- a/packages/material-ui/src/Paper/Paper.js +++ b/packages/material-ui/src/Paper/Paper.js @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { chainPropTypes, integerPropType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import { alpha } from '../styles/colorManipulator'; import useTheme from '../styles/useTheme'; import { getPaperUtilityClass } from './paperClasses'; diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 4ce0e1b5664702..eb6010460f844b 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -2,10 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import SwitchBase from '../internal/SwitchBase'; import useThemeProps from '../styles/useThemeProps'; import RadioButtonIcon from './RadioButtonIcon'; -import { alpha } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; import createChainedFunction from '../utils/createChainedFunction'; import useRadioGroup from '../RadioGroup/useRadioGroup'; diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 311c36155387b8..a933328ed25331 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -8,9 +8,9 @@ import SliderUnstyled, { sliderUnstyledClasses, getSliderUtilityClass, } from '@material-ui/unstyled/SliderUnstyled'; +import { alpha, lighten, darken } from '@material-ui/system'; import useThemeProps from '../styles/useThemeProps'; import styled from '../styles/styled'; -import { alpha, lighten, darken } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; export const sliderClasses = { diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index ef497383a9fb8a..99f3791d39c596 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -2,9 +2,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { emphasize } from '@material-ui/system'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import { emphasize } from '../styles/colorManipulator'; import Paper from '../Paper'; import { getSnackbarContentUtilityClass } from './snackbarContentClasses'; diff --git a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js index 78b49f56c341f4..3839c0072361f7 100644 --- a/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js @@ -4,9 +4,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { emphasize } from '@material-ui/system'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; -import { emphasize } from '../styles/colorManipulator'; import Fab from '../Fab'; import Tooltip from '../Tooltip'; import capitalize from '../utils/capitalize'; diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 60d12305858f06..9fb0619f8bb3fd 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { refType } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { alpha, darken, lighten } from '../styles/colorManipulator'; +import { alpha, darken, lighten } from '@material-ui/system'; import capitalize from '../utils/capitalize'; import SwitchBase from '../internal/SwitchBase'; import useThemeProps from '../styles/useThemeProps'; diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index 99739d11e1d9e9..5db8c6e0b6b277 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.js @@ -2,8 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { darken, alpha, lighten } from '@material-ui/system'; import capitalize from '../utils/capitalize'; -import { darken, alpha, lighten } from '../styles/colorManipulator'; import TableContext from '../Table/TableContext'; import Tablelvl2Context from '../Table/Tablelvl2Context'; import useThemeProps from '../styles/useThemeProps'; diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js index 6099430a9e6dfc..8cc78e9fccaf78 100644 --- a/packages/material-ui/src/TableRow/TableRow.js +++ b/packages/material-ui/src/TableRow/TableRow.js @@ -2,8 +2,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; +import { alpha } from '@material-ui/system'; import Tablelvl2Context from '../Table/Tablelvl2Context'; -import { alpha } from '../styles/colorManipulator'; import useThemeProps from '../styles/useThemeProps'; import styled from '../styles/styled'; import tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses'; diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index a3632c687d4ce6..3e319610bf8d5b 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { elementAcceptingRef } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; -import { alpha } from '../styles/colorManipulator'; +import { alpha } from '@material-ui/system'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; import capitalize from '../utils/capitalize'; diff --git a/packages/material-ui/src/styles/colorManipulator.d.ts b/packages/material-ui/src/styles/colorManipulator.d.ts deleted file mode 100644 index f00b94abde8a35..00000000000000 --- a/packages/material-ui/src/styles/colorManipulator.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export { - hexToRgb, - rgbToHex, - hslToRgb, - decomposeColor, - recomposeColor, - getContrastRatio, - getLuminance, - emphasize, - alpha, - darken, - lighten, - ColorFormat, - ColorObject, -} from '@material-ui/system'; diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js deleted file mode 100644 index d08dd20c38a7aa..00000000000000 --- a/packages/material-ui/src/styles/colorManipulator.js +++ /dev/null @@ -1,13 +0,0 @@ -export { - hexToRgb, - rgbToHex, - hslToRgb, - decomposeColor, - recomposeColor, - getContrastRatio, - getLuminance, - emphasize, - alpha, - darken, - lighten, -} from '@material-ui/system'; diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index 8ec8a3b7d2433b..2a6e5b6c552f14 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -1,5 +1,6 @@ import { deepmerge } from '@material-ui/utils'; import MuiError from '@material-ui/utils/macros/MuiError.macro'; +import { darken, getContrastRatio, lighten } from '@material-ui/system'; import common from '../colors/common'; import grey from '../colors/grey'; import purple from '../colors/purple'; @@ -8,7 +9,6 @@ import red from '../colors/red'; import orange from '../colors/orange'; import blue from '../colors/blue'; import green from '../colors/green'; -import { darken, getContrastRatio, lighten } from './colorManipulator'; export const light = { // The colors used to style the text. diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index db1a4695a0a442..262f51d07b1f3b 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -1,6 +1,6 @@ import { expect } from 'chai'; +import { darken, lighten } from '@material-ui/system'; import { deepOrange, blue, purple, indigo } from '../colors'; -import { darken, lighten } from './colorManipulator'; import createPalette, { dark, light } from './createPalette'; describe('createPalette()', () => { diff --git a/packages/material-ui/src/styles/index.d.ts b/packages/material-ui/src/styles/index.d.ts index 67019cb6e50909..47d51ec4d6935b 100644 --- a/packages/material-ui/src/styles/index.d.ts +++ b/packages/material-ui/src/styles/index.d.ts @@ -1,4 +1,3 @@ -export * from './colorManipulator'; export { default as createTheme, default as unstable_createMuiStrictModeTheme, @@ -37,6 +36,20 @@ export { BreakpointOverrides, CreateMUIStyled, CSSObject, + // color manipulators + hexToRgb, + rgbToHex, + hslToRgb, + decomposeColor, + recomposeColor, + getContrastRatio, + getLuminance, + emphasize, + alpha, + darken, + lighten, + ColorFormat, + ColorObject, } from '@material-ui/system'; export { default as useTheme } from './useTheme'; export { default as unstable_useThemeProps } from './useThemeProps'; diff --git a/packages/material-ui/src/styles/index.js b/packages/material-ui/src/styles/index.js index 987f508fc789fd..0f34b555880396 100644 --- a/packages/material-ui/src/styles/index.js +++ b/packages/material-ui/src/styles/index.js @@ -1,5 +1,17 @@ export { default as adaptV4Theme } from './adaptV4Theme'; -export * from './colorManipulator'; +export { + hexToRgb, + rgbToHex, + hslToRgb, + decomposeColor, + recomposeColor, + getContrastRatio, + getLuminance, + emphasize, + alpha, + darken, + lighten, +} from '@material-ui/system'; export { default as createTheme, createMuiTheme } from './createTheme'; export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme'; export { default as createStyles } from './createStyles'; diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index 04db0751c3d241..807be0e18a8e74 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -81,7 +81,7 @@ async function getWebpackEntries() { }, { name: 'colorManipulator', - path: 'packages/material-ui/build/styles/colorManipulator.js', + path: 'packages/material-ui-system/build/colorManipulator.js', }, { name: 'useAutocomplete',