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

Components: remove color() utility function, use values directly #31661

Merged
merged 5 commits into from
May 12, 2021
Merged

Components: remove color() utility function, use values directly #31661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7ebb41e
typo
ciampo May 10, 2021
387064b
Delete color() function
ciampo May 10, 2021
75a85f9
Use the COLORS map directly, instead of the colors() function
ciampo May 10, 2021
b853422
changelog
ciampo May 11, 2021
dd4b976
Remove changelog entry
ciampo May 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { css } from '@emotion/core';
/**
* Internal dependencies
*/
import { color, reduceMotion } from '../../utils/style-mixins';
import { COLORS, reduceMotion } from '../../utils';

export const rootBase = () => {
return css`
Expand Down Expand Up @@ -43,11 +43,9 @@ export const Row = styled.div`
`;

const pointActive = ( { isActive } ) => {
const boxShadow = isActive ? `0 0 0 2px ${ color( 'black' ) }` : null;
const pointColor = isActive ? color( 'black' ) : color( 'lightGray.800' );
const pointColorHover = isActive
? color( 'black' )
: color( 'blue.medium.focus' );
const boxShadow = isActive ? `0 0 0 2px ${ COLORS.black }` : null;
const pointColor = isActive ? COLORS.black : COLORS.lightGray[ 800 ];
const pointColorHover = isActive ? COLORS.black : COLORS.blue.medium.focus;

return css`
box-shadow: ${ boxShadow };
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import styled from '@emotion/styled';
* Internal dependencies
*/
import { Flex } from '../../flex';
import { color } from '../../utils/style-mixins';
import { COLORS } from '../../utils';

const CIRCLE_SIZE = 30;

Expand All @@ -17,7 +17,7 @@ export const Root = styled( Flex )`

export const CircleRoot = styled.div`
border-radius: 50%;
border: 1px solid ${ color( 'ui.borderLight' ) };
border: 1px solid ${ COLORS.ui.borderLight };
box-sizing: border-box;
cursor: grab;
height: ${ CIRCLE_SIZE }px;
Expand All @@ -33,9 +33,9 @@ export const CircleIndicatorWrapper = styled.div`
`;

export const CircleIndicator = styled.div`
background: ${ color( 'ui.border' ) };
background: ${ COLORS.ui.border };
border-radius: 50%;
border: 3px solid ${ color( 'ui.border' ) };
border: 3px solid ${ COLORS.ui.border };
bottom: 0;
box-sizing: border-box;
display: block;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/base-control/styles/base-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
import { font, space, color } from '../../utils';
import { font, space, COLORS } from '../../utils';

export const Wrapper = styled.div`
font-family: ${ font( 'default.fontFamily' ) };
Expand All @@ -29,5 +29,5 @@ export const StyledLabel = styled.label`
export const StyledHelp = styled.p`
font-size: ${ font( 'helpText.fontSize' ) };
font-style: normal;
color: ${ color( 'mediumGray.text' ) };
color: ${ COLORS.mediumGray.text };
`;
4 changes: 2 additions & 2 deletions packages/components/src/box-control/styles/box-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import styled from '@emotion/styled';
*/
import { Flex } from '../../flex';
import BaseUnitControl from '../../unit-control';
import { color, rtl } from '../../utils/style-mixins';
import { COLORS, rtl } from '../../utils';

export const Root = styled.div`
box-sizing: border-box;
Expand All @@ -18,7 +18,7 @@ export const Root = styled.div`
`;

export const Header = styled( Flex )`
color: ${ color( 'ui.label' ) };
color: ${ COLORS.ui.label };
padding-bottom: 8px;
`;

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/box-control/styles/box-control-visualizer-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
import { color, rtl } from '../../utils/style-mixins';
import { COLORS, rtl } from '../../utils';

const containerPositionStyles = ( { isPositionAbsolute } ) => {
if ( ! isPositionAbsolute ) return '';
Expand All @@ -31,8 +31,8 @@ export const Container = styled.div`

export const Side = styled.div`
box-sizing: border-box;
background: ${ color( 'blue.wordpress.700' ) };
background: ${ color( 'ui.theme' ) };
background: ${ COLORS.blue.wordpress[ 700 ] };
background: ${ COLORS.ui.theme };
filter: brightness( 1 );
opacity: 0;
position: absolute;
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/card/styles/card-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,18 @@ import { HorizontalRule } from '@wordpress/primitives';
* Internal dependencies
*/
import { Flex } from '../../flex';
import { color, space } from '../../utils/style-mixins';
import { COLORS, space } from '../../utils';

export const styleProps = {
borderColor: color( 'lightGray.500' ),
borderColor: COLORS.lightGray[ 500 ],
borderRadius: '3px',
backgroundShady: color( 'lightGray.200' ),
backgroundShady: COLORS.lightGray[ 200 ],
};

const { borderColor, borderRadius, backgroundShady } = styleProps;

export const CardUI = styled.div`
background: ${ color( 'white' ) };
background: ${ COLORS.white };
box-sizing: border-box;
border-radius: ${ borderRadius };
border: 1px solid ${ borderColor };
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import styled from '@emotion/styled';
*/
import { Flex } from '../../flex';
import BaseUnitControl from '../../unit-control';
import { color } from '../../utils/style-mixins';
import { COLORS } from '../../utils';

export const MediaWrapper = styled.div`
background-color: transparent;
Expand Down Expand Up @@ -43,7 +43,7 @@ export const MediaContainer = styled.div`
`;

export const MediaPlaceholder = styled.div`
background: ${ color( 'lightGray.300' ) };
background: ${ COLORS.lightGray[ 300 ] };
box-sizing: border-box;
height: 170px;
max-width: 280px;
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/focal-point-picker/styles/focal-point-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { Path, SVG } from '@wordpress/primitives';
/**
* Internal dependencies
*/
import { color } from '../../utils/style-mixins';
import { COLORS } from '../../utils';

export const FocalPointWrapper = styled.div`
background-color: transparent;
Expand Down Expand Up @@ -43,6 +43,6 @@ export const PointerIconPathOutline = styled( Path )`
`;

export const PointerIconPathFill = styled( Path )`
fill: ${ color( 'blue.wordpress.700' ) };
fill: ${ color( 'ui.theme' ) };
fill: ${ COLORS.blue.wordpress[ 700 ] };
fill: ${ COLORS.ui.theme };
`;
18 changes: 8 additions & 10 deletions packages/components/src/input-control/styles/input-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import styled from '@emotion/styled';
*/
import { Flex, FlexItem } from '../../flex';
import { Text } from '../../text';
import { color, rtl } from '../../utils/style-mixins';
import { COLORS, rtl } from '../../utils';

const rootFloatLabelStyles = () => {
return css( { paddingTop: 0 } );
Expand Down Expand Up @@ -53,8 +53,8 @@ export const Root = styled( Flex )`

const containerDisabledStyles = ( { disabled } ) => {
const backgroundColor = disabled
? color( 'ui.backgroundDisabled' )
: color( 'ui.background' );
? COLORS.ui.backgroundDisabled
: COLORS.ui.background;

return css( { backgroundColor } );
};
Expand Down Expand Up @@ -95,7 +95,7 @@ const disabledStyles = ( { disabled } ) => {
if ( ! disabled ) return '';

return css( {
color: color( 'ui.textDisabled' ),
color: COLORS.ui.textDisabled,
} );
};

Expand Down Expand Up @@ -186,7 +186,7 @@ export const Input = styled.input`
box-sizing: border-box;
border: none;
box-shadow: none !important;
color: ${ color( 'black' ) };
color: ${ COLORS.black };
display: block;
margin: 0;
outline: none;
Expand Down Expand Up @@ -242,18 +242,16 @@ export const LabelWrapper = styled( FlexItem )`
`;

const backdropFocusedStyles = ( { disabled, isFocused } ) => {
let borderColor = isFocused
? color( 'ui.borderFocus' )
: color( 'ui.border' );
let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;

let boxShadow = null;

if ( isFocused ) {
boxShadow = `0 0 0 1px ${ color( 'ui.borderFocus' ) } inset`;
boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`;
}

if ( disabled ) {
borderColor = color( 'ui.borderDisabled' );
borderColor = COLORS.ui.borderDisabled;
}

return css( {
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/range-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useInstanceId } from '@wordpress/compose';
import BaseControl from '../base-control';
import Button from '../button';
import Icon from '../icon';
import { color } from '../utils/colors';
import { COLORS } from '../utils';
import { floatClamp, useControlledRangeValue } from './utils';
import InputRange from './input-range';
import RangeRail from './rail';
Expand All @@ -41,7 +41,7 @@ function RangeControl(
beforeIcon,
className,
currentInput,
color: colorProp = color( 'ui.theme' ),
color: colorProp = COLORS.ui.theme,
disabled = false,
help,
initialPosition,
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/range-control/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import RangeControl from '../index';
import { color } from '../../utils/colors';
import { COLORS } from '../../utils';

export default { title: 'Components/RangeControl', component: RangeControl };

Expand All @@ -31,7 +31,7 @@ const DefaultExample = () => {
afterIcon: text( 'afterIcon', '' ),
allowReset: boolean( 'allowReset', false ),
beforeIcon: text( 'beforeIcon', '' ),
color: text( 'color', color( 'ui.theme' ) ),
color: text( 'color', COLORS.ui.theme ),
disabled: boolean( 'disabled', false ),
help: text( 'help', '' ),
label: text( 'label', 'Range Label' ),
Expand Down
30 changes: 14 additions & 16 deletions packages/components/src/range-control/styles/range-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import styled from '@emotion/styled';
* Internal dependencies
*/
import NumberControl from '../../number-control';
import { color, reduceMotion, rtl, space } from '../../utils/style-mixins';
import { COLORS, reduceMotion, rtl, space } from '../../utils';

const rangeHeight = () => css( { height: 30, minHeight: 30 } );
const thumbSize = 20;
Expand All @@ -25,15 +25,15 @@ export const Root = styled.div`
width: 100%;
`;

const wrapperColor = ( { color: colorProp = color( 'ui.borderFocus' ) } ) => {
const wrapperColor = ( { color: colorProp = COLORS.ui.borderFocus } ) => {
return css( { color: colorProp } );
};
const wrapperMargin = ( { marks } ) =>
css( { marginBottom: marks ? 16 : null } );

export const Wrapper = styled.div`
box-sizing: border-box;
color: ${ color( 'blue.medium.focus' ) };
color: ${ COLORS.blue.medium.focus };
display: block;
flex: 1;
padding-top: 15px;
Expand Down Expand Up @@ -63,7 +63,7 @@ const railBackgroundColor = ( { disabled, railColor } ) => {
let background = railColor || null;

if ( disabled ) {
background = color( 'lightGray.400' );
background = COLORS.lightGray[ 400 ];
}

return css( {
Expand All @@ -72,7 +72,7 @@ const railBackgroundColor = ( { disabled, railColor } ) => {
};

export const Rail = styled.span`
background-color: ${ color( 'lightGray.600' ) };
background-color: ${ COLORS.lightGray[ 600 ] };
box-sizing: border-box;
left: 0;
pointer-events: none;
Expand All @@ -90,7 +90,7 @@ const trackBackgroundColor = ( { disabled, trackColor } ) => {
let background = trackColor || 'currentColor';

if ( disabled ) {
background = color( 'lightGray.800' );
background = COLORS.lightGray[ 800 ];
}

return css( {
Expand Down Expand Up @@ -122,10 +122,10 @@ export const MarksWrapper = styled.span`
`;

const markFill = ( { disabled, isFilled } ) => {
let backgroundColor = isFilled ? 'currentColor' : color( 'lightGray.600' );
let backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];

if ( disabled ) {
backgroundColor = color( 'lightGray.800' );
backgroundColor = COLORS.lightGray[ 800 ];
}

return css( {
Expand All @@ -146,13 +146,13 @@ export const Mark = styled.span`

const markLabelFill = ( { isFilled } ) => {
return css( {
color: isFilled ? color( 'darkGray.300' ) : color( 'lightGray.600' ),
color: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],
} );
};

export const MarkLabel = styled.span`
box-sizing: border-box;
color: ${ color( 'lightGray.600' ) };
color: ${ COLORS.lightGray[ 600 ] };
left: 0;
font-size: 11px;
position: absolute;
Expand Down Expand Up @@ -182,12 +182,10 @@ export const ThumbWrapper = styled.span`

const thumbFocus = ( { isFocused } ) => {
return css( {
borderColor: isFocused
? color( 'ui.borderFocus' )
: color( 'darkGray.200' ),
borderColor: isFocused ? COLORS.ui.borderFocus : COLORS.darkGray[ 200 ],
boxShadow: isFocused
? `
0 0 0 1px ${ color( 'ui.borderFocus' ) }
0 0 0 1px ${ COLORS.ui.borderFocus }
`
: `
0 0 0 rgba(0, 0, 0, 0)
Expand All @@ -199,7 +197,7 @@ export const Thumb = styled.span`
align-items: center;
background-color: white;
border-radius: 50%;
border: 1px solid ${ color( 'darkGray.200' ) };
border: 1px solid ${ COLORS.darkGray[ 200 ] };
box-sizing: border-box;
height: 100%;
outline: 0;
Expand Down Expand Up @@ -246,7 +244,7 @@ const tooltipPosition = ( { position } ) => {
};

export const Tooltip = styled.span`
background: ${ color( 'ui.border' ) };
background: ${ COLORS.ui.border };
border-radius: 2px;
box-sizing: border-box;
color: white;
Expand Down
Loading