From 8aaacd9651ec39644334dc55a485e130923778b1 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 19 Apr 2022 20:13:32 +0900 Subject: [PATCH] Stop exporting individual color objects from color values file (#40387) * Stop exporting individual color objects from color values file * Add changelog * Replace in React Native --- packages/components/CHANGELOG.md | 5 +++++ .../navigation/styles/navigation-styles.js | 10 ++++----- .../src/text/styles/text-mixins.native.js | 4 ++-- .../components/src/utils/colors-values.js | 22 +++++++++---------- 4 files changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index bff41ad8b1971e..73f297ecfb69f8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### 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)). + + ## 19.8.0 (2022-04-08) ### Enhancements diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index 8da0751f9840d1..45b5e03e32bbaf 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -11,7 +11,7 @@ import { isRTL } from '@wordpress/i18n'; /** * Internal dependencies */ -import { BASE, G2, UI } from '../../utils/colors-values'; +import { COLORS } from '../../utils/colors-values'; import Button from '../../button'; import { Text } from '../../text'; import { Heading } from '../../heading'; @@ -155,18 +155,18 @@ export const ItemBaseUI = styled.li` } &.is-active { - background-color: ${ UI.theme }; - color: ${ BASE.white }; + background-color: ${ COLORS.ui.theme }; + color: ${ COLORS.white }; > button, > a { - color: ${ BASE.white }; + color: ${ COLORS.white }; opacity: 1; } } > svg path { - color: ${ G2.lightGray.ui }; + color: ${ COLORS.gray[ 600 ] }; } `; diff --git a/packages/components/src/text/styles/text-mixins.native.js b/packages/components/src/text/styles/text-mixins.native.js index 5419216f56c740..b6e329de89db53 100644 --- a/packages/components/src/text/styles/text-mixins.native.js +++ b/packages/components/src/text/styles/text-mixins.native.js @@ -3,7 +3,7 @@ */ import { fontFamily } from './font-family'; import css from './emotion-css'; -import { G2 } from '../../utils/colors-values'; +import { COLORS } from '../../utils/colors-values'; const fontWeightNormal = `font-weight: 400;`; const fontWeightMedium = `font-weight: 500;`; @@ -81,7 +81,7 @@ const sectionHeading = ` font-size: 11px; line-height: 1.4; text-transform: uppercase; - color: ${ G2.gray[ 700 ] } + color: ${ COLORS.gray[ 700 ] } `; /** diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 5ad74c7000b935..8f36a258220001 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -8,7 +8,7 @@ import { merge } from 'lodash'; */ import { rgba } from './colors'; -export const BASE = { +const BASE = { black: '#000', white: '#fff', }; @@ -19,7 +19,7 @@ export const BASE = { * "G2" refers to the movement to advance the interface of the block editor. * https://github.com/WordPress/gutenberg/issues/18667 */ -export const G2 = { +const G2 = { blue: { medium: { focus: '#007cba', @@ -49,7 +49,7 @@ export const G2 = { }, }; -export const DARK_GRAY = { +const DARK_GRAY = { 900: '#191e23', 800: '#23282d', 700: '#32373c', @@ -63,7 +63,7 @@ export const DARK_GRAY = { placeholder: rgba( G2.gray[ 900 ], 0.62 ), }; -export const DARK_OPACITY = { +const DARK_OPACITY = { 900: rgba( '#000510', 0.9 ), 800: rgba( '#00000a', 0.85 ), 700: rgba( '#06060b', 0.8 ), @@ -76,7 +76,7 @@ export const DARK_OPACITY = { backgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ), }; -export const DARK_OPACITY_LIGHT = { +const DARK_OPACITY_LIGHT = { 900: rgba( '#304455', 0.45 ), 800: rgba( '#425863', 0.4 ), 700: rgba( '#667886', 0.35 ), @@ -88,7 +88,7 @@ export const DARK_OPACITY_LIGHT = { 100: rgba( '#747474', 0.05 ), }; -export const LIGHT_GRAY = { +const LIGHT_GRAY = { 900: '#a2aab2', 800: '#b5bcc2', 700: '#ccd0d4', @@ -101,7 +101,7 @@ export const LIGHT_GRAY = { placeholder: rgba( BASE.white, 0.65 ), }; -export const LIGHT_OPACITY_LIGHT = { +const LIGHT_OPACITY_LIGHT = { 900: rgba( BASE.white, 0.5 ), 800: rgba( BASE.white, 0.45 ), 700: rgba( BASE.white, 0.4 ), @@ -117,7 +117,7 @@ export const LIGHT_OPACITY_LIGHT = { // Additional colors. // Some are from https://make.wordpress.org/design/handbook/foundations/colors/. -export const BLUE = { +const BLUE = { wordpress: { 700: '#00669b', }, @@ -139,19 +139,19 @@ export const BLUE = { }, }; -export const ALERT = { +const ALERT = { yellow: '#f0b849', red: '#d94f4f', green: '#4ab866', }; -export const ADMIN = { +const ADMIN = { theme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`, themeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`, }; // Namespaced values for raw colors hex codes. -export const UI = { +const UI = { theme: ADMIN.theme, background: BASE.white, backgroundDisabled: LIGHT_GRAY[ 200 ],