Skip to content

Commit

Permalink
Components: Unify black color to gray-900 (#40391)
Browse files Browse the repository at this point in the history
* Add comment for preferred color object

* Change pure blacks to gray-900

* Replace darkGray.primary with gray-900

* Replace darkGray.heading with gray-900

* Add changelog

* Update snapshots

* Fix color on InputControl label
  • Loading branch information
mirka authored Apr 20, 2022
1 parent ee7618d commit f2ca7ae
Show file tree
Hide file tree
Showing 13 changed files with 30 additions and 29 deletions.
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Bug Fix

- Consolidate the main black colors to gray-900. Affects `AlignmentMatrixControl`, `InputControl`, `Heading`, `SelectControl`, `Spinner (Experimental)`, and `Text` ([#40391](https://github.com/WordPress/gutenberg/pull/40391)).

### Internal

- Remove individual color object exports from the `utils/colors-values.js` file. Colors should now be used from the main `COLORS` export([#40387](https://github.com/WordPress/gutenberg/pull/40387)).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,11 @@ export const Row = styled.div`
`;

const pointActive = ( { isActive } ) => {
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;
const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.lightGray[ 800 ];
const pointColorHover = isActive
? COLORS.gray[ 900 ]
: COLORS.blue.medium.focus;

return css`
box-shadow: ${ boxShadow };
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/heading/hook.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export function useHeading(
}

const textProps = useText( {
color: COLORS.darkGray.heading,
color: COLORS.gray[ 900 ],
size: getHeadingFontSize( level ),
isBlock: true,
weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`props should render correctly 1`] = `
color: #1e1e1e;
line-height: 1.2;
margin: 0;
color: #050505;
color: #1e1e1e;
font-size: calc(1.95 * 13px);
font-weight: 600;
display: block;
Expand All @@ -27,7 +27,7 @@ Snapshot Diff:
Array [
Object {
"color": "#050505",
"color": "#1e1e1e",
"display": "block",
- "font-size": "calc(1.25 * 13px)",
+ "font-size": "calc(1.95 * 13px)",
Expand All @@ -45,7 +45,7 @@ Snapshot Diff:
Array [
Object {
"color": "#050505",
"color": "#1e1e1e",
"display": "block",
- "font-size": "calc(1.25 * 13px)",
+ "font-size": "calc(1.95 * 13px)",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ export const Input = styled.input< InputProps >`
box-sizing: border-box;
border: none;
box-shadow: none !important;
color: ${ COLORS.black };
color: ${ COLORS.gray[ 900 ] };
display: block;
font-family: inherit;
margin: 0;
Expand Down Expand Up @@ -245,7 +245,6 @@ const labelMargin = ( {
const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
&&& {
box-sizing: border-box;
color: currentColor;
display: block;
padding-top: 0;
padding-bottom: 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const Select = styled.select< SelectProps >`
box-sizing: border-box;
border: none;
box-shadow: none !important;
color: ${ COLORS.black };
color: ${ COLORS.gray[ 900 ] };
display: block;
font-family: inherit;
margin: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/surface/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils';

export const Surface = css`
background-color: ${ CONFIG.surfaceColor };
color: ${ COLORS.darkGray.primary };
color: ${ COLORS.gray[ 900 ] };
position: relative;
`;

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/text/hook.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default function useText( props ) {
getOptimalTextShade( optimizeReadabilityFor ) === 'dark';

sx.optimalTextColor = isOptimalTextColorDark
? css( { color: COLORS.black } )
? css( { color: COLORS.gray[ 900 ] } )
: css( { color: COLORS.white } );
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/text/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { css } from '@emotion/react';
import { COLORS, CONFIG } from '../utils';

export const Text = css`
color: ${ COLORS.darkGray.primary };
color: ${ COLORS.gray[ 900 ] };
line-height: ${ CONFIG.fontLineHeightBase };
margin: 0;
`;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
color: #1e1e1e;
line-height: 1.2;
margin: 0;
color: #050505;
color: #1e1e1e;
font-size: calc(1.95 * 13px);
font-weight: 600;
display: block;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/ui/spinner/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { COLORS } from '../../utils/colors-values';
*/
function Spinner( props, forwardedRef ) {
const {
color = COLORS.black,
color = COLORS.gray[ 900 ],
size = BASE_SIZE,
...otherProps
} = useContextSystem( props, 'Spinner' );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Snapshot Diff:
<div
class="css-tada40-BarsView e1s9yo7h0"
- style="color: blue;"
+ style="color: rgb(0, 0, 0);"
+ style="color: rgb(30, 30, 30);"
>
<div
class="InnerBar1"
Expand Down Expand Up @@ -193,7 +193,7 @@ exports[`props should render correctly 1`] = `
>
<div
class="emotion-4 emotion-5"
style="color: rgb(0, 0, 0);"
style="color: rgb(30, 30, 30);"
>
<div
class="InnerBar1"
Expand Down Expand Up @@ -258,6 +258,6 @@ Snapshot Diff:
>
<div
class="css-tada40-BarsView e1s9yo7h0"
style="color: rgb(0, 0, 0);"
style="color: rgb(30, 30, 30);"
>
`;
18 changes: 7 additions & 11 deletions packages/components/src/utils/colors-values.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,6 @@ const BASE = {
white: '#fff',
};

/**
* TODO: Continue to update values as "G2" design evolves.
*
* "G2" refers to the movement to advance the interface of the block editor.
* https://github.com/WordPress/gutenberg/issues/18667
*/
const G2 = {
blue: {
medium: {
Expand All @@ -35,10 +29,6 @@ const G2 = {
200: '#e0e0e0', // Used sparingly for light borders.
100: '#f0f0f0', // Used for light gray backgrounds.
},
darkGray: {
primary: '#1e1e1e',
heading: '#050505',
},
mediumGray: {
text: '#757575',
},
Expand Down Expand Up @@ -169,10 +159,16 @@ const UI = {
// Using Object.assign instead of { ...spread } syntax helps TypeScript
// to extract the correct type defs here.
export const COLORS = Object.assign( {}, BASE, {
darkGray: merge( {}, DARK_GRAY, G2.darkGray ),
darkGray: DARK_GRAY,
darkOpacity: DARK_OPACITY,
darkOpacityLight: DARK_OPACITY_LIGHT,
mediumGray: G2.mediumGray,
/**
* The main gray color object (since Apr 16, 2022).
*
* We are in the process of simplifying the colors in this file,
* please prefer this `gray` object in the meantime.
*/
gray: G2.gray,
lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
lightGrayLight: LIGHT_OPACITY_LIGHT,
Expand Down

0 comments on commit f2ca7ae

Please sign in to comment.