baseui
Version:
A React Component library implementing the Base design language
36 lines (33 loc) • 5.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getBackgroundColorType = getBackgroundColorType;
var _tokens = require("../tokens");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const LIGHT_COLORS = new Set([_tokens.primitiveColors.red50, _tokens.primitiveColors.red100, _tokens.primitiveColors.red200, _tokens.primitiveColors.red300, _tokens.primitiveColors.red400, _tokens.primitiveColors.green50, _tokens.primitiveColors.green100, _tokens.primitiveColors.green200, _tokens.primitiveColors.green300, _tokens.primitiveColors.green400, _tokens.primitiveColors.teal50, _tokens.primitiveColors.teal100, _tokens.primitiveColors.teal200, _tokens.primitiveColors.teal300, _tokens.primitiveColors.teal400, _tokens.primitiveColors.blue50, _tokens.primitiveColors.blue100, _tokens.primitiveColors.blue200, _tokens.primitiveColors.blue300, _tokens.primitiveColors.blue400, _tokens.primitiveColors.cobalt50, _tokens.primitiveColors.cobalt100, _tokens.primitiveColors.cobalt200, _tokens.primitiveColors.purple50, _tokens.primitiveColors.purple100, _tokens.primitiveColors.purple200, _tokens.primitiveColors.purple300, _tokens.primitiveColors.purple400, _tokens.primitiveColors.magenta50, _tokens.primitiveColors.magenta100, _tokens.primitiveColors.magenta200, _tokens.primitiveColors.magenta300, _tokens.primitiveColors.magenta400, _tokens.primitiveColors.brown50, _tokens.primitiveColors.brown100, _tokens.primitiveColors.brown200, _tokens.primitiveColors.brown300, _tokens.primitiveColors.orange50, _tokens.primitiveColors.orange100, _tokens.primitiveColors.orange200, _tokens.primitiveColors.orange300, _tokens.primitiveColors.orange400, _tokens.primitiveColors.lime50, _tokens.primitiveColors.lime100, _tokens.primitiveColors.lime200, _tokens.primitiveColors.lime300, _tokens.primitiveColors.lime400, _tokens.primitiveColors.platinum50, _tokens.primitiveColors.platinum100, _tokens.primitiveColors.platinum200, _tokens.primitiveColors.platinum300, _tokens.primitiveColors.platinum400, _tokens.primitiveColors.yellow50, _tokens.primitiveColors.yellow100, _tokens.primitiveColors.yellow200, _tokens.primitiveColors.yellow300, _tokens.primitiveColors.yellow400, _tokens.primitiveColors.white, _tokens.primitiveColors.gray50, _tokens.primitiveColors.gray100, _tokens.primitiveColors.gray200, _tokens.primitiveColors.gray300, _tokens.primitiveColors.gray400]);
const DARK_COLORS = new Set([_tokens.primitiveColors.red600, _tokens.primitiveColors.red700, _tokens.primitiveColors.red800, _tokens.primitiveColors.red900, _tokens.primitiveColors.green600, _tokens.primitiveColors.green700, _tokens.primitiveColors.green800, _tokens.primitiveColors.green900, _tokens.primitiveColors.teal600, _tokens.primitiveColors.teal700, _tokens.primitiveColors.teal800, _tokens.primitiveColors.teal900, _tokens.primitiveColors.blue600, _tokens.primitiveColors.blue700, _tokens.primitiveColors.blue800, _tokens.primitiveColors.blue900, _tokens.primitiveColors.purple600, _tokens.primitiveColors.purple700, _tokens.primitiveColors.purple800, _tokens.primitiveColors.purple900, _tokens.primitiveColors.cobalt300, _tokens.primitiveColors.cobalt400, _tokens.primitiveColors.cobalt500, _tokens.primitiveColors.cobalt600, _tokens.primitiveColors.cobalt700, _tokens.primitiveColors.magenta600, _tokens.primitiveColors.magenta700, _tokens.primitiveColors.magenta800, _tokens.primitiveColors.magenta900, _tokens.primitiveColors.brown400, _tokens.primitiveColors.brown500, _tokens.primitiveColors.brown600, _tokens.primitiveColors.brown700, _tokens.primitiveColors.orange600, _tokens.primitiveColors.orange700, _tokens.primitiveColors.orange800, _tokens.primitiveColors.orange900, _tokens.primitiveColors.lime600, _tokens.primitiveColors.lime700, _tokens.primitiveColors.lime800, _tokens.primitiveColors.lime900, _tokens.primitiveColors.platinum500, _tokens.primitiveColors.platinum600, _tokens.primitiveColors.platinum700, _tokens.primitiveColors.platinum800, _tokens.primitiveColors.yellow600, _tokens.primitiveColors.yellow700, _tokens.primitiveColors.yellow800, _tokens.primitiveColors.yellow900, _tokens.primitiveColors.gray600, _tokens.primitiveColors.gray700, _tokens.primitiveColors.gray800, _tokens.primitiveColors.gray900, _tokens.primitiveColors.black]);
const POOR_CONTRAST_COLORS = new Set([_tokens.primitiveColors.gray500, _tokens.primitiveColors.red500, _tokens.primitiveColors.orange500, _tokens.primitiveColors.amber500, _tokens.primitiveColors.yellow600, _tokens.primitiveColors.lime500, _tokens.primitiveColors.green500, _tokens.primitiveColors.teal500, _tokens.primitiveColors.blue500, _tokens.primitiveColors.purple500, _tokens.primitiveColors.magenta500]);
const DARK_COLOR_TOKENS = new Set([...Object.values(_tokens.primitiveDarkColors)]);
function getBackgroundColorType(backgroundColor) {
if (process.env.NODE_ENV !== "production" && POOR_CONTRAST_COLORS.has(backgroundColor)) {
console.warn(`The provided value for backgroundColor, ${backgroundColor}, is not supported because \
it does not pass accessibility contrast tests for either white or black text.`);
return null;
}
if (process.env.NODE_ENV !== "production" && ![_tokens.primitiveColors.white, _tokens.primitiveColors.black].includes(backgroundColor) && DARK_COLOR_TOKENS.has(backgroundColor)) {
console.warn(`It looks like you're supplying a primitive color token from the "dark" theme color ramp for MessageCard's backgroundColor. Only color tokens from the "light" theme color ramp are supported. MessageCard uses an overlay for dark mode.`);
}
if (LIGHT_COLORS.has(backgroundColor)) {
return _constants.BACKGROUND_COLOR_TYPE.light;
}
if (DARK_COLORS.has(backgroundColor)) {
return _constants.BACKGROUND_COLOR_TYPE.dark;
}
return null;
}