@wordpress/components
Version:
UI components for WordPress.
183 lines (167 loc) • 4.13 kB
JavaScript
/**
* External dependencies
*/
import { merge } from 'lodash';
/**
* Internal dependencies
*/
import { rgba } from './colors';
export const BASE = {
black: '#000',
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
*/
export const G2 = {
blue: {
medium: {
focus: '#007cba',
focusDark: '#fff',
},
},
gray: {
900: '#1e1e1e',
700: '#757575', // Meets 4.6:1 text contrast against white.
600: '#949494', // Meets 3:1 UI or large text contrast against white.
400: '#ccc',
200: '#ddd', // Used for most borders.
100: '#f0f0f0',
},
darkGray: {
primary: '#1e1e1e',
heading: '#050505',
},
mediumGray: {
text: '#757575',
},
lightGray: {
ui: '#949494',
secondary: '#ccc',
tertiary: '#e7e8e9',
},
};
export const DARK_GRAY = {
900: '#191e23',
800: '#23282d',
700: '#32373c',
600: '#40464d',
500: '#555d66', // Use this most of the time for dark items.
400: '#606a73',
300: '#6c7781', // Lightest gray that can be used for AA text contrast.
200: '#7e8993',
150: '#8d96a0', // Lightest gray that can be used for AA non-text contrast.
100: '#8f98a1',
placeholder: rgba( G2.gray[ 900 ], 0.62 ),
};
export const DARK_OPACITY = {
900: rgba( '#000510', 0.9 ),
800: rgba( '#00000a', 0.85 ),
700: rgba( '#06060b', 0.8 ),
600: rgba( '#000913', 0.75 ),
500: rgba( '#0a1829', 0.7 ),
400: rgba( '#0a1829', 0.65 ),
300: rgba( '#0e1c2e', 0.62 ),
200: rgba( '#162435', 0.55 ),
100: rgba( '#223443', 0.5 ),
backgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),
};
export const DARK_OPACITY_LIGHT = {
900: rgba( '#304455', 0.45 ),
800: rgba( '#425863', 0.4 ),
700: rgba( '#667886', 0.35 ),
600: rgba( '#7b86a2', 0.3 ),
500: rgba( '#9197a2', 0.25 ),
400: rgba( '#95959c', 0.2 ),
300: rgba( '#829493', 0.15 ),
200: rgba( '#8b8b96', 0.1 ),
100: rgba( '#747474', 0.05 ),
};
export const LIGHT_GRAY = {
900: '#a2aab2',
800: '#b5bcc2',
700: '#ccd0d4',
600: '#d7dade',
500: '#e2e4e7', // Good for "grayed" items and borders.
400: '#e8eaeb', // Good for "readonly" input fields and special text selection.
300: '#edeff0',
200: '#f3f4f5',
100: '#f8f9f9',
placeholder: rgba( BASE.white, 0.65 ),
};
export const LIGHT_OPACITY_LIGHT = {
900: rgba( BASE.white, 0.5 ),
800: rgba( BASE.white, 0.45 ),
700: rgba( BASE.white, 0.4 ),
600: rgba( BASE.white, 0.35 ),
500: rgba( BASE.white, 0.3 ),
400: rgba( BASE.white, 0.25 ),
300: rgba( BASE.white, 0.2 ),
200: rgba( BASE.white, 0.15 ),
100: rgba( BASE.white, 0.1 ),
backgroundFill: rgba( LIGHT_GRAY[ 300 ], 0.8 ),
};
// Additional colors.
// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
export const BLUE = {
wordpress: {
700: '#00669b',
},
dark: {
900: '#0071a1',
},
medium: {
900: '#006589',
800: '#00739c',
700: '#007fac',
600: '#008dbe',
500: '#00a0d2',
400: '#33b3db',
300: '#66c6e4',
200: '#bfe7f3',
100: '#e5f5fa',
highlight: '#b3e7fe',
focus: '#007cba',
},
};
export const ALERT = {
yellow: '#f0b849',
red: '#d94f4f',
green: '#4ab866',
};
export 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 = {
theme: ADMIN.theme,
background: BASE.white,
backgroundDisabled: LIGHT_GRAY[ 200 ],
border: G2.gray[ 700 ],
borderFocus: ADMIN.themeDark10,
borderDisabled: G2.gray[ 400 ],
borderLight: G2.gray[ 200 ],
label: DARK_GRAY[ 500 ],
textDisabled: DARK_GRAY[ 150 ],
textDark: BASE.white,
textLight: BASE.black,
};
export const COLORS = {
...BASE,
darkGray: merge( {}, DARK_GRAY, G2.darkGray ),
darkOpacity: DARK_OPACITY,
darkOpacityLight: DARK_OPACITY_LIGHT,
mediumGray: G2.mediumGray,
gray: G2.gray,
lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
lightGrayLight: LIGHT_OPACITY_LIGHT,
blue: merge( {}, BLUE, G2.blue ),
alert: ALERT,
admin: ADMIN,
ui: UI,
};
export default COLORS;