@atlaskit/logo
Version:
A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.
122 lines (120 loc) • 3.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getColorsFromAppearanceOldLogos = exports.getColorsFromAppearance = exports.getColorsForLoom = void 0;
var _colors = require("@atlaskit/theme/colors");
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
// TODO: This is where we need to add tokens for all appearance color values
var getColorsFromAppearanceOldLogos = exports.getColorsFromAppearanceOldLogos = function getColorsFromAppearanceOldLogos(appearance, colorMode) {
var iconGradientStart, iconGradientStop, iconColor, textColor, atlassianLogoTextColor;
switch (appearance) {
case 'brand':
iconGradientStart = _colors.B400;
iconGradientStop = _colors.B200;
iconColor = _colors.B200;
textColor = "var(--ds-text, ".concat(_colors.N800, ")");
// This is only used for the top level Atlassian wordmark (see AtlassianLogo
// or AtlassianStartLogo for example), and is only different for the Brand
// appearance - a bold brand color. For other appearances,
// atlassianLogoTextColor is the same as textColor.
atlassianLogoTextColor = _colors.B400;
break;
case 'neutral':
iconGradientStart = _colors.N600;
iconGradientStop = _colors.N100;
iconColor = _colors.N100;
textColor = _colors.N400;
atlassianLogoTextColor = _colors.N400;
break;
case 'inverse':
iconGradientStart = '#FFFFFF66';
iconGradientStop = '#FFFFFF';
iconColor = '#FFFFFF';
textColor = '#FFFFFF';
atlassianLogoTextColor = '#FFFFFF';
break;
}
if (colorMode === 'dark' && appearance === 'inverse') {
iconGradientStart = '#161A1D66';
iconGradientStop = '#161A1D';
iconColor = '#161A1D';
textColor = '#161A1D';
atlassianLogoTextColor = '#161A1D';
}
return {
iconGradientStart: iconGradientStart,
iconGradientStop: iconGradientStop,
iconColor: iconColor,
textColor: textColor,
atlassianLogoTextColor: atlassianLogoTextColor
};
};
var getColorsFromAppearance = exports.getColorsFromAppearance = function getColorsFromAppearance(appearance, colorMode) {
var iconColor, textColor, atlassianLogoTextColor;
if (colorMode === 'dark') {
switch (appearance) {
case 'brand':
iconColor = '#357DE8';
textColor = '#E2E3E4';
atlassianLogoTextColor = '#357DE8';
break;
case 'neutral':
iconColor = '#96999E';
textColor = '#BFC1C4';
atlassianLogoTextColor = '#96999E';
break;
case 'inverse':
iconColor = '#101214';
textColor = '#101214';
atlassianLogoTextColor = '#101214';
break;
}
} else {
switch (appearance) {
case 'brand':
iconColor = '#1868DB';
textColor = '#101214';
atlassianLogoTextColor = '#1868DB';
break;
case 'neutral':
iconColor = '#6C6F77';
textColor = '#3B3D42';
atlassianLogoTextColor = '#6C6F77';
break;
case 'inverse':
iconColor = _colors.N0;
textColor = _colors.N0;
atlassianLogoTextColor = _colors.N0;
break;
}
}
return {
iconColor: iconColor,
textColor: textColor,
atlassianLogoTextColor: atlassianLogoTextColor
};
};
var getColorsForLoom = exports.getColorsForLoom = function getColorsForLoom(appearance, colorMode) {
var iconColor = getColorsFromAppearance(appearance, colorMode).iconColor;
var textColor = getColorsFromAppearance(appearance, colorMode).textColor;
if (colorMode === 'dark') {
switch (appearance) {
case 'brand':
iconColor = '#625DF5';
textColor = '#EFF0FF';
break;
}
} else {
switch (appearance) {
case 'brand':
iconColor = '#625DF5';
textColor = '#252434';
break;
}
}
return {
iconColor: iconColor,
textColor: textColor
};
};