Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[system] Add color manipulators #26668

Merged
merged 2 commits into from
Jun 11, 2021
Merged

[system] Add color manipulators #26668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0d3cf7
init
mnajdova Jun 9, 2021
e574f7f
remove styles.colorManipulators & update imports
mnajdova Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
0 ...erial-ui/src/styles/colorManipulator.d.ts → ...erial-ui-system/src/colorManipulator.d.ts
View file
Open in desktop
File renamed without changes.
0 ...aterial-ui/src/styles/colorManipulator.js → ...aterial-ui-system/src/colorManipulator.js
View file
Open in desktop
File renamed without changes.
0 ...al-ui/src/styles/colorManipulator.test.js → ...al-ui-system/src/colorManipulator.test.js
View file
Open in desktop
File renamed without changes.
2 changes: 2 additions & 0 deletions packages/material-ui-system/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,3 +131,5 @@ export { SpacingOptions, Spacing } from './createTheme/createSpacing';

export { default as shape } from './createTheme/shape';
export * from './createTheme/shape';

export * from './colorManipulator';
1 change: 1 addition & 0 deletions packages/material-ui-system/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
2 changes: 1 addition & 1 deletion packages/material-ui/src/Alert/Alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Autocomplete/Autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering about doing

Suggested change
import { alpha } from '@material-ui/system';
import { alpha } from '@material-ui/system/colorManipulator';

to help on the tree-shaking in dev mode, but since we likely include the whole system anyway in the core for a single component, I'm not sure we need to care.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if it will have any impact.. The styled() util already depends on styleFunctionSx which basically composes the whole system, so not sure if it is worthed..

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think if the system is not that big, I would rather use from root.
import { alpha } from '@material-ui/system' is more convenient.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@siriwatknp I think that we could have a different policy for what we document and what we use internally: #24147.

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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/ButtonGroup/ButtonGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Chip/Chip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Divider/Divider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/IconButton/IconButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/LinearProgress/LinearProgress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/ListItem/ListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/ListItemButton/ListItemButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/PaginationItem/PaginationItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Paper/Paper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Radio/Radio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Slider/Slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/SnackbarContent/SnackbarContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/SpeedDialAction/SpeedDialAction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Switch/Switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/TableCell/TableCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/TableRow/TableRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Tooltip/Tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/styles/createPalette.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/styles/createPalette.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()', () => {
Expand Down
15 changes: 14 additions & 1 deletion packages/material-ui/src/styles/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export * from './colorManipulator';
export {
default as createTheme,
default as unstable_createMuiStrictModeTheme,
Expand Down Expand Up @@ -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';
Expand Down
14 changes: 13 additions & 1 deletion packages/material-ui/src/styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion scripts/sizeSnapshot/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down