@wordpress/components
Version:
UI components for WordPress.
177 lines (173 loc) • 4.22 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;
//# sourceMappingURL=colors-values.js.map