@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.
64 lines (63 loc) • 6.29 kB
JavaScript
/* eslint-disable max-len */
import React from 'react';
import { useThemeObserver } from '@atlaskit/tokens';
import { defaultLogoParams } from '../constants';
import { getColorsFromAppearance } from '../utils';
import Wrapper from '../wrapper';
const svg = ({
appearance,
iconColor,
textColor
}, colorMode) => {
let colors = {
iconColor,
textColor
};
if (appearance) {
colors = getColorsFromAppearance(appearance, colorMode);
}
return `<svg fill="none" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377 32" focusable="false" aria-hidden="true">
<path
d="M369.828 12.524c-2.79 0-4.201 1.81-4.477 4.478h8.556c-.153-2.852-1.441-4.478-4.079-4.478m5.888 12.635c-1.257.675-3.189.92-4.753.92-5.735 0-8.249-3.312-8.249-8.004 0-4.63 2.576-7.943 7.237-7.943 4.723 0 6.624 3.282 6.624 7.943v1.196h-11.193c.368 2.607 2.054 4.293 5.673 4.293 1.779 0 3.281-.337 4.661-.828zm-15.093-2.147v2.362c-.92.49-2.331.705-3.741.705-5.459 0-8.004-3.312-8.004-8.004 0-4.63 2.545-7.943 8.004-7.943 1.38 0 2.453.184 3.649.736v2.454c-.981-.46-2.024-.736-3.465-.736-3.987 0-5.612 2.514-5.612 5.489s1.656 5.49 5.673 5.49c1.564 0 2.545-.215 3.496-.553m-26.118-4.906c0 3.68 1.472 5.52 4.201 5.52 2.361 0 4.477-1.503 4.477-4.907v-1.227c0-3.404-1.932-4.906-4.17-4.906-2.975 0-4.508 1.962-4.508 5.52m8.678 7.666v-2.76c-.981 2.024-2.821 3.067-5.182 3.067-4.079 0-6.134-3.465-6.134-7.973 0-4.324 2.147-7.974 6.44-7.974 2.239 0 3.956 1.012 4.876 3.006v-2.699h2.638v15.333zm-12.783-.031c-.215.062-.675.123-1.35.123-2.514 0-4.109-1.196-4.109-4.017V4.03h2.637v17.51c0 1.38.92 1.87 2.055 1.87.276 0 .46 0 .767-.03zm-11.153-7.635c0-3.68-1.472-5.52-4.202-5.52-2.361 0-4.477 1.502-4.477 4.906v1.227c0 3.404 1.932 4.907 4.171 4.907 2.974 0 4.508-1.963 4.508-5.52m-3.803 7.973c-2.239 0-3.956-1.012-4.876-3.005v8.678h-2.637V10.44h2.637v2.76c.981-2.024 2.821-3.067 5.183-3.067 4.078 0 6.133 3.466 6.133 7.974 0 4.324-2.147 7.973-6.44 7.973zm-14.975-5.06c0 1.35.798 2.27 2.423 2.27.613 0 1.196-.123 1.656-.215v2.545a6.3 6.3 0 0 1-1.779.245c-3.281 0-4.876-1.932-4.876-4.784v-8.188h-2.484V10.44h2.484V7.19h2.576v3.25h4.079v2.453h-4.079zm-13.537-8.495c-2.79 0-4.201 1.81-4.477 4.478h8.556c-.153-2.852-1.441-4.478-4.079-4.478m5.888 12.635c-1.257.675-3.189.92-4.753.92-5.735 0-8.249-3.312-8.249-8.004 0-4.63 2.576-7.943 7.237-7.943 4.723 0 6.624 3.282 6.624 7.943v1.196h-11.193c.368 2.607 2.054 4.293 5.673 4.293 1.779 0 3.281-.337 4.661-.828zm-23.82.613h-2.637V4.03H269v13.585l6.593-7.176h3.435l-7.207 7.544 7.514 7.79h-3.588L269 18.595zm-10.333-9.046v9.046h-2.576V10.44h2.576v2.699c.889-1.81 2.422-3.098 5.428-2.914V12.8c-3.374-.337-5.428.675-5.428 3.926m-17.869 1.38c0 3.68 1.472 5.52 4.201 5.52 2.361 0 4.477-1.503 4.477-4.907v-1.227c0-3.404-1.932-4.906-4.17-4.906-2.975 0-4.508 1.962-4.508 5.52m8.678 7.666v-2.76c-.981 2.024-2.821 3.067-5.182 3.067-4.079 0-6.134-3.465-6.134-7.973 0-4.324 2.147-7.974 6.44-7.974 2.239 0 3.956 1.012 4.876 3.006v-2.699h2.638v15.333zm-31.445-11.009-2.76-7.483v18.492h-2.76V5.624h4.784l4.569 11.562 1.871 5.55 1.871-5.55 4.6-11.562h4.446v20.148h-2.76V7.495l-2.361 7.268-4.447 11.01h-2.668z"
fill="${colors.textColor}"
/>
<path
d="M107.447 11.267c0 2.972 1.345 5.308 6.795 6.37 3.185.707 3.893 1.203 3.893 2.264 0 1.062-.708 1.699-2.973 1.699-2.619 0-5.733-.92-7.785-2.123v4.812c1.627.779 3.751 1.699 7.785 1.699 5.662 0 7.856-2.548 7.856-6.228m0 .07c0-3.538-1.84-5.166-7.148-6.299-2.902-.637-3.61-1.274-3.61-2.194 0-1.132 1.062-1.628 2.973-1.628 2.335 0 4.6.708 6.794 1.7V6.807c-1.557-.779-3.892-1.345-6.653-1.345-5.237 0-7.927 2.265-7.927 5.945m72.475-5.803v20.172h4.318V10.417l1.769 4.034 6.087 11.325h5.379V5.604h-4.247v13.023l-1.628-3.822-4.883-9.2zm-27.319 0h-4.671v20.172h4.671zm-10.05 14.156c0-3.54-1.841-5.167-7.149-6.3-2.902-.636-3.609-1.273-3.609-2.194 0-1.132 1.061-1.627 2.972-1.627 2.336 0 4.601.707 6.795 1.698v-4.6c-1.557-.779-3.893-1.345-6.653-1.345-5.238 0-7.927 2.265-7.927 5.945 0 2.973 1.345 5.308 6.794 6.37 3.185.708 3.893 1.203 3.893 2.265s-.708 1.699-2.973 1.699c-2.618 0-5.733-.92-7.785-2.124v4.813c1.628.779 3.751 1.699 7.785 1.699 5.592 0 7.857-2.548 7.857-6.3zM71.069 5.604v20.172h9.625l1.486-4.389h-6.44V5.604zm-19.039 0v4.318h5.167v15.854h4.741V9.922h5.592V5.604zm-6.866 0h-6.157L32 25.776h5.379l.99-3.398c1.204.354 2.478.566 3.752.566s2.548-.212 3.751-.566l.991 3.397h5.379c-.07 0-7.078-20.17-7.078-20.17zM42.05 18.698c-.92 0-1.77-.142-2.548-.354l2.548-8.776 2.548 8.776a9.6 9.6 0 0 1-2.548.354M97.326 5.604H91.17l-7.08 20.172h5.38l.99-3.398c1.203.354 2.477.566 3.751.566s2.548-.212 3.751-.566l.991 3.397h5.379zm-3.114 13.094c-.92 0-1.77-.142-2.548-.354l2.548-8.776 2.548 8.776a9.6 9.6 0 0 1-2.548.354m75.306-13.094h-6.157l-7.007 20.172h5.379l.991-3.398c1.203.354 2.477.566 3.751.566s2.548-.212 3.751-.566l.991 3.397h5.379zm-3.043 13.094c-.92 0-1.77-.142-2.548-.354l2.548-8.776 2.548 8.776a10 10 0 0 1-2.548.354M22.878 24.817 12.293 3.647c-.208-.458-.416-.541-.666-.541-.209 0-.459.083-.709.5-1.5 2.375-2.167 5.126-2.167 8 0 4.002 2.042 7.752 5.043 13.795.333.666.583.791 1.166.791h7.335c.542 0 .833-.208.833-.625 0-.208-.041-.333-.25-.75M7.501 14.816c-.833-1.25-1.083-1.334-1.292-1.334s-.333.084-.708.834L.208 24.9c-.166.334-.208.459-.208.626 0 .333.292.666.917.666h7.46c.5 0 .874-.416 1.083-1.208.25-1 .333-1.875.333-2.917 0-2.917-1.292-5.751-2.292-7.251"
fill="${colors.iconColor}"
/>
</svg>`;
};
/**
* __Atlassian Marketplace logo__
*
* The Atlassian Marketplace logo with both the wordmark and the icon combined.
*
* - [Examples](https://atlassian.design/components/logo/examples)
* - [Code](https://atlassian.design/components/logo/code)
* - [Usage](https://atlassian.design/components/logo/usage)
*/
export const AtlassianMarketplaceLogo = ({
appearance,
label = 'Atlassian Marketplace',
size = defaultLogoParams.size,
testId,
textColor = defaultLogoParams.textColor,
iconColor = defaultLogoParams.iconColor
}) => {
const {
colorMode
} = useThemeObserver();
return /*#__PURE__*/React.createElement(Wrapper, {
appearance: appearance,
iconColor: iconColor,
label: label,
size: size,
svg: svg({
appearance,
iconColor,
textColor
}, colorMode),
testId: testId,
textColor: textColor
});
};