Skip to content

Commit

Permalink
feat(logo): support dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
Nikolai Lopin committed Oct 10, 2023
1 parent 4e0b339 commit e9a7e9f
Show file tree
Hide file tree
Showing 8 changed files with 83 additions and 69 deletions.
18 changes: 5 additions & 13 deletions src/components/Logo/Logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import * as React from 'react';
import { DefaultLogo } from './variants/DefaultLogo';
import { BusinessLogo } from './variants/BusinessLogo';
import { applyPrefix, getSemanticValue } from '../../utils/cssVariables';

interface LogoProps {
/**
* Adjust component for display on a dark background
* @default false
*/
inverted?: boolean;
/**
* Change the logo appearance to reflect the respective part of the organization
* @default default
Expand All @@ -20,18 +16,14 @@ interface LogoProps {
monochrome?: boolean;
}

const getColors = (isInverted, isMonochrome): [string, string, string] => {
if (isMonochrome) {
return isInverted ? ['#FFF', '#FFF', '#FFF'] : ['#005478', '#005478', '#005478'];
}

return isInverted ? ['#FF0A2B', '#FFF', '#FFF'] : ['#FF0A2B', '#005478', '#005478'];
const monochromeCss = {
[applyPrefix('logo-free', 's')]: getSemanticValue('logo-now')
};

const Logo: React.FC<LogoProps> = ({ inverted, monochrome, variant }: LogoProps) => {
const Logo: React.FC<LogoProps> = ({ monochrome, variant }: LogoProps) => {
const Component = variant === 'business' ? BusinessLogo : DefaultLogo;

return <Component fill={getColors(inverted, monochrome)} />;
return <Component style={monochrome ? monochromeCss : undefined} />;
};

export { Logo, LogoProps };
12 changes: 1 addition & 11 deletions src/components/Logo/docs/Logo.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { Logo } from '../Logo';
import { onDarkBackground } from '../../../docs/parameters';

const meta: Meta<typeof Logo> = {
title: 'Components/Logo',
Expand Down Expand Up @@ -30,13 +29,4 @@ export const Monochrome: Story = {
args: {
monochrome: true
}
};

export const Inverted: Story = {
args: {
inverted: true
},
parameters: {
...onDarkBackground
}
};
};
53 changes: 29 additions & 24 deletions src/components/Logo/variants/BusinessLogo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
import { FC } from 'react';
import * as React from 'react';
import React, { ElementRef, FC, memo, SVGProps } from 'react';
import { getSemanticValue } from '../../../utils/cssVariables';

interface BusinessLogoProps {
fill: [string, string, string];
}

const BusinessLogo: FC<BusinessLogoProps> = ({ fill }: BusinessLogoProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width="124" height="34" viewBox="0 0 124 34" aria-hidden="true">
<g fill="none" fillRule="evenodd">
<path
fill={fill[1]}
d="M79.358 21.93L74.694 9.403h2.562l.053.145 2.833 7.946 3.164-8.091h1.36l.019.047 3.146 8.042 2.865-8.09h2.562L88.596 21.98h-1.364l-3.246-8.384-3.227 8.384h-1.382l-.02-.05zm-31.356.05V9.404h1.422l7.059 8.009v-8.01h2.382V21.98h-1.39l-7.092-8.027v8.027h-2.381zM67.64 11.423c2.356 0 4.132 1.828 4.132 4.251 0 2.484-1.738 4.286-4.132 4.286-2.393 0-4.132-1.802-4.132-4.286 0-2.463 1.739-4.251 4.132-4.251zm-.018 10.76c3.693 0 6.587-2.852 6.587-6.49 0-3.64-2.894-6.492-6.587-6.492-3.684 0-6.569 2.852-6.569 6.492 0 3.638 2.885 6.49 6.569 6.49z"
/>
<path
fill={fill[0]}
fillRule="nonzero"
d="M35.878 21.98V9.404h9.1v2.185H38.26v2.872h6.13v2.131h-6.13v3.204h6.718v2.184h-9.1zM13.89 14.848V11.57h2.846c1.258 0 2.04.636 2.04 1.659 0 1.013-.763 1.619-2.04 1.619H13.89zm4.468 1.973c1.77-.51 2.856-1.87 2.856-3.612 0-2.237-1.82-3.799-4.426-3.805h-5.28V21.98h2.382v-4.947h1.904l3.285 4.947h2.749l-3.47-5.16zM0 21.98V9.404h8.935v2.185H2.383v2.891h6v2.185h-6v5.315H0zm24.007 0V9.404h9.1v2.185h-6.718v2.872h6.131v2.131h-6.131v3.204h6.719v2.184h-9.101z"
/>
<path
fill={fill[2]}
d="M15.084 33.859h.675v-2.654h2.985v-.607h-2.985v-1.856h3.245v-.607h-3.92v5.724zm8.828.096c1.639 0 2.975-1.285 2.975-2.959 0-1.672-1.336-2.957-2.975-2.957-1.647 0-2.966 1.285-2.966 2.957 0 1.666 1.31 2.959 2.966 2.959zm.009-.625c-1.31 0-2.273-1.006-2.273-2.342 0-1.327.963-2.324 2.273-2.324 1.292 0 2.264 1.006 2.264 2.324 0 1.336-.972 2.342-2.264 2.342zm9.886.529l-1.708-2.524c.91-.139 1.509-.746 1.509-1.587 0-.962-.772-1.613-1.908-1.613h-2.307v5.724h.676v-2.498h1.284l1.666 2.498h.788zm-3.738-5.117h1.604c.755 0 1.232.399 1.232 1.014 0 .617-.477.989-1.232.989H30.07v-2.003zm13.434 2.15c.478-.242.763-.667.763-1.222 0-.92-.668-1.535-1.69-1.535h-2.56v5.724h2.464c1.145 0 1.9-.625 1.9-1.56 0-.652-.322-1.146-.877-1.406zm-1.006-2.15c.712 0 1.084.338 1.084.971 0 .564-.382.876-1.084.876h-1.804v-1.847h1.804zm-.086 4.51h-1.718v-2.056h1.718c.815 0 1.274.391 1.274 1.085 0 .615-.459.97-1.274.97zm6.929.703c1.353 0 2.367-.842 2.367-2.368v-3.452h-.676v3.495c0 1.154-.746 1.7-1.691 1.7-.954 0-1.7-.546-1.7-1.7v-3.495h-.676v3.452c0 1.526.996 2.368 2.376 2.368zm6.938 0c1.092 0 1.925-.634 1.925-1.597 0-.841-.633-1.248-1.396-1.595l-.668-.304c-.555-.251-.972-.442-.972-.962 0-.564.53-.833 1.085-.833.607 0 1.075.26 1.404.763l.468-.39c-.329-.616-1.006-.998-1.863-.998-.963 0-1.805.582-1.805 1.492 0 .859.729 1.249 1.353 1.536l.677.303c.529.234 1.015.451 1.015 1.005 0 .582-.52.955-1.232.955-.729 0-1.31-.356-1.7-1.015l-.503.373c.434.815 1.206 1.267 2.212 1.267zm4.544-.096h.676v-5.724h-.676v5.724zm7.64-5.724v4.406l-3.729-4.45h-.364v5.768h.676v-4.406l3.721 4.449h.373v-5.767h-.677zm3.556 5.724h4.042v-.607h-3.366v-2.056h3.045v-.607h-3.045v-1.847h3.322v-.607h-3.998v5.724zm8.378.096c1.093 0 1.925-.634 1.925-1.597 0-.841-.633-1.248-1.396-1.595l-.668-.304c-.555-.251-.971-.442-.971-.962 0-.564.528-.833 1.084-.833.607 0 1.075.26 1.405.763l.468-.39c-.33-.616-1.006-.998-1.865-.998-.962 0-1.804.582-1.804 1.492 0 .859.729 1.249 1.353 1.536l.677.303c.529.234 1.014.451 1.014 1.005 0 .582-.52.955-1.231.955-.728 0-1.31-.356-1.7-1.015l-.503.373c.434.815 1.206 1.267 2.212 1.267zm6.27 0c1.093 0 1.925-.634 1.925-1.597 0-.841-.632-1.248-1.396-1.595l-.668-.304c-.555-.251-.971-.442-.971-.962 0-.564.528-.833 1.084-.833.607 0 1.075.26 1.405.763l.468-.39c-.33-.616-1.006-.998-1.865-.998-.962 0-1.804.582-1.804 1.492 0 .859.73 1.249 1.354 1.536l.676.303c.529.234 1.014.451 1.014 1.005 0 .582-.52.955-1.23.955-.73 0-1.31-.356-1.7-1.015l-.504.373c.434.815 1.206 1.267 2.212 1.267zM119.62.2l-.004.003-14.847 14.883v-8.34L96.032.202 96.03.2h-4.507l.024.017 10.268 7.723v14.133l.016-.016L123.675.2h-4.056"
/>
</g>
const BusinessLogo: FC<SVGProps<ElementRef<'svg'>>> = memo(props => (
<svg xmlns="http://www.w3.org/2000/svg" width="124" height="34" fill="none" {...props}>
<path
fill={getSemanticValue('logo-free')}
fillRule="evenodd"
d="M0 21.98V9.4h8.94v2.19H2.38v2.89h6v2.18h-6v5.32H0Zm21.21-8.77c0 1.74-1.08 3.1-2.85 3.61l3.47 5.16h-2.75l-3.29-4.95h-1.9v4.95h-2.38V9.4h5.28c2.6.01 4.42 1.57 4.42 3.8Zm14.67 8.77V9.4h9.1v2.19h-6.72v2.87h6.13v2.13h-6.13v3.2h6.72v2.19h-9.1Zm-21.99-7.13v-3.28h2.85c1.26 0 2.04.64 2.04 1.66 0 1.01-.77 1.62-2.04 1.62h-2.85ZM24.01 9.4v12.58h9.1V19.8h-6.72v-3.2h6.13v-2.14h-6.13V11.6h6.72V9.4H24Z"
clipRule="evenodd"
/>
<path
fill={getSemanticValue('logo-now')}
fillRule="evenodd"
d="M79.36 21.93 74.69 9.4h2.57l.05.15 2.83 7.94 3.17-8.09h1.36l.02.05 3.14 8.04L90.7 9.4h2.56L88.6 21.98h-1.37L84 13.6l-3.23 8.38h-1.38l-.02-.05ZM48 21.98V9.4h1.42l7.06 8.01v-8h2.38v12.57h-1.39l-7.09-8.03v8.03H48Zm19.64-10.56a4.1 4.1 0 0 1 4.13 4.25c0 2.49-1.74 4.29-4.13 4.29-2.4 0-4.13-1.8-4.13-4.29 0-2.46 1.74-4.25 4.13-4.25Zm-.02 10.76c3.7 0 6.59-2.85 6.59-6.49s-2.9-6.49-6.59-6.49a6.46 6.46 0 0 0-6.57 6.5 6.46 6.46 0 0 0 6.57 6.48Z"
clipRule="evenodd"
/>
<path
fill={getSemanticValue('logo-now')}
fillRule="evenodd"
d="M119.62.2 104.77 15.1V6.75L96.03.2h-4.5l.02.02 10.27 7.72v14.13l.01-.01L123.67.2h-4.05Z"
clipRule="evenodd"
/>
<path
fill={getSemanticValue('logo-subtitle')}
fillRule="evenodd"
d="M15.08 33.86h.68V31.2h2.98v-.6h-2.98v-1.86H19v-.6h-3.92v5.72Zm8.83.1A2.94 2.94 0 0 0 26.9 31a2.94 2.94 0 0 0-2.98-2.96A2.93 2.93 0 0 0 20.95 31c0 1.66 1.3 2.95 2.96 2.95Zm.01-.63c-1.3 0-2.27-1-2.27-2.34 0-1.33.96-2.33 2.27-2.33 1.3 0 2.26 1.01 2.26 2.33 0 1.33-.97 2.34-2.26 2.34Zm9.89.53-1.71-2.52c.9-.14 1.5-.75 1.5-1.6 0-.95-.76-1.6-1.9-1.6h-2.3v5.72h.67v-2.5h1.28l1.67 2.5h.79Zm-3.74-5.12h1.6c.76 0 1.24.4 1.24 1.02 0 .61-.48.98-1.24.98h-1.6v-2ZM43.5 30.9c.48-.24.77-.66.77-1.22 0-.92-.67-1.54-1.7-1.54h-2.55v5.73h2.46c1.14 0 1.9-.63 1.9-1.56 0-.65-.32-1.15-.88-1.4Zm-1-2.15c.7 0 1.08.34 1.08.97 0 .57-.38.88-1.08.88h-1.8v-1.85h1.8Zm-.09 4.51H40.7V31.2h1.72c.82 0 1.27.39 1.27 1.08 0 .62-.45.97-1.27.97Zm6.93.7c1.35 0 2.37-.84 2.37-2.36v-3.46h-.68v3.5c0 1.15-.75 1.7-1.69 1.7-.95 0-1.7-.55-1.7-1.7v-3.5h-.68v3.46c0 1.52 1 2.36 2.38 2.36Zm6.94 0c1.09 0 1.92-.63 1.92-1.6 0-.83-.63-1.24-1.4-1.59l-.66-.3c-.56-.25-.97-.44-.97-.96 0-.57.53-.84 1.08-.84.6 0 1.08.26 1.4.77l.47-.4c-.32-.6-1-1-1.86-1-.96 0-1.8.6-1.8 1.5 0 .86.72 1.25 1.35 1.54l.68.3c.52.23 1.01.45 1.01 1 0 .59-.52.96-1.23.96a1.9 1.9 0 0 1-1.7-1.02l-.5.38c.43.81 1.2 1.26 2.2 1.26Zm4.54-.1h.68v-5.71h-.68v5.72Zm7.64-5.72v4.41l-3.73-4.45h-.36v5.77h.68v-4.4l3.72 4.44h.37v-5.77h-.68Zm3.56 5.73h4.04v-.6h-3.37V31.2h3.05v-.61h-3.05v-1.85h3.33v-.6h-4v5.72Zm8.38.1c1.09 0 1.92-.64 1.92-1.6 0-.84-.63-1.25-1.4-1.6l-.66-.3c-.56-.25-.97-.44-.97-.96 0-.57.52-.84 1.08-.84.6 0 1.08.26 1.4.77l.47-.4c-.33-.6-1-1-1.86-1-.96 0-1.8.6-1.8 1.5 0 .86.72 1.25 1.35 1.54l.67.3c.53.23 1.02.45 1.02 1 0 .59-.52.96-1.23.96a1.9 1.9 0 0 1-1.7-1.02l-.5.38c.43.81 1.2 1.26 2.2 1.26Zm6.27 0c1.09 0 1.92-.64 1.92-1.6 0-.84-.63-1.25-1.4-1.6l-.66-.3c-.56-.25-.97-.44-.97-.96 0-.57.52-.84 1.08-.84.6 0 1.08.26 1.4.77l.47-.4c-.33-.6-1-1-1.86-1-.96 0-1.8.6-1.8 1.5 0 .86.72 1.25 1.35 1.54l.67.3c.53.23 1.02.45 1.02 1 0 .59-.52.96-1.23.96a1.9 1.9 0 0 1-1.7-1.02l-.5.38c.43.81 1.2 1.26 2.2 1.26Z"
clipRule="evenodd"
/>
</svg>
);
));

export { BusinessLogo };
43 changes: 23 additions & 20 deletions src/components/Logo/variants/DefaultLogo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
import * as React from 'react';
import { FC } from 'react';
import React, { ElementRef, FC, SVGProps, memo } from 'react';
import { getSemanticValue } from '../../../utils/cssVariables';

interface DefaultLogoProps {
fill: [string, string, string];
}

const DefaultLogo: FC<DefaultLogoProps> = ({ fill }: DefaultLogoProps) => (
<svg width="124" height="22" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g fill="none" fillRule="evenodd">
<path
fill={fill[1]}
d="M119.678761 0l-.003099.0030986-14.854338 14.8602253V6.53647887l-8.7417465-6.534L96.0777183 0h-4.5096901l.0244788.01735211 10.272761 7.7099155V21.8388732l.016732-.0161126L123.719324.01735211 123.736986 0h-4.058225M67.6561972 21.9485634c3.6956901 0 6.5910141-2.8472958 6.5910141-6.4797747 0-3.634338-2.895324-6.48101405-6.5910141-6.48101405-3.6851549 0-6.5711831 2.84667605-6.5711831 6.48101405 0 3.6324789 2.8860282 6.4797747 6.5711831 6.4797747zm.0182817-10.7428169c2.3577183 0 4.1344507 1.8247605 4.1344507 4.2441408 0 2.4807324-1.7392395 4.2800845-4.1344507 4.2800845-2.3942817 0-4.1341409-1.7993521-4.1341409-4.2800845 0-2.4593521 1.7398592-4.2441408 4.1341409-4.2441408zM48.0256901 21.7462254V9.18949296h1.4231831l7.062 7.99622534V9.18949296H58.894V21.7462254h-1.3909577l-7.0942254-8.0148169v8.0148169h-2.3831268zm31.3716902-.0508169L74.731831 9.18949296h2.5631549l.0526761.14532394 2.8342817 7.9330141 3.1652112-8.07833804h1.3615212l3.1658309 8.07709854 2.8665071-8.07709854h2.5628451L88.6404789 21.7462254h-1.3646197l-3.2482536-8.371155-3.2287324 8.371155h-1.3822817l-.0192112-.0508169z"
/>
<path
d="M24.0190423 21.7462254V9.18980282h9.1042816v2.18171828H26.402169v2.8677465h6.1339718v2.127493H26.402169v3.1983662h6.7220845v2.1810986h-9.1052112zM0 21.7462254V9.18980282h8.94005634v2.18171828H2.38374648v2.8869578h6.0044507v2.1804788h-6.0044507v5.3072677H0zm18.367831-5.1514085c1.7708451-.508169 2.8572113-1.865662 2.8572113-3.6061408 0-2.233155-1.8210423-3.79298596-4.4275775-3.79887328h-5.2830986V21.7462254h2.3831268v-4.939155h1.905014l3.2866761 4.939155h2.7506197l-3.4719718-5.1514085zm-4.470338-1.9694648v-3.2727324h2.8479155c1.2586478 0 2.0401126.6345916 2.0401126 1.6558873 0 1.012-.7622535 1.6168451-2.0401126 1.6168451H13.897493zm21.9981408 7.1208733V9.18980282h9.1045916v2.18171828h-6.7214648v2.8677465h6.1342817v2.127493h-6.1342817v3.1983662h6.7214648v2.1810986h-9.1045916z"
fill={fill[0]}
fillRule="nonzero"
/>
</g>
const DefaultLogo: FC<SVGProps<ElementRef<'svg'>>> = memo(props => (
<svg xmlns="http://www.w3.org/2000/svg" width="124" height="22" fill="none" {...props}>
<path
fill={getSemanticValue('logo-free')}
fillRule="evenodd"
d="M0 21.75V9.19h8.94v2.18H2.38v2.89h6v2.18h-6v5.3H0Zm24.02 0V9.19h9.1v2.18H26.4v2.87h6.14v2.13H26.4v3.2h6.72v2.18h-9.1Zm-2.8-8.76c0 1.74-1.08 3.1-2.85 3.6l3.47 5.16h-2.75L15.8 16.8h-1.9v4.94H11.5V9.19h5.29c2.6 0 4.43 1.57 4.43 3.8Zm-7.32 1.64v-3.28h2.85c1.25 0 2.04.64 2.04 1.66 0 1.01-.77 1.62-2.04 1.62H13.9Zm22-5.44v12.56H45v-2.18h-6.72v-3.2h6.13v-2.13h-6.13v-2.87H45V9.2h-9.1Z"
clipRule="evenodd"
/>
<path
fill={getSemanticValue('logo-now')}
fillRule="evenodd"
d="M67.66 21.95c3.7 0 6.59-2.85 6.59-6.48 0-3.64-2.9-6.48-6.6-6.48a6.46 6.46 0 0 0-6.57 6.48 6.46 6.46 0 0 0 6.58 6.48Zm.01-10.74a4.1 4.1 0 0 1 4.14 4.24c0 2.48-1.74 4.28-4.14 4.28-2.39 0-4.13-1.8-4.13-4.28 0-2.46 1.74-4.24 4.13-4.24ZM48.03 21.75V9.19h1.42l7.06 8v-8h2.38v12.56H57.5l-7.1-8.02v8.02h-2.37Zm31.37-.05L74.73 9.19h2.56l.06.14 2.83 7.94 3.17-8.08h1.36l3.16 8.08 2.87-8.08h2.56l-4.66 12.56h-1.36l-3.25-8.37-3.23 8.37h-1.38l-.02-.05Z"
clipRule="evenodd"
/>
<path
fill={getSemanticValue('logo-now')}
fillRule="evenodd"
d="m119.68 0-14.86 14.86V6.54L96.08 0h-4.51l.02.02 10.27 7.7v14.12l.02-.02L123.72.02l.02-.02h-4.06Z"
clipRule="evenodd"
/>
</svg>
);
));

export { DefaultLogo };
1 change: 0 additions & 1 deletion src/components/Text/Text.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ interface TextProps
/**
* Enforce primary color
*/

primary?: boolean;
/**
* Adjust color to indicate secondary information
Expand Down
10 changes: 10 additions & 0 deletions src/essentials/Colors/Colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,11 @@ export const SemanticColors = {
default: Colors.orange[900]
}
},
logo: {
free: 'hsl(350, 91%, 41%)',
now: 'hsl(350, 91%, 41%)',
subtitle: Colors.black
},
shadow: {
default: Colors.blue.primary[200]
}
Expand Down Expand Up @@ -356,6 +361,11 @@ export const SemanticColorsDarkSchema = {
focus: Colors.blue.secondary[900],
disabled: Colors.blue.primary[550]
},
logo: {
free: 'hsl(350, 91%, 41%)',
now: Colors.white,
subtitle: Colors.white
},
shadow: {
default: Colors.blue.primary[550]
}
Expand Down
10 changes: 10 additions & 0 deletions src/essentials/Colors/RedesignedColors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,11 @@ export const SemanticColors = {
default: Colors.red[900]
}
},
logo: {
free: Colors.brand.rushhour,
now: Colors.brand.rushhour,
subtitle: Colors.black
},
shadow: {
default: Colors.neutral[200]
}
Expand Down Expand Up @@ -348,6 +353,11 @@ export const SemanticColorsDarkSchema = {
default: Colors.red[900]
}
},
logo: {
free: Colors.brand.rushhour,
now: Colors.white,
subtitle: Colors.white
},
shadow: {
default: Colors.neutral[650]
}
Expand Down
5 changes: 5 additions & 0 deletions src/essentials/Colors/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,11 @@ export interface SemanticColorsSchema {
emphasized: Color;
};
};
logo: {
free: Color;
now: Color;
subtitle: Color;
}
shadow: {
default: Color;
};
Expand Down

0 comments on commit e9a7e9f

Please sign in to comment.