1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00

[CL-395] Add and use art colors in svgs (#10990)

This commit is contained in:
Victoria League
2024-09-11 14:54:07 -04:00
committed by GitHub
parent 8e4dab5eba
commit a0a0a7ae13
11 changed files with 100 additions and 90 deletions

View File

@@ -2,12 +2,12 @@ import { svgIcon } from "@bitwarden/components";
export const NoSendsIcon = svgIcon`
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="125" fill="none">
<path class="tw-stroke-text-headers" stroke-width="3" d="M13.425 11.994H5.99a4.311 4.311 0 0 0-4.311 4.312v62.09a4.311 4.311 0 0 0 4.311 4.311h40.09"/>
<path class="tw-stroke-text-headers tw-fill-background" stroke-width="3" d="M66.27 75.142h-49.9a3.234 3.234 0 0 1-3.233-3.234V9.818a3.234 3.234 0 0 1 3.234-3.233h35.764a3.233 3.233 0 0 1 2.293.953l14.134 14.216c.602.605.94 1.425.94 2.28v47.874a3.233 3.233 0 0 1-3.233 3.234Z"/>
<path class="tw-stroke-info-600" stroke-width="2" d="M47.021 35.586c0-3.818-2.728-6.915-6.095-6.915-3.367 0-6.096 3.097-6.096 6.915"/>
<path class="tw-stroke-info-600" stroke-width="2" d="M47.38 35.335H34.058a3.593 3.593 0 0 0-3.593 3.592v9.817a3.593 3.593 0 0 0 3.593 3.593H47.38a3.593 3.593 0 0 0 3.593-3.593v-9.817a3.593 3.593 0 0 0-3.593-3.592Z"/>
<path class="tw-stroke-text-headers" stroke-linecap="round" stroke-width="2" d="M40.72 44.34v2.618"/>
<path class="tw-stroke-text-headers" stroke-linecap="round" stroke-width="4" d="M40.72 42.7v-.373"/>
<path class="tw-stroke-text-headers" fill="rgb(var(--color-background-alt))" stroke-width="3" d="M89.326 64.022s1.673-.73 2.252.572c.512 1.138-.822 2.033-.822 2.033L56.757 88.133a3.886 3.886 0 0 0-1.583 2.188l-4.732 16.705a2.665 2.665 0 0 0 .059 1.611 2.596 2.596 0 0 0 1.891 1.663c.331.07.673.071 1.004.004.402-.077.78-.25 1.102-.503l10.11-7.88a3.138 3.138 0 0 1 1.92-.663 3.08 3.08 0 0 1 1.905.662l13.926 10.948a2.556 2.556 0 0 0 3.162 0 2.71 2.71 0 0 0 .727-.879l31.777-61.762c.231-.448.33-.952.284-1.455a2.606 2.606 0 0 0-1.721-2.226 2.499 2.499 0 0 0-1.457-.06l-81.18 20.418c-.465.12-.888.364-1.223.708a2.672 2.672 0 0 0-.632 2.676c.146.46.417.865.78 1.174L46.2 83.1a4.463 4.463 0 0 0 2.565 1.572 4.489 4.489 0 0 0 2.984-.413l37.578-20.237Z"/>
<path class="tw-stroke-art-primary" stroke-width="3" d="M13.425 11.994H5.99a4.311 4.311 0 0 0-4.311 4.312v62.09a4.311 4.311 0 0 0 4.311 4.311h40.09"/>
<path class="tw-stroke-art-primary tw-fill-background" stroke-width="3" d="M66.27 75.142h-49.9a3.234 3.234 0 0 1-3.233-3.234V9.818a3.234 3.234 0 0 1 3.234-3.233h35.764a3.233 3.233 0 0 1 2.293.953l14.134 14.216c.602.605.94 1.425.94 2.28v47.874a3.233 3.233 0 0 1-3.233 3.234Z"/>
<path class="tw-stroke-art-accent" stroke-width="2" d="M47.021 35.586c0-3.818-2.728-6.915-6.095-6.915-3.367 0-6.096 3.097-6.096 6.915"/>
<path class="tw-stroke-art-accent" stroke-width="2" d="M47.38 35.335H34.058a3.593 3.593 0 0 0-3.593 3.592v9.817a3.593 3.593 0 0 0 3.593 3.593H47.38a3.593 3.593 0 0 0 3.593-3.593v-9.817a3.593 3.593 0 0 0-3.593-3.592Z"/>
<path class="tw-stroke-art-primary" stroke-linecap="round" stroke-width="2" d="M40.72 44.34v2.618"/>
<path class="tw-stroke-art-primary" stroke-linecap="round" stroke-width="4" d="M40.72 42.7v-.373"/>
<path class="tw-stroke-art-primary" fill="rgb(var(--color-background-alt))" stroke-width="3" d="M89.326 64.022s1.673-.73 2.252.572c.512 1.138-.822 2.033-.822 2.033L56.757 88.133a3.886 3.886 0 0 0-1.583 2.188l-4.732 16.705a2.665 2.665 0 0 0 .059 1.611 2.596 2.596 0 0 0 1.891 1.663c.331.07.673.071 1.004.004.402-.077.78-.25 1.102-.503l10.11-7.88a3.138 3.138 0 0 1 1.92-.663 3.08 3.08 0 0 1 1.905.662l13.926 10.948a2.556 2.556 0 0 0 3.162 0 2.71 2.71 0 0 0 .727-.879l31.777-61.762c.231-.448.33-.952.284-1.455a2.606 2.606 0 0 0-1.721-2.226 2.499 2.499 0 0 0-1.457-.06l-81.18 20.418c-.465.12-.888.364-1.223.708a2.672 2.672 0 0 0-.632 2.676c.146.46.417.865.78 1.174L46.2 83.1a4.463 4.463 0 0 0 2.565 1.572 4.489 4.489 0 0 0 2.984-.413l37.578-20.237Z"/>
</svg>
`;

View File

@@ -2,12 +2,12 @@ import { svgIcon } from "@bitwarden/components";
export const SendCreatedIcon = svgIcon`
<svg width="96" height="95" viewBox="0 0 96 95" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="tw-stroke-text-headers" d="M89.4998 48.3919C89.4998 70.5749 70.9198 88.5573 47.9998 88.5573C46.0374 88.5573 44.1068 88.4257 42.217 88.1707M6.49976 48.3919C6.49976 26.2092 25.08 8.22656 47.9998 8.22656C51.8283 8.22656 55.5353 8.72824 59.0553 9.66744" stroke-linecap="round" stroke-linejoin="round"/>
<path class="tw-stroke-text-headers" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5.47085 67.8617C2.60335 61.9801 1 55.4075 1 48.4729C1 23.3503 22.0426 2.98438 48 2.98438C52.3355 2.98438 56.534 3.55257 60.5205 4.61618M92.211 32.9993C94.016 37.8295 95 43.0399 95 48.4729C95 73.5956 73.9575 93.9614 48 93.9614C45.7775 93.9614 43.5911 93.8119 41.4508 93.5235" />
<path class="tw-fill-text-headers" d="M20.8242 84.8672C20.8242 84.3149 20.3765 83.8672 19.8242 83.8672C19.2719 83.8672 18.8242 84.3149 18.8242 84.8672H20.8242ZM18.8242 87.2442C18.8242 87.7965 19.2719 88.2442 19.8242 88.2442C20.3765 88.2442 20.8242 87.7965 20.8242 87.2442H18.8242ZM18.8242 84.1908C18.8242 84.7431 19.2719 85.1908 19.8242 85.1908C20.3765 85.1908 20.8242 84.7431 20.8242 84.1908H18.8242ZM20.8242 83.8516C20.8242 83.2993 20.3765 82.8516 19.8242 82.8516C19.2719 82.8516 18.8242 83.2993 18.8242 83.8516H20.8242ZM26.7882 76.042C26.7882 72.0015 23.7427 68.5898 19.8238 68.5898V70.5898C22.4931 70.5898 24.7882 72.9552 24.7882 76.042H26.7882ZM19.8238 68.5898C15.9049 68.5898 12.8594 72.0015 12.8594 76.042H14.8594C14.8594 72.9552 17.1545 70.5898 19.8238 70.5898V68.5898ZM11.5 77.0391H28.1475V75.0391H11.5V77.0391ZM28.1475 77.0391C28.4548 77.0391 28.6475 77.2719 28.6475 77.4908H30.6475C30.6475 76.1062 29.4972 75.0391 28.1475 75.0391V77.0391ZM28.6475 77.4908V90.5469H30.6475V77.4908H28.6475ZM28.6475 90.5469C28.6475 90.7658 28.4548 90.9987 28.1475 90.9987V92.9987C29.4972 92.9987 30.6475 91.9315 30.6475 90.5469H28.6475ZM28.1475 90.9987H11.5V92.9987H28.1475V90.9987ZM11.5 90.9987C11.1928 90.9987 11 90.7658 11 90.5469H9C9 91.9315 10.1504 92.9987 11.5 92.9987V90.9987ZM11 90.5469V77.4908H9V90.5469H11ZM11 77.4908C11 77.2719 11.1928 77.0391 11.5 77.0391V75.0391C10.1504 75.0391 9 76.1062 9 77.4908H11ZM18.8242 84.8672V87.2442H20.8242V84.8672H18.8242ZM20.8242 84.1908V83.8516H18.8242V84.1908H20.8242Z"/>
<path class="tw-stroke-text-headers" d="M36 64L37 63" stroke-width="2" stroke-linecap="round"/>
<path class="tw-stroke-text-headers" d="M29.9998 69.9995L30.9998 68.9995" stroke-width="2" stroke-linecap="round"/>
<path class="tw-stroke-text-headers" d="M40.0174 51.8491L33 48.7544L61.5083 33L56.6108 58.4604L48.4968 55.4359L44.2571 60.2185V53.8888L55.5873 40.8772" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class="tw-stroke-art-primary" d="M89.4998 48.3919C89.4998 70.5749 70.9198 88.5573 47.9998 88.5573C46.0374 88.5573 44.1068 88.4257 42.217 88.1707M6.49976 48.3919C6.49976 26.2092 25.08 8.22656 47.9998 8.22656C51.8283 8.22656 55.5353 8.72824 59.0553 9.66744" stroke-linecap="round" stroke-linejoin="round"/>
<path class="tw-stroke-art-primary" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5.47085 67.8617C2.60335 61.9801 1 55.4075 1 48.4729C1 23.3503 22.0426 2.98438 48 2.98438C52.3355 2.98438 56.534 3.55257 60.5205 4.61618M92.211 32.9993C94.016 37.8295 95 43.0399 95 48.4729C95 73.5956 73.9575 93.9614 48 93.9614C45.7775 93.9614 43.5911 93.8119 41.4508 93.5235" />
<path class="tw-fill-art-primary" d="M20.8242 84.8672C20.8242 84.3149 20.3765 83.8672 19.8242 83.8672C19.2719 83.8672 18.8242 84.3149 18.8242 84.8672H20.8242ZM18.8242 87.2442C18.8242 87.7965 19.2719 88.2442 19.8242 88.2442C20.3765 88.2442 20.8242 87.7965 20.8242 87.2442H18.8242ZM18.8242 84.1908C18.8242 84.7431 19.2719 85.1908 19.8242 85.1908C20.3765 85.1908 20.8242 84.7431 20.8242 84.1908H18.8242ZM20.8242 83.8516C20.8242 83.2993 20.3765 82.8516 19.8242 82.8516C19.2719 82.8516 18.8242 83.2993 18.8242 83.8516H20.8242ZM26.7882 76.042C26.7882 72.0015 23.7427 68.5898 19.8238 68.5898V70.5898C22.4931 70.5898 24.7882 72.9552 24.7882 76.042H26.7882ZM19.8238 68.5898C15.9049 68.5898 12.8594 72.0015 12.8594 76.042H14.8594C14.8594 72.9552 17.1545 70.5898 19.8238 70.5898V68.5898ZM11.5 77.0391H28.1475V75.0391H11.5V77.0391ZM28.1475 77.0391C28.4548 77.0391 28.6475 77.2719 28.6475 77.4908H30.6475C30.6475 76.1062 29.4972 75.0391 28.1475 75.0391V77.0391ZM28.6475 77.4908V90.5469H30.6475V77.4908H28.6475ZM28.6475 90.5469C28.6475 90.7658 28.4548 90.9987 28.1475 90.9987V92.9987C29.4972 92.9987 30.6475 91.9315 30.6475 90.5469H28.6475ZM28.1475 90.9987H11.5V92.9987H28.1475V90.9987ZM11.5 90.9987C11.1928 90.9987 11 90.7658 11 90.5469H9C9 91.9315 10.1504 92.9987 11.5 92.9987V90.9987ZM11 90.5469V77.4908H9V90.5469H11ZM11 77.4908C11 77.2719 11.1928 77.0391 11.5 77.0391V75.0391C10.1504 75.0391 9 76.1062 9 77.4908H11ZM18.8242 84.8672V87.2442H20.8242V84.8672H18.8242ZM20.8242 84.1908V83.8516H18.8242V84.1908H20.8242Z"/>
<path class="tw-stroke-art-primary" d="M36 64L37 63" stroke-width="2" stroke-linecap="round"/>
<path class="tw-stroke-art-primary" d="M29.9998 69.9995L30.9998 68.9995" stroke-width="2" stroke-linecap="round"/>
<path class="tw-stroke-art-primary" d="M40.0174 51.8491L33 48.7544L61.5083 33L56.6108 58.4604L48.4968 55.4359L44.2571 60.2185V53.8888L55.5873 40.8772" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<mask id="path-7-inside-1_752_3985" fill="white">
<path d="M94 17.5C94 26.6127 86.6127 34 77.5 34C68.3873 34 61 26.6127 61 17.5C61 8.3873 68.3873 1 77.5 1C86.6127 1 94 8.3873 94 17.5Z"/>
</mask>