mirror of
https://github.com/bitwarden/browser.git
synced 2024-06-25 10:25:36 +02:00
[CL-254] Rename 500 colors to 600 to prep for UI redesign (#8623)
* [CL-254] Rename 500 colors to 600 to prep for UI redesign --------- Co-authored-by: Will Martin <contact@willmartian.com>
This commit is contained in:
Victoria League
GitHub
parent
fb51aa570d
commit
09169cac71
|
|
@ -7,7 +7,7 @@
|
|||
{{ "deleteAccountWarning" | i18n }}
|
||||
</bit-callout>
|
||||
<!-- Temporary border styles. TODO: Remove when app-user-verification is migrated to the CL. -->
|
||||
<div class="tw-mb-2 tw-rounded tw-border tw-border-solid tw-border-info-500/25">
|
||||
<div class="tw-mb-2 tw-rounded tw-border tw-border-solid tw-border-info-600/25">
|
||||
<app-user-verification
|
||||
ngDefaultControl
|
||||
formControlName="verification"
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@ import { svgIcon } from "@bitwarden/components";
|
|||
export const Devices = svgIcon`
|
||||
<svg width="201" height="201" viewBox="0 0 201 201" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".49">
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" clip-rule="evenodd" d="M34.3628 82.0889H10.3628C7.04908 82.0889 4.36279 84.7752 4.36279 88.0889V148.089C4.36279 151.403 7.04909 154.089 10.3628 154.089H34.3628C37.6765 154.089 40.3628 151.403 40.3628 148.089V88.0889C40.3628 84.7752 37.6765 82.0889 34.3628 82.0889ZM10.3628 78.0889C4.83995 78.0889 0.362793 82.566 0.362793 88.0889V148.089C0.362793 153.612 4.83995 158.089 10.3628 158.089H34.3628C39.8856 158.089 44.3628 153.612 44.3628 148.089V88.0889C44.3628 82.566 39.8856 78.0889 34.3628 78.0889H10.3628Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" clip-rule="evenodd" d="M20.7329 86.8979C20.7329 86.3457 21.1806 85.8979 21.7329 85.8979H22.975C23.5273 85.8979 23.975 86.3457 23.975 86.8979C23.975 87.4502 23.5273 87.8979 22.975 87.8979H21.7329C21.1806 87.8979 20.7329 87.4502 20.7329 86.8979Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" clip-rule="evenodd" d="M68.3628 159.089C68.3628 158.537 68.8105 158.089 69.3628 158.089H127.363C127.915 158.089 128.363 158.537 128.363 159.089C128.363 159.641 127.915 160.089 127.363 160.089H69.3628C68.8105 160.089 68.3628 159.641 68.3628 159.089Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" clip-rule="evenodd" d="M88.103 159.089V141.325H90.103V159.089H88.103Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" clip-rule="evenodd" d="M108.073 159.089V141.325H110.073V159.089H108.073Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" clip-rule="evenodd" d="M27.3628 64.0889C27.3628 56.3569 33.6308 50.0889 41.3628 50.0889H157.363C165.095 50.0889 171.363 56.3569 171.363 64.0889V70.0889H167.363V64.0889C167.363 58.566 162.886 54.0889 157.363 54.0889H41.3628C35.8399 54.0889 31.3628 58.566 31.3628 64.0889V80.0889H27.3628V64.0889ZM42.3628 138.089H127.363V142.089H42.3628V138.089Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" clip-rule="evenodd" d="M35.3628 65.0889C35.3628 61.2229 38.4968 58.0889 42.3628 58.0889H156.363C160.229 58.0889 163.363 61.2229 163.363 65.0889V70.0889H161.363V65.0889C161.363 62.3274 159.124 60.0889 156.363 60.0889H42.3628C39.6014 60.0889 37.3628 62.3274 37.3628 65.0889V80.0889H35.3628V65.0889ZM42.3628 132.089H127.363V134.089H42.3628V132.089Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" clip-rule="evenodd" d="M125.363 78.0889C125.363 72.566 129.84 68.0889 135.363 68.0889H188.363C193.886 68.0889 198.363 72.566 198.363 78.0889V158.089C198.363 163.612 193.886 168.089 188.363 168.089H135.363C129.84 168.089 125.363 163.612 125.363 158.089V78.0889ZM135.363 72.0889C132.049 72.0889 129.363 74.7752 129.363 78.0889V158.089C129.363 161.403 132.049 164.089 135.363 164.089H188.363C191.676 164.089 194.363 161.403 194.363 158.089V78.0889C194.363 74.7752 191.677 72.0889 188.363 72.0889H135.363Z" />
|
||||
<path class="tw-fill-secondary-500" d="M164.363 159.089C164.363 160.193 163.467 161.089 162.363 161.089C161.258 161.089 160.363 160.193 160.363 159.089C160.363 157.984 161.258 157.089 162.363 157.089C163.467 157.089 164.363 157.984 164.363 159.089Z" />
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" clip-rule="evenodd" d="M34.3628 82.0889H10.3628C7.04908 82.0889 4.36279 84.7752 4.36279 88.0889V148.089C4.36279 151.403 7.04909 154.089 10.3628 154.089H34.3628C37.6765 154.089 40.3628 151.403 40.3628 148.089V88.0889C40.3628 84.7752 37.6765 82.0889 34.3628 82.0889ZM10.3628 78.0889C4.83995 78.0889 0.362793 82.566 0.362793 88.0889V148.089C0.362793 153.612 4.83995 158.089 10.3628 158.089H34.3628C39.8856 158.089 44.3628 153.612 44.3628 148.089V88.0889C44.3628 82.566 39.8856 78.0889 34.3628 78.0889H10.3628Z" />
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" clip-rule="evenodd" d="M20.7329 86.8979C20.7329 86.3457 21.1806 85.8979 21.7329 85.8979H22.975C23.5273 85.8979 23.975 86.3457 23.975 86.8979C23.975 87.4502 23.5273 87.8979 22.975 87.8979H21.7329C21.1806 87.8979 20.7329 87.4502 20.7329 86.8979Z" />
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" clip-rule="evenodd" d="M68.3628 159.089C68.3628 158.537 68.8105 158.089 69.3628 158.089H127.363C127.915 158.089 128.363 158.537 128.363 159.089C128.363 159.641 127.915 160.089 127.363 160.089H69.3628C68.8105 160.089 68.3628 159.641 68.3628 159.089Z" />
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" clip-rule="evenodd" d="M88.103 159.089V141.325H90.103V159.089H88.103Z" />
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" clip-rule="evenodd" d="M108.073 159.089V141.325H110.073V159.089H108.073Z" />
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" clip-rule="evenodd" d="M27.3628 64.0889C27.3628 56.3569 33.6308 50.0889 41.3628 50.0889H157.363C165.095 50.0889 171.363 56.3569 171.363 64.0889V70.0889H167.363V64.0889C167.363 58.566 162.886 54.0889 157.363 54.0889H41.3628C35.8399 54.0889 31.3628 58.566 31.3628 64.0889V80.0889H27.3628V64.0889ZM42.3628 138.089H127.363V142.089H42.3628V138.089Z" />
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" clip-rule="evenodd" d="M35.3628 65.0889C35.3628 61.2229 38.4968 58.0889 42.3628 58.0889H156.363C160.229 58.0889 163.363 61.2229 163.363 65.0889V70.0889H161.363V65.0889C161.363 62.3274 159.124 60.0889 156.363 60.0889H42.3628C39.6014 60.0889 37.3628 62.3274 37.3628 65.0889V80.0889H35.3628V65.0889ZM42.3628 132.089H127.363V134.089H42.3628V132.089Z" />
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" clip-rule="evenodd" d="M125.363 78.0889C125.363 72.566 129.84 68.0889 135.363 68.0889H188.363C193.886 68.0889 198.363 72.566 198.363 78.0889V158.089C198.363 163.612 193.886 168.089 188.363 168.089H135.363C129.84 168.089 125.363 163.612 125.363 158.089V78.0889ZM135.363 72.0889C132.049 72.0889 129.363 74.7752 129.363 78.0889V158.089C129.363 161.403 132.049 164.089 135.363 164.089H188.363C191.676 164.089 194.363 161.403 194.363 158.089V78.0889C194.363 74.7752 191.677 72.0889 188.363 72.0889H135.363Z" />
|
||||
<path class="tw-fill-secondary-600" d="M164.363 159.089C164.363 160.193 163.467 161.089 162.363 161.089C161.258 161.089 160.363 160.193 160.363 159.089C160.363 157.984 161.258 157.089 162.363 157.089C163.467 157.089 164.363 157.984 164.363 159.089Z" />
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -43,10 +43,10 @@
|
|||
(click)="showCustomPicker()"
|
||||
title="{{ 'customColor' | i18n }}"
|
||||
[ngClass]="{
|
||||
'!tw-outline-[3px] tw-outline-primary-500 hover:tw-outline-[3px] hover:tw-outline-primary-500':
|
||||
'!tw-outline-[3px] tw-outline-primary-600 hover:tw-outline-[3px] hover:tw-outline-primary-600':
|
||||
customColorSelected
|
||||
}"
|
||||
class="tw-outline-solid tw-bg-white tw-relative tw-flex tw-h-24 tw-w-24 tw-cursor-pointer tw-place-content-center tw-content-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-500 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-500"
|
||||
class="tw-outline-solid tw-bg-white tw-relative tw-flex tw-h-24 tw-w-24 tw-cursor-pointer tw-place-content-center tw-content-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-600 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-600"
|
||||
[style.background-color]="customColor$ | async"
|
||||
>
|
||||
<i
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5 !tw-text-danger">{{ "dangerZone" | i18n }}</h1>
|
||||
|
||||
<div class="tw-rounded tw-border tw-border-solid tw-border-danger-500 tw-p-5">
|
||||
<div class="tw-rounded tw-border tw-border-solid tw-border-danger-600 tw-p-5">
|
||||
<p>{{ "dangerZoneDesc" | i18n }}</p>
|
||||
|
||||
<div class="tw-flex tw-flex-row tw-gap-2">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="tw-rounded tw-border tw-border-solid tw-border-warning-500 tw-bg-background">
|
||||
<div class="tw-bg-warning-500 tw-px-5 tw-py-2.5 tw-font-bold tw-uppercase tw-text-contrast">
|
||||
<div class="tw-rounded tw-border tw-border-solid tw-border-warning-600 tw-bg-background">
|
||||
<div class="tw-bg-warning-600 tw-px-5 tw-py-2.5 tw-font-bold tw-uppercase tw-text-contrast">
|
||||
<i class="bwi bwi-envelope bwi-fw" aria-hidden="true"></i> {{ "verifyEmail" | i18n }}
|
||||
</div>
|
||||
<div class="tw-p-5">
|
||||
|
|
|
|||
|
|
@ -2,27 +2,27 @@ import { svgIcon } from "@bitwarden/components";
|
|||
|
||||
export const CreatePasskeyFailedIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="163" height="115" fill="none">
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M31 19.46H9v22h22v-22Zm-24-2v26h26v-26H7Z"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M31 19.46H9v22h22v-22Zm-24-2v26h26v-26H7Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M0 43.46a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v7h-4v-7H4v16.747l1.705 2.149a4 4 0 0 1 .866 2.486v22.205a4 4 0 0 1-1 2.645L4 91.475v17.985h32V91.475l-1.572-1.783a4 4 0 0 1-1-2.645V64.842a4 4 0 0 1 .867-2.486L36 60.207V56.46h4v3.747a4 4 0 0 1-.867 2.487l-1.704 2.148v22.205L39 88.83a4 4 0 0 1 1 2.645v17.985a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V91.475a4 4 0 0 1 1-2.645l1.571-1.783V64.842L.867 62.694A4 4 0 0 1 0 60.207V43.46Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M19.74 63.96a.5.5 0 0 1 .355.147l2.852 2.866a.5.5 0 0 1 .146.353V77.56c2.585 1.188 4.407 3.814 4.407 6.865 0 4.183-3.357 7.534-7.5 7.534-4.144 0-7.5-3.376-7.5-7.534a7.546 7.546 0 0 1 4.478-6.894v-1.443a.5.5 0 0 1 .146-.353l1.275-1.281-1.322-1.33a.5.5 0 0 1 0-.705l.332-.334-.262-.263a.5.5 0 0 1-.005-.7l1.332-1.377-1.445-1.452a.5.5 0 0 1-.145-.352v-1.114a.5.5 0 0 1 .145-.352l2.357-2.369a.5.5 0 0 1 .355-.147Zm-1.856 3.075v.7l1.645 1.654a.5.5 0 0 1 .005.7l-1.332 1.377.267.268a.5.5 0 0 1 0 .705l-.333.334 1.323 1.329a.5.5 0 0 1 0 .705l-1.48 1.488v1.57a.5.5 0 0 1-.32.466 6.545 6.545 0 0 0-4.159 6.095c0 3.61 2.913 6.534 6.5 6.534 3.588 0 6.5-2.901 6.5-6.534 0-2.749-1.707-5.105-4.095-6.074a.5.5 0 0 1-.312-.463V67.532L19.74 65.17l-1.857 1.866ZM20 85.623a1.27 1.27 0 0 0-1.268 1.276c0 .702.56 1.276 1.268 1.276.712 0 1.268-.555 1.268-1.276A1.27 1.27 0 0 0 20 85.623Zm-2.268 1.276A2.27 2.27 0 0 1 20 84.623a2.27 2.27 0 0 1 2.268 2.276c0 1.269-1 2.276-2.268 2.276a2.27 2.27 0 0 1-2.268-2.276ZM57.623 114a1 1 0 0 1 1-1h63.048a1 1 0 0 1 0 2H58.623a1 1 0 0 1-1-1Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M78.022 114V95.654h2V114h-2ZM98.418 114V95.654h2V114h-2Z" clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M16 14.46c0-7.732 6.268-14 14-14h119c7.732 0 14 6.268 14 14v68c0 7.732-6.268 14-14 14H39.5v-4H149c5.523 0 10-4.477 10-10v-68c0-5.523-4.477-10-10-10H30c-5.523 0-10 4.477-10 10v5h-4v-5Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M25 15.46a6 6 0 0 1 6-6h117a6 6 0 0 1 6 6v66a6 6 0 0 1-6 6H36.5v-2H148a4 4 0 0 0 4-4v-66a4 4 0 0 0-4-4H31a4 4 0 0 0-4 4v3h-2v-3Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500"
|
||||
<path class="tw-fill-secondary-600"
|
||||
d="M104.269 32.86a1.42 1.42 0 0 0-1.007-.4h-25.83c-.39 0-.722.132-1.007.4a1.26 1.26 0 0 0-.425.947v16.199c0 1.207.25 2.407.75 3.597a13.22 13.22 0 0 0 1.861 3.165c.74.919 1.62 1.817 2.646 2.69a30.93 30.93 0 0 0 2.834 2.172c.868.577 1.77 1.121 2.712 1.636.942.516 1.612.862 2.007 1.043.394.181.714.326.95.42.18.083.373.128.583.128.21 0 .403-.041.582-.128.241-.099.557-.239.956-.42.394-.181 1.064-.532 2.006-1.043a36.595 36.595 0 0 0 2.712-1.636c.867-.576 1.813-1.302 2.838-2.171a19.943 19.943 0 0 0 2.646-2.69 13.24 13.24 0 0 0 1.862-3.166 9.19 9.19 0 0 0 .749-3.597V33.812c.005-.367-.14-.684-.425-.952Zm-3.329 17.298c0 5.864-10.593 10.916-10.593 10.916V35.93h10.593v14.228Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M18 24.46h-5v-2h5v2ZM27 24.46h-5v-2h5v2Z"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M18 24.46h-5v-2h5v2ZM27 24.46h-5v-2h5v2Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-danger-500"
|
||||
<path class="tw-fill-danger-600"
|
||||
d="M51.066 66.894a2.303 2.303 0 0 1-2.455-.5l-10.108-9.797L28.375 66.4l-.002.002a2.294 2.294 0 0 1-3.185.005 2.24 2.24 0 0 1-.506-2.496c.117-.27.286-.518.503-.728l10.062-9.737-9.945-9.623a2.258 2.258 0 0 1-.698-1.6c-.004-.314.06-.619.176-.894a2.254 2.254 0 0 1 1.257-1.222 2.305 2.305 0 0 1 1.723.014c.267.11.518.274.732.486l10.01 9.682 9.995-9.688.009-.008a2.292 2.292 0 0 1 3.159.026c.425.411.68.98.684 1.59a2.242 2.242 0 0 1-.655 1.6l-.01.01-9.926 9.627 10.008 9.7.029.027a2.237 2.237 0 0 1 .53 2.496l-.002.004a2.258 2.258 0 0 1-1.257 1.222Z" />
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,25 +2,25 @@ import { svgIcon } from "@bitwarden/components";
|
|||
|
||||
export const CreatePasskeyIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="163" height="116" fill="none">
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M31 19.58H9v22h22v-22Zm-24-2v26h26v-26H7Z"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M31 19.58H9v22h22v-22Zm-24-2v26h26v-26H7Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M0 43.58a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v7h-4v-7H4v16.747l1.705 2.149a4 4 0 0 1 .866 2.486v22.204a4 4 0 0 1-1 2.646L4 91.595v17.985h32V91.595l-1.572-1.783a4 4 0 0 1-1-2.646V64.962a4 4 0 0 1 .867-2.486L36 60.327V56.58h4v3.747a4 4 0 0 1-.867 2.486l-1.704 2.149v22.204L39 88.95a4 4 0 0 1 1 2.646v17.985a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V91.595a4 4 0 0 1 1-2.646l1.571-1.783V64.962L.867 62.813A4 4 0 0 1 0 60.327V43.58Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M19.74 64.08a.5.5 0 0 1 .355.147l2.852 2.866a.5.5 0 0 1 .146.352V77.68c2.585 1.189 4.407 3.814 4.407 6.865 0 4.183-3.357 7.535-7.5 7.535-4.144 0-7.5-3.377-7.5-7.535a7.546 7.546 0 0 1 4.478-6.894V76.21a.5.5 0 0 1 .146-.353l1.275-1.282-1.322-1.329a.5.5 0 0 1 0-.705l.332-.334-.262-.263a.5.5 0 0 1-.005-.7l1.332-1.377-1.445-1.452a.5.5 0 0 1-.145-.353v-1.113a.5.5 0 0 1 .145-.353l2.357-2.368a.5.5 0 0 1 .355-.147Zm-1.856 3.074v.7l1.645 1.654a.5.5 0 0 1 .005.7l-1.332 1.377.267.268a.5.5 0 0 1 0 .706l-.333.334 1.323 1.329a.5.5 0 0 1 0 .705l-1.48 1.488v1.57a.5.5 0 0 1-.32.466 6.545 6.545 0 0 0-4.159 6.094c0 3.61 2.913 6.535 6.5 6.535 3.588 0 6.5-2.902 6.5-6.535 0-2.748-1.707-5.104-4.095-6.073a.5.5 0 0 1-.312-.463V67.651l-2.352-2.364-1.857 1.866ZM20 85.742a1.27 1.27 0 0 0-1.268 1.277c0 .701.56 1.276 1.268 1.276.712 0 1.268-.555 1.268-1.276A1.27 1.27 0 0 0 20 85.742Zm-2.268 1.277A2.27 2.27 0 0 1 20 84.742a2.27 2.27 0 0 1 2.268 2.277c0 1.268-1 2.276-2.268 2.276a2.27 2.27 0 0 1-2.268-2.276ZM41.796 42.844a1 1 0 0 1 1.413.058l5.526 6A1 1 0 0 1 48 50.58H27a1 1 0 1 1 0-2h18.72l-3.982-4.323a1 1 0 0 1 .058-1.413ZM33.315 62.315a1 1 0 0 1-1.413-.058l-5.526-6a1 1 0 0 1 .735-1.677h21a1 1 0 1 1 0 2h-18.72l3.982 4.322a1 1 0 0 1-.058 1.413ZM57.623 114.12a1 1 0 0 1 1-1h63.048a1 1 0 1 1 0 2H58.623a1 1 0 0 1-1-1Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M78.022 114.12V95.774h2v18.346h-2ZM98.418 114.12V95.774h2v18.346h-2Z" clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M16 14.58c0-7.732 6.268-14 14-14h119c7.732 0 14 6.268 14 14v68c0 7.732-6.268 14-14 14H39.5v-4H149c5.523 0 10-4.478 10-10v-68c0-5.523-4.477-10-10-10H30c-5.523 0-10 4.477-10 10v5h-4v-5Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M25 15.58a6 6 0 0 1 6-6h117a6 6 0 0 1 6 6v66a6 6 0 0 1-6 6H36.5v-2H148a4 4 0 0 0 4-4v-66a4 4 0 0 0-4-4H31a4 4 0 0 0-4 4v3h-2v-3Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500"
|
||||
<path class="tw-fill-secondary-600"
|
||||
d="M104.269 32.98a1.42 1.42 0 0 0-1.007-.4h-25.83c-.39 0-.722.132-1.007.4a1.26 1.26 0 0 0-.425.947v16.199c0 1.207.25 2.406.75 3.597a13.222 13.222 0 0 0 1.861 3.165c.74.919 1.62 1.817 2.646 2.69a30.93 30.93 0 0 0 2.834 2.172c.868.577 1.77 1.121 2.712 1.636.942.515 1.612.861 2.007 1.043.394.18.714.325.95.42.18.082.373.128.583.128.21 0 .403-.042.582-.128.241-.099.557-.24.956-.42.394-.182 1.064-.532 2.006-1.043a36.56 36.56 0 0 0 2.712-1.636c.867-.577 1.813-1.302 2.838-2.172a19.943 19.943 0 0 0 2.646-2.69 13.24 13.24 0 0 0 1.862-3.165c.5-1.187.749-2.386.749-3.597V33.93c.005-.367-.14-.684-.425-.952Zm-3.329 17.298c0 5.864-10.593 10.916-10.593 10.916V36.049h10.593v14.23Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M18 24.58h-5v-2h5v2ZM27 24.58h-5v-2h5v2Z"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M18 24.58h-5v-2h5v2ZM27 24.58h-5v-2h5v2Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-font-bold tw-leading-9"
|
||||
*ngIf="!step.completed"
|
||||
[ngClass]="{
|
||||
'tw-bg-primary-500 tw-text-contrast': selected,
|
||||
'tw-bg-primary-600 tw-text-contrast': selected,
|
||||
'tw-bg-secondary-300 tw-text-main': !selected && !disabled && step.editable,
|
||||
'tw-bg-transparent tw-text-muted': disabled
|
||||
}"
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
{{ stepNumber }}
|
||||
</span>
|
||||
<span
|
||||
class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-bg-primary-500 tw-font-bold tw-leading-9 tw-text-contrast"
|
||||
class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-bg-primary-600 tw-font-bold tw-leading-9 tw-text-contrast"
|
||||
*ngIf="step.completed"
|
||||
>
|
||||
<i class="bwi bwi-fw bwi-check tw-p-1" aria-hidden="true"></i>
|
||||
|
|
|
|||
|
|
@ -287,7 +287,7 @@ export class PaymentComponent implements OnInit, OnDestroy {
|
|||
)})`;
|
||||
this.StripeElementStyle.invalid.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
|
||||
this.StripeElementStyle.invalid.borderColor = `rgb(${style.getPropertyValue(
|
||||
"--color-danger-500",
|
||||
"--color-danger-600",
|
||||
)})`;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,13 +41,13 @@ export class SelectableAvatarComponent {
|
|||
.concat(["tw-cursor-pointer", "tw-outline", "tw-outline-solid", "tw-outline-offset-1"])
|
||||
.concat(
|
||||
this.selected
|
||||
? ["tw-outline-[3px]", "tw-outline-primary-500"]
|
||||
? ["tw-outline-[3px]", "tw-outline-primary-600"]
|
||||
: [
|
||||
"tw-outline-0",
|
||||
"hover:tw-outline-1",
|
||||
"hover:tw-outline-primary-300",
|
||||
"focus:tw-outline-2",
|
||||
"focus:tw-outline-primary-500",
|
||||
"focus:tw-outline-primary-600",
|
||||
],
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
[routerLink]="product.appRoute"
|
||||
[ngClass]="
|
||||
product.isActive
|
||||
? 'tw-bg-primary-500 tw-font-bold !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-500'
|
||||
? 'tw-bg-primary-600 tw-font-bold !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-600'
|
||||
: ''
|
||||
"
|
||||
class="tw-group tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-500 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700"
|
||||
class="tw-group tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-600 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700"
|
||||
ariaCurrentWhenActive="page"
|
||||
>
|
||||
<i class="bwi {{ product.icon }} tw-text-4xl !tw-m-0 !tw-mb-1"></i>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="tw-rounded tw-border tw-border-solid tw-border-warning-500 tw-bg-background">
|
||||
<div class="tw-bg-warning-500 tw-px-5 tw-py-2.5 tw-font-bold tw-uppercase tw-text-contrast">
|
||||
<div class="tw-rounded tw-border tw-border-solid tw-border-warning-600 tw-bg-background">
|
||||
<div class="tw-bg-warning-600 tw-px-5 tw-py-2.5 tw-font-bold tw-uppercase tw-text-contrast">
|
||||
<i class="bwi bwi-exclamation-triangle bwi-fw" aria-hidden="true"></i>
|
||||
{{ "lowKdfIterations" | i18n }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<details #details class="tw-rounded-sm tw-bg-background-alt tw-text-main" (toggle)="toggle()" open>
|
||||
<summary class="tw-list-none tw-p-2 tw-px-4">
|
||||
<div class="tw-flex tw-select-none tw-items-center tw-gap-4">
|
||||
<i class="bwi bwi-dashboard tw-text-3xl tw-text-primary-500" aria-hidden="true"></i>
|
||||
<i class="bwi bwi-dashboard tw-text-3xl tw-text-primary-600" aria-hidden="true"></i>
|
||||
<div class="tw-text-lg">{{ title }}</div>
|
||||
<bit-progress class="tw-flex-1" [showText]="false" [barWidth]="barWidth"></bit-progress>
|
||||
<span *ngIf="tasks.length > 0; else spinner">
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import { svgIcon } from "@bitwarden/components";
|
|||
|
||||
export const ExpiredSend = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="130" height="130" fill="none">
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M22.75 29.695c0-4.991 4.074-9.037 9.1-9.037h14.3v2.582h-14.3c-3.59 0-6.5 2.89-6.5 6.455v68.428h-2.6V29.696Zm75.4 76.175V68.428h2.6v37.442c0 4.991-4.074 9.038-9.1 9.038h-53.3v-2.582h53.3c3.59 0 6.5-2.891 6.5-6.456Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M43.55 37.441c0-17.113 13.969-30.986 31.2-30.986s31.2 13.873 31.2 30.986c0 17.114-13.969 30.987-31.2 30.987s-31.2-13.873-31.2-30.986Zm31.2-33.568c-18.667 0-33.8 15.03-33.8 33.569S56.083 71.01 74.75 71.01c18.668 0 33.8-15.03 33.8-33.569S93.418 3.873 74.75 3.873Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M73.972 65.2c0 .357.291.646.65.646 15.968 0 28.925-12.71 28.925-28.404a.648.648 0 0 0-.65-.646.648.648 0 0 0-.65.646c0 14.967-12.36 27.113-27.625 27.113a.648.648 0 0 0-.65.645ZM46.347 38.087c.36 0 .65-.289.65-.645 0-14.968 12.361-27.113 27.625-27.113.36 0 .65-.29.65-.646a.648.648 0 0 0-.65-.646c-15.968 0-28.925 12.71-28.925 28.405 0 .356.291.645.65.645Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M123.729 81.869a1.926 1.926 0 0 1 0 2.739l-1.439 1.43a1.96 1.96 0 0 1-2.758 0L95.577 62.245a1.306 1.306 0 0 0-1.839 0 1.285 1.285 0 0 0 0 1.826l23.956 23.791a4.571 4.571 0 0 0 6.434 0l1.44-1.43a4.497 4.497 0 0 0 0-6.39l-23.956-23.791a1.306 1.306 0 0 0-1.838 0 1.285 1.285 0 0 0 0 1.825l23.955 23.792ZM34.45 36.797c0-.714.582-1.292 1.3-1.292h5.85c.718 0 1.3.578 1.3 1.291 0 .714-.582 1.292-1.3 1.292h-5.85c-.718 0-1.3-.578-1.3-1.291Zm0 10.973c0-.713.582-1.29 1.3-1.29h7.8c.718 0 1.3.578 1.3 1.29 0 .714-.582 1.292-1.3 1.292h-7.8c-.718 0-1.3-.578-1.3-1.291Zm0 10.975c0-.713.582-1.291 1.3-1.291H49.4c.718 0 1.3.578 1.3 1.29 0 .714-.582 1.292-1.3 1.292H35.75c-.718 0-1.3-.578-1.3-1.291Zm0 10.975c0-.714.582-1.292 1.3-1.292H72.8c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H35.75c-.718 0-1.3-.578-1.3-1.29Zm0 10.973c0-.713.582-1.29 1.3-1.29h27.3c.718 0 1.3.577 1.3 1.29 0 .713-.582 1.291-1.3 1.291h-27.3c-.718 0-1.3-.578-1.3-1.29Zm6.5 10.975c0-.713.582-1.291 1.3-1.291H88.4c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H42.25c-.718 0-1.3-.578-1.3-1.291Zm0 10.974c0-.713.582-1.291 1.3-1.291H88.4c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H42.25c-.718 0-1.3-.578-1.3-1.291Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M43.664 86.742c.412.292.617.794.524 1.289l-6.366 33.964a1.305 1.305 0 0 1-1.745.968l-9.692-3.707-4.914 5.689c-.355.41-.928.557-1.438.37a1.292 1.292 0 0 1-.849-1.211v-8.444c0-.305.108-.599.306-.832l14.73-17.357a1.306 1.306 0 0 1 1.831-.156c.549.46.619 1.275.156 1.82L21.784 116.13v4.485l3.225-3.733c.358-.414.94-.56 1.454-.364l9.089 3.476 5.567-29.698-32.42 18.385 6.813 3.082c.653.296.941 1.061.643 1.71a1.303 1.303 0 0 1-1.722.64l-9.122-4.128a1.289 1.289 0 0 1-.106-2.296l37.06-21.017c.44-.249.986-.222 1.399.07Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M22.75 29.695c0-4.991 4.074-9.037 9.1-9.037h14.3v2.582h-14.3c-3.59 0-6.5 2.89-6.5 6.455v68.428h-2.6V29.696Zm75.4 76.175V68.428h2.6v37.442c0 4.991-4.074 9.038-9.1 9.038h-53.3v-2.582h53.3c3.59 0 6.5-2.891 6.5-6.456Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M43.55 37.441c0-17.113 13.969-30.986 31.2-30.986s31.2 13.873 31.2 30.986c0 17.114-13.969 30.987-31.2 30.987s-31.2-13.873-31.2-30.986Zm31.2-33.568c-18.667 0-33.8 15.03-33.8 33.569S56.083 71.01 74.75 71.01c18.668 0 33.8-15.03 33.8-33.569S93.418 3.873 74.75 3.873Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M73.972 65.2c0 .357.291.646.65.646 15.968 0 28.925-12.71 28.925-28.404a.648.648 0 0 0-.65-.646.648.648 0 0 0-.65.646c0 14.967-12.36 27.113-27.625 27.113a.648.648 0 0 0-.65.645ZM46.347 38.087c.36 0 .65-.289.65-.645 0-14.968 12.361-27.113 27.625-27.113.36 0 .65-.29.65-.646a.648.648 0 0 0-.65-.646c-15.968 0-28.925 12.71-28.925 28.405 0 .356.291.645.65.645Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M123.729 81.869a1.926 1.926 0 0 1 0 2.739l-1.439 1.43a1.96 1.96 0 0 1-2.758 0L95.577 62.245a1.306 1.306 0 0 0-1.839 0 1.285 1.285 0 0 0 0 1.826l23.956 23.791a4.571 4.571 0 0 0 6.434 0l1.44-1.43a4.497 4.497 0 0 0 0-6.39l-23.956-23.791a1.306 1.306 0 0 0-1.838 0 1.285 1.285 0 0 0 0 1.825l23.955 23.792ZM34.45 36.797c0-.714.582-1.292 1.3-1.292h5.85c.718 0 1.3.578 1.3 1.291 0 .714-.582 1.292-1.3 1.292h-5.85c-.718 0-1.3-.578-1.3-1.291Zm0 10.973c0-.713.582-1.29 1.3-1.29h7.8c.718 0 1.3.578 1.3 1.29 0 .714-.582 1.292-1.3 1.292h-7.8c-.718 0-1.3-.578-1.3-1.291Zm0 10.975c0-.713.582-1.291 1.3-1.291H49.4c.718 0 1.3.578 1.3 1.29 0 .714-.582 1.292-1.3 1.292H35.75c-.718 0-1.3-.578-1.3-1.291Zm0 10.975c0-.714.582-1.292 1.3-1.292H72.8c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H35.75c-.718 0-1.3-.578-1.3-1.29Zm0 10.973c0-.713.582-1.29 1.3-1.29h27.3c.718 0 1.3.577 1.3 1.29 0 .713-.582 1.291-1.3 1.291h-27.3c-.718 0-1.3-.578-1.3-1.29Zm6.5 10.975c0-.713.582-1.291 1.3-1.291H88.4c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H42.25c-.718 0-1.3-.578-1.3-1.291Zm0 10.974c0-.713.582-1.291 1.3-1.291H88.4c.718 0 1.3.578 1.3 1.291s-.582 1.291-1.3 1.291H42.25c-.718 0-1.3-.578-1.3-1.291Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M43.664 86.742c.412.292.617.794.524 1.289l-6.366 33.964a1.305 1.305 0 0 1-1.745.968l-9.692-3.707-4.914 5.689c-.355.41-.928.557-1.438.37a1.292 1.292 0 0 1-.849-1.211v-8.444c0-.305.108-.599.306-.832l14.73-17.357a1.306 1.306 0 0 1 1.831-.156c.549.46.619 1.275.156 1.82L21.784 116.13v4.485l3.225-3.733c.358-.414.94-.56 1.454-.364l9.089 3.476 5.567-29.698-32.42 18.385 6.813 3.082c.653.296.941 1.061.643 1.71a1.303 1.303 0 0 1-1.722.64l-9.122-4.128a1.289 1.289 0 0 1-.106-2.296l37.06-21.017c.44-.249.986-.222 1.399.07Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ import { svgIcon } from "@bitwarden/components";
|
|||
|
||||
export const NoSend = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="125" fill="none">
|
||||
<path class="tw-stroke-secondary-500" 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-secondary-500" 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-secondary-500" 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-secondary-500 tw-fill-secondary-100" 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-secondary-500" stroke-linecap="round" stroke-width="2" d="M40.72 44.34v2.618"/>
|
||||
<path class="tw-stroke-secondary-500" stroke-linecap="round" stroke-width="4" d="M40.72 42.7v-.373"/>
|
||||
<path class="tw-stroke-secondary-500 tw-fill-secondary-100" 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-secondary-600" 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-secondary-600" 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-secondary-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-secondary-600 tw-fill-secondary-100" 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-secondary-600" stroke-linecap="round" stroke-width="2" d="M40.72 44.34v2.618"/>
|
||||
<path class="tw-stroke-secondary-600" stroke-linecap="round" stroke-width="4" d="M40.72 42.7v-.373"/>
|
||||
<path class="tw-stroke-secondary-600 tw-fill-secondary-100" 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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
>
|
||||
<button
|
||||
type="button"
|
||||
class="tw-items-center tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-items-center tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
appA11yTitle="{{ 'copyVerificationCode' | i18n }}"
|
||||
(click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ import { ButtonModule, NoItemsModule, svgIcon } from "@bitwarden/components";
|
|||
import { SharedModule } from "../../shared";
|
||||
|
||||
const icon = svgIcon`<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="10 -10 120 140" fill="none">
|
||||
<rect class="tw-stroke-secondary-500" width="134" height="86" x="3" y="31.485" stroke-width="6" rx="11"/>
|
||||
<path class="tw-fill-secondary-500" d="M123.987 20.15H14.779a3.114 3.114 0 0 1-2.083-.95 3.036 3.036 0 0 1 0-4.208 3.125 3.125 0 0 1 2.083-.951h109.208c.792.043 1.536.38 2.083.95a3.035 3.035 0 0 1 0 4.208 3.115 3.115 0 0 1-2.083.95Zm-6.649-14.041h-95.91a3.114 3.114 0 0 1-2.082-.95 3.036 3.036 0 0 1-.848-2.105c0-.782.306-1.538.848-2.104A3.125 3.125 0 0 1 21.43 0h95.909c.791.043 1.535.38 2.082.95.547.57.849 1.322.849 2.104a3.05 3.05 0 0 1-.849 2.104 3.115 3.115 0 0 1-2.082.95ZM95.132 74.407A42.317 42.317 0 0 0 83.59 65.43l8.799-8.657a1.59 1.59 0 0 0 .004-2.27 1.641 1.641 0 0 0-2.298-.004l-9.64 9.479a28.017 28.017 0 0 0-10.483-2.13c-14.323 0-24.814 12.342-25.298 12.89a2.431 2.431 0 0 0-.675 1.64c-.01.612.215 1.203.626 1.66a43.981 43.981 0 0 0 11.873 9.485l-8.806 8.658a1.601 1.601 0 0 0-.499 1.138 1.602 1.602 0 0 0 1.008 1.5 1.651 1.651 0 0 0 1.255-.009c.199-.085.379-.205.528-.359l9.634-9.443a27.16 27.16 0 0 0 10.359 2.158c14.323 0 24.753-12.086 25.23-12.63a2.983 2.983 0 0 0-.078-4.128h.002ZM49.204 77.82a1.82 1.82 0 0 1-.43-.6 1.767 1.767 0 0 1-.152-.72 1.778 1.778 0 0 1 .582-1.32c3.857-3.564 11.782-9.686 20.77-9.676 2.564.037 5.105.508 7.508 1.395l-3.291 3.235a7.793 7.793 0 0 0-5.02-1.226 7.746 7.746 0 0 0-4.676 2.18 7.528 7.528 0 0 0-1 9.563l-4.199 4.143a43.135 43.135 0 0 1-10.092-6.974Zm26.059-1.318a5.19 5.19 0 0 1-1.557 3.68 5.326 5.326 0 0 1-3.733 1.521c-.82-.005-1.63-.2-2.359-.57l7.067-6.952c.377.718.575 1.513.582 2.321Zm-10.58 0a5.136 5.136 0 0 1 .673-2.555 5.204 5.204 0 0 1 1.862-1.897 5.302 5.302 0 0 1 5.172-.146l-7.096 6.977a5.06 5.06 0 0 1-.61-2.379Zm26.053 1.331c-3.857 3.56-11.779 9.677-20.763 9.677a22.723 22.723 0 0 1-7.454-1.369l3.292-3.226a7.793 7.793 0 0 0 4.995 1.192 7.734 7.734 0 0 0 4.642-2.176 7.524 7.524 0 0 0 1.033-9.506l4.224-4.168a43.258 43.258 0 0 1 10.02 6.945 1.788 1.788 0 0 1 .585 1.313 1.788 1.788 0 0 1-.577 1.318h.003Z"/>
|
||||
<rect class="tw-stroke-secondary-600" width="134" height="86" x="3" y="31.485" stroke-width="6" rx="11"/>
|
||||
<path class="tw-fill-secondary-600" d="M123.987 20.15H14.779a3.114 3.114 0 0 1-2.083-.95 3.036 3.036 0 0 1 0-4.208 3.125 3.125 0 0 1 2.083-.951h109.208c.792.043 1.536.38 2.083.95a3.035 3.035 0 0 1 0 4.208 3.115 3.115 0 0 1-2.083.95Zm-6.649-14.041h-95.91a3.114 3.114 0 0 1-2.082-.95 3.036 3.036 0 0 1-.848-2.105c0-.782.306-1.538.848-2.104A3.125 3.125 0 0 1 21.43 0h95.909c.791.043 1.535.38 2.082.95.547.57.849 1.322.849 2.104a3.05 3.05 0 0 1-.849 2.104 3.115 3.115 0 0 1-2.082.95ZM95.132 74.407A42.317 42.317 0 0 0 83.59 65.43l8.799-8.657a1.59 1.59 0 0 0 .004-2.27 1.641 1.641 0 0 0-2.298-.004l-9.64 9.479a28.017 28.017 0 0 0-10.483-2.13c-14.323 0-24.814 12.342-25.298 12.89a2.431 2.431 0 0 0-.675 1.64c-.01.612.215 1.203.626 1.66a43.981 43.981 0 0 0 11.873 9.485l-8.806 8.658a1.601 1.601 0 0 0-.499 1.138 1.602 1.602 0 0 0 1.008 1.5 1.651 1.651 0 0 0 1.255-.009c.199-.085.379-.205.528-.359l9.634-9.443a27.16 27.16 0 0 0 10.359 2.158c14.323 0 24.753-12.086 25.23-12.63a2.983 2.983 0 0 0-.078-4.128h.002ZM49.204 77.82a1.82 1.82 0 0 1-.43-.6 1.767 1.767 0 0 1-.152-.72 1.778 1.778 0 0 1 .582-1.32c3.857-3.564 11.782-9.686 20.77-9.676 2.564.037 5.105.508 7.508 1.395l-3.291 3.235a7.793 7.793 0 0 0-5.02-1.226 7.746 7.746 0 0 0-4.676 2.18 7.528 7.528 0 0 0-1 9.563l-4.199 4.143a43.135 43.135 0 0 1-10.092-6.974Zm26.059-1.318a5.19 5.19 0 0 1-1.557 3.68 5.326 5.326 0 0 1-3.733 1.521c-.82-.005-1.63-.2-2.359-.57l7.067-6.952c.377.718.575 1.513.582 2.321Zm-10.58 0a5.136 5.136 0 0 1 .673-2.555 5.204 5.204 0 0 1 1.862-1.897 5.302 5.302 0 0 1 5.172-.146l-7.096 6.977a5.06 5.06 0 0 1-.61-2.379Zm26.053 1.331c-3.857 3.56-11.779 9.677-20.763 9.677a22.723 22.723 0 0 1-7.454-1.369l3.292-3.226a7.793 7.793 0 0 0 4.995 1.192 7.734 7.734 0 0 0 4.642-2.176 7.524 7.524 0 0 0 1.033-9.506l4.224-4.168a43.258 43.258 0 0 1 10.02 6.945 1.788 1.788 0 0 1 .585 1.313 1.788 1.788 0 0 1-.577 1.318h.003Z"/>
|
||||
</svg>`;
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -2,27 +2,27 @@ import { svgIcon } from "@bitwarden/components";
|
|||
|
||||
export const CreatePasskeyFailedIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="163" height="115" fill="none">
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M31 19.46H9v22h22v-22Zm-24-2v26h26v-26H7Z"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M31 19.46H9v22h22v-22Zm-24-2v26h26v-26H7Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M0 43.46a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v7h-4v-7H4v16.747l1.705 2.149a4 4 0 0 1 .866 2.486v22.205a4 4 0 0 1-1 2.645L4 91.475v17.985h32V91.475l-1.572-1.783a4 4 0 0 1-1-2.645V64.842a4 4 0 0 1 .867-2.486L36 60.207V56.46h4v3.747a4 4 0 0 1-.867 2.487l-1.704 2.148v22.205L39 88.83a4 4 0 0 1 1 2.645v17.985a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V91.475a4 4 0 0 1 1-2.645l1.571-1.783V64.842L.867 62.694A4 4 0 0 1 0 60.207V43.46Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M19.74 63.96a.5.5 0 0 1 .355.147l2.852 2.866a.5.5 0 0 1 .146.353V77.56c2.585 1.188 4.407 3.814 4.407 6.865 0 4.183-3.357 7.534-7.5 7.534-4.144 0-7.5-3.376-7.5-7.534a7.546 7.546 0 0 1 4.478-6.894v-1.443a.5.5 0 0 1 .146-.353l1.275-1.281-1.322-1.33a.5.5 0 0 1 0-.705l.332-.334-.262-.263a.5.5 0 0 1-.005-.7l1.332-1.377-1.445-1.452a.5.5 0 0 1-.145-.352v-1.114a.5.5 0 0 1 .145-.352l2.357-2.369a.5.5 0 0 1 .355-.147Zm-1.856 3.075v.7l1.645 1.654a.5.5 0 0 1 .005.7l-1.332 1.377.267.268a.5.5 0 0 1 0 .705l-.333.334 1.323 1.329a.5.5 0 0 1 0 .705l-1.48 1.488v1.57a.5.5 0 0 1-.32.466 6.545 6.545 0 0 0-4.159 6.095c0 3.61 2.913 6.534 6.5 6.534 3.588 0 6.5-2.901 6.5-6.534 0-2.749-1.707-5.105-4.095-6.074a.5.5 0 0 1-.312-.463V67.532L19.74 65.17l-1.857 1.866ZM20 85.623a1.27 1.27 0 0 0-1.268 1.276c0 .702.56 1.276 1.268 1.276.712 0 1.268-.555 1.268-1.276A1.27 1.27 0 0 0 20 85.623Zm-2.268 1.276A2.27 2.27 0 0 1 20 84.623a2.27 2.27 0 0 1 2.268 2.276c0 1.269-1 2.276-2.268 2.276a2.27 2.27 0 0 1-2.268-2.276ZM57.623 114a1 1 0 0 1 1-1h63.048a1 1 0 0 1 0 2H58.623a1 1 0 0 1-1-1Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M78.022 114V95.654h2V114h-2ZM98.418 114V95.654h2V114h-2Z" clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M16 14.46c0-7.732 6.268-14 14-14h119c7.732 0 14 6.268 14 14v68c0 7.732-6.268 14-14 14H39.5v-4H149c5.523 0 10-4.477 10-10v-68c0-5.523-4.477-10-10-10H30c-5.523 0-10 4.477-10 10v5h-4v-5Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M25 15.46a6 6 0 0 1 6-6h117a6 6 0 0 1 6 6v66a6 6 0 0 1-6 6H36.5v-2H148a4 4 0 0 0 4-4v-66a4 4 0 0 0-4-4H31a4 4 0 0 0-4 4v3h-2v-3Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500"
|
||||
<path class="tw-fill-secondary-600"
|
||||
d="M104.269 32.86a1.42 1.42 0 0 0-1.007-.4h-25.83c-.39 0-.722.132-1.007.4a1.26 1.26 0 0 0-.425.947v16.199c0 1.207.25 2.407.75 3.597a13.22 13.22 0 0 0 1.861 3.165c.74.919 1.62 1.817 2.646 2.69a30.93 30.93 0 0 0 2.834 2.172c.868.577 1.77 1.121 2.712 1.636.942.516 1.612.862 2.007 1.043.394.181.714.326.95.42.18.083.373.128.583.128.21 0 .403-.041.582-.128.241-.099.557-.239.956-.42.394-.181 1.064-.532 2.006-1.043a36.595 36.595 0 0 0 2.712-1.636c.867-.576 1.813-1.302 2.838-2.171a19.943 19.943 0 0 0 2.646-2.69 13.24 13.24 0 0 0 1.862-3.166 9.19 9.19 0 0 0 .749-3.597V33.812c.005-.367-.14-.684-.425-.952Zm-3.329 17.298c0 5.864-10.593 10.916-10.593 10.916V35.93h10.593v14.228Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M18 24.46h-5v-2h5v2ZM27 24.46h-5v-2h5v2Z"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M18 24.46h-5v-2h5v2ZM27 24.46h-5v-2h5v2Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-danger-500"
|
||||
<path class="tw-fill-danger-600"
|
||||
d="M51.066 66.894a2.303 2.303 0 0 1-2.455-.5l-10.108-9.797L28.375 66.4l-.002.002a2.294 2.294 0 0 1-3.185.005 2.24 2.24 0 0 1-.506-2.496c.117-.27.286-.518.503-.728l10.062-9.737-9.945-9.623a2.258 2.258 0 0 1-.698-1.6c-.004-.314.06-.619.176-.894a2.254 2.254 0 0 1 1.257-1.222 2.305 2.305 0 0 1 1.723.014c.267.11.518.274.732.486l10.01 9.682 9.995-9.688.009-.008a2.292 2.292 0 0 1 3.159.026c.425.411.68.98.684 1.59a2.242 2.242 0 0 1-.655 1.6l-.01.01-9.926 9.627 10.008 9.7.029.027a2.237 2.237 0 0 1 .53 2.496l-.002.004a2.258 2.258 0 0 1-1.257 1.222Z" />
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,25 +2,25 @@ import { svgIcon } from "@bitwarden/components";
|
|||
|
||||
export const CreatePasskeyIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="163" height="116" fill="none">
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M31 19.58H9v22h22v-22Zm-24-2v26h26v-26H7Z"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M31 19.58H9v22h22v-22Zm-24-2v26h26v-26H7Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M0 43.58a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v7h-4v-7H4v16.747l1.705 2.149a4 4 0 0 1 .866 2.486v22.204a4 4 0 0 1-1 2.646L4 91.595v17.985h32V91.595l-1.572-1.783a4 4 0 0 1-1-2.646V64.962a4 4 0 0 1 .867-2.486L36 60.327V56.58h4v3.747a4 4 0 0 1-.867 2.486l-1.704 2.149v22.204L39 88.95a4 4 0 0 1 1 2.646v17.985a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V91.595a4 4 0 0 1 1-2.646l1.571-1.783V64.962L.867 62.813A4 4 0 0 1 0 60.327V43.58Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M19.74 64.08a.5.5 0 0 1 .355.147l2.852 2.866a.5.5 0 0 1 .146.352V77.68c2.585 1.189 4.407 3.814 4.407 6.865 0 4.183-3.357 7.535-7.5 7.535-4.144 0-7.5-3.377-7.5-7.535a7.546 7.546 0 0 1 4.478-6.894V76.21a.5.5 0 0 1 .146-.353l1.275-1.282-1.322-1.329a.5.5 0 0 1 0-.705l.332-.334-.262-.263a.5.5 0 0 1-.005-.7l1.332-1.377-1.445-1.452a.5.5 0 0 1-.145-.353v-1.113a.5.5 0 0 1 .145-.353l2.357-2.368a.5.5 0 0 1 .355-.147Zm-1.856 3.074v.7l1.645 1.654a.5.5 0 0 1 .005.7l-1.332 1.377.267.268a.5.5 0 0 1 0 .706l-.333.334 1.323 1.329a.5.5 0 0 1 0 .705l-1.48 1.488v1.57a.5.5 0 0 1-.32.466 6.545 6.545 0 0 0-4.159 6.094c0 3.61 2.913 6.535 6.5 6.535 3.588 0 6.5-2.902 6.5-6.535 0-2.748-1.707-5.104-4.095-6.073a.5.5 0 0 1-.312-.463V67.651l-2.352-2.364-1.857 1.866ZM20 85.742a1.27 1.27 0 0 0-1.268 1.277c0 .701.56 1.276 1.268 1.276.712 0 1.268-.555 1.268-1.276A1.27 1.27 0 0 0 20 85.742Zm-2.268 1.277A2.27 2.27 0 0 1 20 84.742a2.27 2.27 0 0 1 2.268 2.277c0 1.268-1 2.276-2.268 2.276a2.27 2.27 0 0 1-2.268-2.276ZM41.796 42.844a1 1 0 0 1 1.413.058l5.526 6A1 1 0 0 1 48 50.58H27a1 1 0 1 1 0-2h18.72l-3.982-4.323a1 1 0 0 1 .058-1.413ZM33.315 62.315a1 1 0 0 1-1.413-.058l-5.526-6a1 1 0 0 1 .735-1.677h21a1 1 0 1 1 0 2h-18.72l3.982 4.322a1 1 0 0 1-.058 1.413ZM57.623 114.12a1 1 0 0 1 1-1h63.048a1 1 0 1 1 0 2H58.623a1 1 0 0 1-1-1Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M78.022 114.12V95.774h2v18.346h-2ZM98.418 114.12V95.774h2v18.346h-2Z" clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M16 14.58c0-7.732 6.268-14 14-14h119c7.732 0 14 6.268 14 14v68c0 7.732-6.268 14-14 14H39.5v-4H149c5.523 0 10-4.478 10-10v-68c0-5.523-4.477-10-10-10H30c-5.523 0-10 4.477-10 10v5h-4v-5Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd"
|
||||
d="M25 15.58a6 6 0 0 1 6-6h117a6 6 0 0 1 6 6v66a6 6 0 0 1-6 6H36.5v-2H148a4 4 0 0 0 4-4v-66a4 4 0 0 0-4-4H31a4 4 0 0 0-4 4v3h-2v-3Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-secondary-500"
|
||||
<path class="tw-fill-secondary-600"
|
||||
d="M104.269 32.98a1.42 1.42 0 0 0-1.007-.4h-25.83c-.39 0-.722.132-1.007.4a1.26 1.26 0 0 0-.425.947v16.199c0 1.207.25 2.406.75 3.597a13.222 13.222 0 0 0 1.861 3.165c.74.919 1.62 1.817 2.646 2.69a30.93 30.93 0 0 0 2.834 2.172c.868.577 1.77 1.121 2.712 1.636.942.515 1.612.861 2.007 1.043.394.18.714.325.95.42.18.082.373.128.583.128.21 0 .403-.042.582-.128.241-.099.557-.24.956-.42.394-.182 1.064-.532 2.006-1.043a36.56 36.56 0 0 0 2.712-1.636c.867-.577 1.813-1.302 2.838-2.172a19.943 19.943 0 0 0 2.646-2.69 13.24 13.24 0 0 0 1.862-3.165c.5-1.187.749-2.386.749-3.597V33.93c.005-.367-.14-.684-.425-.952Zm-3.329 17.298c0 5.864-10.593 10.916-10.593 10.916V36.049h10.593v14.23Z" />
|
||||
<path class="tw-fill-secondary-500" fill-rule="evenodd" d="M18 24.58h-5v-2h5v2ZM27 24.58h-5v-2h5v2Z"
|
||||
<path class="tw-fill-secondary-600" fill-rule="evenodd" d="M18 24.58h-5v-2h5v2ZM27 24.58h-5v-2h5v2Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import { svgIcon } from "@bitwarden/components";
|
|||
|
||||
export const UserVerificationBiometricsIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="63" height="65" fill="none">
|
||||
<path class="tw-fill-secondary-500" fill="#89929F" fill-rule="evenodd" d="M6.539 13.582C12.113 5.786 21.228.7 31.529.7c15.02 0 27.512 10.808 30.203 25.086a2 2 0 1 1-3.93.74C55.457 14.093 44.578 4.7 31.528 4.7c-8.952 0-16.879 4.416-21.736 11.21a2 2 0 0 1-3.254-2.327Zm-.955 5.384A2 2 0 0 1 6.7 21.565a26.876 26.876 0 0 0-1.91 9.988v8.833a2 2 0 1 1-4 0v-8.833c0-4.05.778-7.923 2.195-11.472a2 2 0 0 1 2.599-1.115Zm54.685 10.587a2 2 0 0 1 2 2v8.244a2 2 0 0 1-4 0v-8.244a2 2 0 0 1 2-2Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill="#89929F" fill-rule="evenodd" d="M8.476 21.293c3.898-8.848 12.751-15.032 23.053-15.032a25.08 25.08 0 0 1 14.296 4.448A2 2 0 1 1 43.552 14a21.08 21.08 0 0 0-12.023-3.739c-8.66 0-16.11 5.196-19.392 12.645a2 2 0 1 1-3.661-1.613Zm39.328-6.481a2 2 0 0 1 2.82.211 25.062 25.062 0 0 1 6.082 16.4v19.629a2 2 0 1 1-4 0V31.423c0-5.27-1.925-10.085-5.114-13.79a2 2 0 0 1 .212-2.821ZM8.728 26.786A2 2 0 0 1 10.49 29c-.09.794-.137 1.603-.137 2.423v19.629a2 2 0 1 1-4 0V31.423c0-.972.055-1.931.163-2.876a2 2 0 0 1 2.213-1.76Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill="#89929F" fill-rule="evenodd" d="M12.223 31.097c0-10.648 8.647-19.273 19.306-19.273s19.306 8.625 19.306 19.273v25.321a2 2 0 1 1-4 0v-25.32c0-8.433-6.85-15.274-15.306-15.274s-15.305 6.841-15.305 15.273v9.913a2 2 0 1 1-4 0v-9.913Zm2 13.409a2 2 0 0 1 2 2v9.912a2 2 0 1 1-4 0v-9.912a2 2 0 0 1 2-2Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill="#89929F" fill-rule="evenodd" d="M24.698 19.044a13.418 13.418 0 0 1 6.831-1.857c7.411 0 13.434 5.984 13.434 13.385v7.851a2 2 0 1 1-4 0v-7.851c0-5.175-4.216-9.385-9.434-9.385a9.419 9.419 0 0 0-4.8 1.304 2 2 0 0 1-2.031-3.447Zm-1.76 3.755a2 2 0 0 1 .613 2.762 9.296 9.296 0 0 0-1.456 5.01v29.64a2 2 0 0 1-4 0v-29.64c0-2.63.763-5.087 2.081-7.158a2 2 0 0 1 2.761-.614Zm20.025 20.298a2 2 0 0 1 2 2v15.114a2 2 0 1 1-4 0V45.097a2 2 0 0 1 2-2Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill="#89929F" fill-rule="evenodd" d="M23.967 30.18c0-4.163 3.408-7.497 7.562-7.497s7.563 3.334 7.563 7.496v12.563a2 2 0 0 1-4 0V30.179c0-1.908-1.573-3.496-3.563-3.496-1.99 0-3.562 1.588-3.562 3.496v31.603a2 2 0 0 1-4 0V30.179ZM37.092 46.04a2 2 0 0 1 2 2v13.74a2 2 0 0 1-4 0v-13.74a2 2 0 0 1 2-2Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-500" fill="#89929F" fill-rule="evenodd" d="M31.546 28.375a2 2 0 0 1 2 2v4.908a2 2 0 1 1-4 0v-4.908a2 2 0 0 1 2-2Zm-.018 10.334a2 2 0 0 1 2.001 1.999l.017 22.25a2 2 0 1 1-4 .003l-.017-22.25a2 2 0 0 1 1.999-2.002Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill="#89929F" fill-rule="evenodd" d="M6.539 13.582C12.113 5.786 21.228.7 31.529.7c15.02 0 27.512 10.808 30.203 25.086a2 2 0 1 1-3.93.74C55.457 14.093 44.578 4.7 31.528 4.7c-8.952 0-16.879 4.416-21.736 11.21a2 2 0 0 1-3.254-2.327Zm-.955 5.384A2 2 0 0 1 6.7 21.565a26.876 26.876 0 0 0-1.91 9.988v8.833a2 2 0 1 1-4 0v-8.833c0-4.05.778-7.923 2.195-11.472a2 2 0 0 1 2.599-1.115Zm54.685 10.587a2 2 0 0 1 2 2v8.244a2 2 0 0 1-4 0v-8.244a2 2 0 0 1 2-2Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill="#89929F" fill-rule="evenodd" d="M8.476 21.293c3.898-8.848 12.751-15.032 23.053-15.032a25.08 25.08 0 0 1 14.296 4.448A2 2 0 1 1 43.552 14a21.08 21.08 0 0 0-12.023-3.739c-8.66 0-16.11 5.196-19.392 12.645a2 2 0 1 1-3.661-1.613Zm39.328-6.481a2 2 0 0 1 2.82.211 25.062 25.062 0 0 1 6.082 16.4v19.629a2 2 0 1 1-4 0V31.423c0-5.27-1.925-10.085-5.114-13.79a2 2 0 0 1 .212-2.821ZM8.728 26.786A2 2 0 0 1 10.49 29c-.09.794-.137 1.603-.137 2.423v19.629a2 2 0 1 1-4 0V31.423c0-.972.055-1.931.163-2.876a2 2 0 0 1 2.213-1.76Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill="#89929F" fill-rule="evenodd" d="M12.223 31.097c0-10.648 8.647-19.273 19.306-19.273s19.306 8.625 19.306 19.273v25.321a2 2 0 1 1-4 0v-25.32c0-8.433-6.85-15.274-15.306-15.274s-15.305 6.841-15.305 15.273v9.913a2 2 0 1 1-4 0v-9.913Zm2 13.409a2 2 0 0 1 2 2v9.912a2 2 0 1 1-4 0v-9.912a2 2 0 0 1 2-2Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill="#89929F" fill-rule="evenodd" d="M24.698 19.044a13.418 13.418 0 0 1 6.831-1.857c7.411 0 13.434 5.984 13.434 13.385v7.851a2 2 0 1 1-4 0v-7.851c0-5.175-4.216-9.385-9.434-9.385a9.419 9.419 0 0 0-4.8 1.304 2 2 0 0 1-2.031-3.447Zm-1.76 3.755a2 2 0 0 1 .613 2.762 9.296 9.296 0 0 0-1.456 5.01v29.64a2 2 0 0 1-4 0v-29.64c0-2.63.763-5.087 2.081-7.158a2 2 0 0 1 2.761-.614Zm20.025 20.298a2 2 0 0 1 2 2v15.114a2 2 0 1 1-4 0V45.097a2 2 0 0 1 2-2Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill="#89929F" fill-rule="evenodd" d="M23.967 30.18c0-4.163 3.408-7.497 7.562-7.497s7.563 3.334 7.563 7.496v12.563a2 2 0 0 1-4 0V30.179c0-1.908-1.573-3.496-3.563-3.496-1.99 0-3.562 1.588-3.562 3.496v31.603a2 2 0 0 1-4 0V30.179ZM37.092 46.04a2 2 0 0 1 2 2v13.74a2 2 0 0 1-4 0v-13.74a2 2 0 0 1 2-2Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-secondary-600" fill="#89929F" fill-rule="evenodd" d="M31.546 28.375a2 2 0 0 1 2 2v4.908a2 2 0 1 1-4 0v-4.908a2 2 0 0 1 2-2Zm-.018 10.334a2 2 0 0 1 2.001 1.999l.017 22.25a2 2 0 1 1-4 .003l-.017-22.25a2 2 0 0 1 1.999-2.002Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { svgIcon } from "@bitwarden/components";
|
|||
export const BitwardenLogo = svgIcon`
|
||||
<svg viewBox="0 0 290 45" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Bitwarden</title>
|
||||
<path class="tw-fill-primary-500" fill-rule="evenodd" clip-rule="evenodd" d="M69.799 10.713c3.325 0 5.911 1.248 7.811 3.848 1.9 2.549 2.85 6.033 2.85 10.453 0 4.576-.95 8.113-2.902 10.61-1.953 2.547-4.592 3.743-7.918 3.743-3.325 0-5.858-1.144-7.758-3.536h-.528l-1.003 2.444a.976.976 0 0 1-.897.572H55.23a.94.94 0 0 1-.95-.936V1.352a.94.94 0 0 1 .95-.936h5.7a.94.94 0 0 1 .95.936v8.009c0 1.144-.105 2.964-.316 5.46h.317c1.741-2.704 4.433-4.108 7.917-4.108Zm-2.428 6.084c-1.847 0-3.273.572-4.17 1.717-.844 1.144-1.32 3.068-1.32 5.668v.832c0 2.964.423 5.097 1.32 6.345.897 1.248 2.322 1.924 4.275 1.924 1.531 0 2.85-.728 3.748-2.184.897-1.404 1.372-3.537 1.372-6.189 0-2.704-.475-4.732-1.372-6.084-.95-1.352-2.27-2.029-3.853-2.029ZM93.022 38.9h-5.7a.94.94 0 0 1-.95-.936V12.221a.94.94 0 0 1 .95-.936h5.7a.94.94 0 0 1 .95.936v25.69c.053.468-.422.988-.95.988Zm20.849-5.564c1.108 0 2.428-.208 4.011-.624a.632.632 0 0 1 .792.624v4.316a.64.64 0 0 1-.37.572c-1.794.728-4.064 1.092-6.597 1.092-3.062 0-5.278-.728-6.651-2.288-1.372-1.508-2.111-3.796-2.111-6.812V16.953h-3.008c-.37 0-.634-.26-.634-.624v-2.444c0-.052.053-.104.053-.156l4.17-2.444 2.058-5.408c.106-.26.317-.417.581-.417h3.8c.369 0 .633.26.633.625v5.252h7.548c.158 0 .317.156.317.312v4.68c0 .364-.264.624-.634.624h-7.178v13.21c0 1.04.317 1.872.897 2.34.528.572 1.373.832 2.323.832Zm35.521 5.564c-.739 0-1.319-.468-1.636-1.144l-5.595-16.797c-.369-1.196-.844-3.016-1.478-5.357h-.158l-.528 1.873-1.108 3.536-5.753 16.797c-.211.676-.845 1.092-1.584 1.092a1.628 1.628 0 0 1-1.583-1.196l-7.02-24.182c-.211-.728.369-1.508 1.214-1.508h.158c.528 0 1.003.364 1.161.884l4.117 14.717c1.003 3.849 1.689 6.657 2.006 8.53h.158c.95-3.85 1.689-6.397 2.164-7.698l5.331-15.393c.211-.624.792-1.04 1.531-1.04.686 0 1.267.416 1.478 1.04l4.961 15.29c1.214 3.9 1.953 6.396 2.217 7.696h.158c.159-1.04.792-3.952 2.006-8.633l3.958-14.509c.159-.52.634-.884 1.162-.884.791 0 1.372.728 1.161 1.508l-6.651 24.182c-.211.728-.844 1.196-1.636 1.196h-.211Zm31.352 0a.962.962 0 0 1-.95-.832l-.475-3.432h-.264c-1.372 1.716-2.745 2.964-4.223 3.692-1.425.728-3.166 1.04-5.119 1.04-2.692 0-4.751-.676-6.228-2.028-1.32-1.196-2.059-2.808-2.164-4.836-.212-2.704.95-5.305 3.166-6.813 2.27-1.456 5.437-2.34 9.712-2.34l5.173-.156v-1.768c0-2.6-.528-4.473-1.637-5.773-1.108-1.3-2.744-1.924-5.067-1.924-2.216 0-4.433.52-6.756 1.612-.58.26-1.266 0-1.53-.572s0-1.248.58-1.456c2.639-1.04 5.226-1.612 7.865-1.612 3.008 0 5.225.78 6.756 2.34 1.478 1.508 2.216 3.953 2.216 7.125v16.901c-.052.312-.527.832-1.055.832Zm-10.926-1.768c2.956 0 5.226-.832 6.862-2.444 1.689-1.612 2.533-3.952 2.533-6.813v-2.6l-4.75.208c-3.853.156-6.545.78-8.234 1.768-1.636.988-2.481 2.6-2.481 4.68 0 1.665.528 3.017 1.531 3.953 1.161.78 2.639 1.248 4.539 1.248Zm31.246-25.638c.792 0 1.584.052 2.481.156a1.176 1.176 0 0 1 1.003 1.352c-.106.624-.739.988-1.372.884-.792-.104-1.584-.208-2.375-.208-2.323 0-4.223.988-5.701 2.912-1.478 1.925-2.217 4.42-2.217 7.333v13.625c0 .676-.527 1.196-1.214 1.196-.686 0-1.213-.52-1.213-1.196V13.105c0-.572.475-1.04 1.055-1.04.581 0 1.056.416 1.056.988l.211 3.848h.158c1.109-1.976 2.323-3.38 3.589-4.16 1.214-.832 2.745-1.248 4.539-1.248Zm18.579 0c1.953 0 3.695.364 5.12 1.04 1.478.676 2.745 1.924 3.853 3.64h.158a122.343 122.343 0 0 1-.158-6.084V1.612c0-.676.528-1.196 1.214-1.196.686 0 1.214.52 1.214 1.196v36.351c0 .468-.37.832-.845.832a.852.852 0 0 1-.844-.78l-.528-3.38h-.211c-2.058 3.068-5.067 4.576-8.92 4.576-3.8 0-6.598-1.144-8.656-3.484-1.953-2.34-3.008-5.668-3.008-10.089 0-4.628.95-8.165 2.955-10.66 2.006-2.237 4.856-3.485 8.656-3.485Zm0 2.236c-3.008 0-5.225 1.04-6.756 3.12-1.478 2.029-2.216 4.993-2.216 8.945 0 7.593 3.008 11.39 9.025 11.39 3.114 0 5.331-.885 6.756-2.653 1.478-1.768 2.164-4.68 2.164-8.737v-.416c0-4.16-.686-7.124-2.164-8.893-1.372-1.872-3.642-2.756-6.809-2.756Zm31.616 25.638c-3.959 0-7.02-1.196-9.289-3.64-2.217-2.392-3.326-5.772-3.326-10.089 0-4.316 1.056-7.748 3.22-10.297 2.164-2.6 5.014-3.9 8.656-3.9 3.167 0 5.753 1.092 7.548 3.276 1.9 2.184 2.797 5.2 2.797 8.997v1.976h-19.634c.052 3.692.897 6.5 2.639 8.477 1.741 1.976 4.169 2.86 7.389 2.86 1.531 0 2.956-.104 4.117-.312.844-.156 1.847-.416 3.061-.832.686-.26 1.425.26 1.425.988 0 .416-.264.832-.686.988-1.267.52-2.481.832-3.589 1.04-1.32.364-2.745.468-4.328.468Zm-.739-25.69c-2.639 0-4.75.832-6.334 2.548-1.583 1.665-2.48 4.16-2.797 7.333h16.89c0-3.068-.686-5.564-2.059-7.28-1.372-1.717-3.272-2.6-5.7-2.6ZM288.733 38.9c-.686 0-1.214-.52-1.214-1.196V21.426c0-2.704-.58-4.68-1.689-5.877-1.214-1.196-2.955-1.872-5.383-1.872-3.273 0-5.648.78-7.126 2.444-1.478 1.613-2.322 4.265-2.322 7.853V37.6c0 .676-.528 1.196-1.214 1.196-.686 0-1.214-.52-1.214-1.196V13.105c0-.624.475-1.092 1.108-1.092.581 0 1.003.416 1.109.936l.316 2.704h.159c1.794-2.808 4.908-4.212 9.448-4.212 6.175 0 9.289 3.276 9.289 9.829V37.6c-.053.727-.633 1.3-1.267 1.3ZM90.225 0c-2.48 0-4.486 1.872-4.486 4.212v.416c0 2.289 2.058 4.213 4.486 4.213s4.486-1.924 4.486-4.213v-.364C94.711 1.872 92.653 0 90.225 0Z" />
|
||||
<path class="tw-fill-primary-500" d="M32.041 24.546V5.95H18.848v33.035c2.336-1.22 4.427-2.547 6.272-3.98 4.614-3.565 6.921-7.051 6.921-10.46Zm5.654-22.314v22.314c0 1.665-.329 3.317-.986 4.953-.658 1.637-1.473 3.09-2.445 4.359-.971 1.268-2.13 2.503-3.475 3.704-1.345 1.2-2.586 2.199-3.725 2.993a46.963 46.963 0 0 1-3.563 2.251c-1.237.707-2.116 1.187-2.636 1.439-.52.251-.938.445-1.252.58-.235.117-.49.175-.765.175s-.53-.058-.766-.174c-.314-.136-.731-.33-1.252-.581-.52-.252-1.398-.732-2.635-1.439a47.003 47.003 0 0 1-3.564-2.251c-1.138-.794-2.38-1.792-3.725-2.993-1.345-1.2-2.503-2.436-3.475-3.704-.972-1.27-1.787-2.722-2.444-4.359C.329 27.863 0 26.211 0 24.546V2.232c0-.504.187-.94.56-1.308A1.823 1.823 0 0 1 1.885.372H35.81c.511 0 .953.184 1.326.552.373.368.56.804.56 1.308Z" />
|
||||
<path class="tw-fill-primary-600" fill-rule="evenodd" clip-rule="evenodd" d="M69.799 10.713c3.325 0 5.911 1.248 7.811 3.848 1.9 2.549 2.85 6.033 2.85 10.453 0 4.576-.95 8.113-2.902 10.61-1.953 2.547-4.592 3.743-7.918 3.743-3.325 0-5.858-1.144-7.758-3.536h-.528l-1.003 2.444a.976.976 0 0 1-.897.572H55.23a.94.94 0 0 1-.95-.936V1.352a.94.94 0 0 1 .95-.936h5.7a.94.94 0 0 1 .95.936v8.009c0 1.144-.105 2.964-.316 5.46h.317c1.741-2.704 4.433-4.108 7.917-4.108Zm-2.428 6.084c-1.847 0-3.273.572-4.17 1.717-.844 1.144-1.32 3.068-1.32 5.668v.832c0 2.964.423 5.097 1.32 6.345.897 1.248 2.322 1.924 4.275 1.924 1.531 0 2.85-.728 3.748-2.184.897-1.404 1.372-3.537 1.372-6.189 0-2.704-.475-4.732-1.372-6.084-.95-1.352-2.27-2.029-3.853-2.029ZM93.022 38.9h-5.7a.94.94 0 0 1-.95-.936V12.221a.94.94 0 0 1 .95-.936h5.7a.94.94 0 0 1 .95.936v25.69c.053.468-.422.988-.95.988Zm20.849-5.564c1.108 0 2.428-.208 4.011-.624a.632.632 0 0 1 .792.624v4.316a.64.64 0 0 1-.37.572c-1.794.728-4.064 1.092-6.597 1.092-3.062 0-5.278-.728-6.651-2.288-1.372-1.508-2.111-3.796-2.111-6.812V16.953h-3.008c-.37 0-.634-.26-.634-.624v-2.444c0-.052.053-.104.053-.156l4.17-2.444 2.058-5.408c.106-.26.317-.417.581-.417h3.8c.369 0 .633.26.633.625v5.252h7.548c.158 0 .317.156.317.312v4.68c0 .364-.264.624-.634.624h-7.178v13.21c0 1.04.317 1.872.897 2.34.528.572 1.373.832 2.323.832Zm35.521 5.564c-.739 0-1.319-.468-1.636-1.144l-5.595-16.797c-.369-1.196-.844-3.016-1.478-5.357h-.158l-.528 1.873-1.108 3.536-5.753 16.797c-.211.676-.845 1.092-1.584 1.092a1.628 1.628 0 0 1-1.583-1.196l-7.02-24.182c-.211-.728.369-1.508 1.214-1.508h.158c.528 0 1.003.364 1.161.884l4.117 14.717c1.003 3.849 1.689 6.657 2.006 8.53h.158c.95-3.85 1.689-6.397 2.164-7.698l5.331-15.393c.211-.624.792-1.04 1.531-1.04.686 0 1.267.416 1.478 1.04l4.961 15.29c1.214 3.9 1.953 6.396 2.217 7.696h.158c.159-1.04.792-3.952 2.006-8.633l3.958-14.509c.159-.52.634-.884 1.162-.884.791 0 1.372.728 1.161 1.508l-6.651 24.182c-.211.728-.844 1.196-1.636 1.196h-.211Zm31.352 0a.962.962 0 0 1-.95-.832l-.475-3.432h-.264c-1.372 1.716-2.745 2.964-4.223 3.692-1.425.728-3.166 1.04-5.119 1.04-2.692 0-4.751-.676-6.228-2.028-1.32-1.196-2.059-2.808-2.164-4.836-.212-2.704.95-5.305 3.166-6.813 2.27-1.456 5.437-2.34 9.712-2.34l5.173-.156v-1.768c0-2.6-.528-4.473-1.637-5.773-1.108-1.3-2.744-1.924-5.067-1.924-2.216 0-4.433.52-6.756 1.612-.58.26-1.266 0-1.53-.572s0-1.248.58-1.456c2.639-1.04 5.226-1.612 7.865-1.612 3.008 0 5.225.78 6.756 2.34 1.478 1.508 2.216 3.953 2.216 7.125v16.901c-.052.312-.527.832-1.055.832Zm-10.926-1.768c2.956 0 5.226-.832 6.862-2.444 1.689-1.612 2.533-3.952 2.533-6.813v-2.6l-4.75.208c-3.853.156-6.545.78-8.234 1.768-1.636.988-2.481 2.6-2.481 4.68 0 1.665.528 3.017 1.531 3.953 1.161.78 2.639 1.248 4.539 1.248Zm31.246-25.638c.792 0 1.584.052 2.481.156a1.176 1.176 0 0 1 1.003 1.352c-.106.624-.739.988-1.372.884-.792-.104-1.584-.208-2.375-.208-2.323 0-4.223.988-5.701 2.912-1.478 1.925-2.217 4.42-2.217 7.333v13.625c0 .676-.527 1.196-1.214 1.196-.686 0-1.213-.52-1.213-1.196V13.105c0-.572.475-1.04 1.055-1.04.581 0 1.056.416 1.056.988l.211 3.848h.158c1.109-1.976 2.323-3.38 3.589-4.16 1.214-.832 2.745-1.248 4.539-1.248Zm18.579 0c1.953 0 3.695.364 5.12 1.04 1.478.676 2.745 1.924 3.853 3.64h.158a122.343 122.343 0 0 1-.158-6.084V1.612c0-.676.528-1.196 1.214-1.196.686 0 1.214.52 1.214 1.196v36.351c0 .468-.37.832-.845.832a.852.852 0 0 1-.844-.78l-.528-3.38h-.211c-2.058 3.068-5.067 4.576-8.92 4.576-3.8 0-6.598-1.144-8.656-3.484-1.953-2.34-3.008-5.668-3.008-10.089 0-4.628.95-8.165 2.955-10.66 2.006-2.237 4.856-3.485 8.656-3.485Zm0 2.236c-3.008 0-5.225 1.04-6.756 3.12-1.478 2.029-2.216 4.993-2.216 8.945 0 7.593 3.008 11.39 9.025 11.39 3.114 0 5.331-.885 6.756-2.653 1.478-1.768 2.164-4.68 2.164-8.737v-.416c0-4.16-.686-7.124-2.164-8.893-1.372-1.872-3.642-2.756-6.809-2.756Zm31.616 25.638c-3.959 0-7.02-1.196-9.289-3.64-2.217-2.392-3.326-5.772-3.326-10.089 0-4.316 1.056-7.748 3.22-10.297 2.164-2.6 5.014-3.9 8.656-3.9 3.167 0 5.753 1.092 7.548 3.276 1.9 2.184 2.797 5.2 2.797 8.997v1.976h-19.634c.052 3.692.897 6.5 2.639 8.477 1.741 1.976 4.169 2.86 7.389 2.86 1.531 0 2.956-.104 4.117-.312.844-.156 1.847-.416 3.061-.832.686-.26 1.425.26 1.425.988 0 .416-.264.832-.686.988-1.267.52-2.481.832-3.589 1.04-1.32.364-2.745.468-4.328.468Zm-.739-25.69c-2.639 0-4.75.832-6.334 2.548-1.583 1.665-2.48 4.16-2.797 7.333h16.89c0-3.068-.686-5.564-2.059-7.28-1.372-1.717-3.272-2.6-5.7-2.6ZM288.733 38.9c-.686 0-1.214-.52-1.214-1.196V21.426c0-2.704-.58-4.68-1.689-5.877-1.214-1.196-2.955-1.872-5.383-1.872-3.273 0-5.648.78-7.126 2.444-1.478 1.613-2.322 4.265-2.322 7.853V37.6c0 .676-.528 1.196-1.214 1.196-.686 0-1.214-.52-1.214-1.196V13.105c0-.624.475-1.092 1.108-1.092.581 0 1.003.416 1.109.936l.316 2.704h.159c1.794-2.808 4.908-4.212 9.448-4.212 6.175 0 9.289 3.276 9.289 9.829V37.6c-.053.727-.633 1.3-1.267 1.3ZM90.225 0c-2.48 0-4.486 1.872-4.486 4.212v.416c0 2.289 2.058 4.213 4.486 4.213s4.486-1.924 4.486-4.213v-.364C94.711 1.872 92.653 0 90.225 0Z" />
|
||||
<path class="tw-fill-primary-600" d="M32.041 24.546V5.95H18.848v33.035c2.336-1.22 4.427-2.547 6.272-3.98 4.614-3.565 6.921-7.051 6.921-10.46Zm5.654-22.314v22.314c0 1.665-.329 3.317-.986 4.953-.658 1.637-1.473 3.09-2.445 4.359-.971 1.268-2.13 2.503-3.475 3.704-1.345 1.2-2.586 2.199-3.725 2.993a46.963 46.963 0 0 1-3.563 2.251c-1.237.707-2.116 1.187-2.636 1.439-.52.251-.938.445-1.252.58-.235.117-.49.175-.765.175s-.53-.058-.766-.174c-.314-.136-.731-.33-1.252-.581-.52-.252-1.398-.732-2.635-1.439a47.003 47.003 0 0 1-3.564-2.251c-1.138-.794-2.38-1.792-3.725-2.993-1.345-1.2-2.503-2.436-3.475-3.704-.972-1.27-1.787-2.722-2.444-4.359C.329 27.863 0 26.211 0 24.546V2.232c0-.504.187-.94.56-1.308A1.823 1.823 0 0 1 1.885.372H35.81c.511 0 .953.184 1.326.552.373.368.56.804.56 1.308Z" />
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@ import { svgIcon } from "@bitwarden/components";
|
|||
|
||||
export const IconLock = svgIcon`
|
||||
<svg width="65" height="80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="tw-fill-primary-500" d="M36.554 52.684a4.133 4.133 0 0 0-.545-2.085 4.088 4.088 0 0 0-1.514-1.518 4.022 4.022 0 0 0-4.114.072 4.094 4.094 0 0 0-1.461 1.57 4.153 4.153 0 0 0 .175 4.16c.393.616.94 1.113 1.588 1.44v6.736a1.864 1.864 0 0 0 .498 1.365c.17.18.376.328.603.425a1.781 1.781 0 0 0 1.437 0c.227-.097.432-.242.603-.425a1.864 1.864 0 0 0 .499-1.365v-6.745a4.05 4.05 0 0 0 1.62-1.498c.392-.64.604-1.377.611-2.132ZM57.86 25.527h-2.242c-.175 0-.35-.037-.514-.105a1.3 1.3 0 0 1-.434-.297 1.379 1.379 0 0 1-.39-.963v-1a23 23 0 0 0-5.455-15.32A22.46 22.46 0 0 0 34.673.101a21.633 21.633 0 0 0-8.998 1.032 21.777 21.777 0 0 0-7.813 4.637 22.118 22.118 0 0 0-5.286 7.446 22.376 22.376 0 0 0-1.855 8.975v1.62c0 .03-.118 1.705-1.555 1.73h-2.02A6.723 6.723 0 0 0 2.37 27.56 6.887 6.887 0 0 0 .4 32.403V73.12a6.905 6.905 0 0 0 1.97 4.847A6.76 6.76 0 0 0 7.146 80h50.713a6.746 6.746 0 0 0 4.77-2.03 6.925 6.925 0 0 0 1.971-4.845V32.403a6.91 6.91 0 0 0-1.965-4.85 6.793 6.793 0 0 0-2.19-1.493 6.676 6.676 0 0 0-2.588-.53l.002-.003Zm-42.2-3.335c-.007-2.55.549-5.07 1.625-7.373a17.085 17.085 0 0 1 4.606-5.945 16.8 16.8 0 0 1 6.684-3.358 16.71 16.71 0 0 1 7.462-.115c3.835.91 7.245 3.12 9.665 6.266a17.61 17.61 0 0 1 3.64 11.02v1.475c0 .18-.035.358-.102.523a1.349 1.349 0 0 1-1.244.842H17.722a1.876 1.876 0 0 1-.744-.085 1.894 1.894 0 0 1-1.119-.957 1.98 1.98 0 0 1-.204-.728v-1.565h.005ZM59.663 73.12c0 .487-.19.952-.529 1.3a1.796 1.796 0 0 1-1.279.545H7.146a1.826 1.826 0 0 1-1.807-1.845V32.403a1.85 1.85 0 0 1 .523-1.3c.168-.17.365-.308.585-.4.22-.093.454-.14.691-.143h50.719c.479.005.938.2 1.276.545.339.345.526.81.526 1.295v40.717l.003.003Z" />
|
||||
<path class="tw-fill-primary-600" d="M36.554 52.684a4.133 4.133 0 0 0-.545-2.085 4.088 4.088 0 0 0-1.514-1.518 4.022 4.022 0 0 0-4.114.072 4.094 4.094 0 0 0-1.461 1.57 4.153 4.153 0 0 0 .175 4.16c.393.616.94 1.113 1.588 1.44v6.736a1.864 1.864 0 0 0 .498 1.365c.17.18.376.328.603.425a1.781 1.781 0 0 0 1.437 0c.227-.097.432-.242.603-.425a1.864 1.864 0 0 0 .499-1.365v-6.745a4.05 4.05 0 0 0 1.62-1.498c.392-.64.604-1.377.611-2.132ZM57.86 25.527h-2.242c-.175 0-.35-.037-.514-.105a1.3 1.3 0 0 1-.434-.297 1.379 1.379 0 0 1-.39-.963v-1a23 23 0 0 0-5.455-15.32A22.46 22.46 0 0 0 34.673.101a21.633 21.633 0 0 0-8.998 1.032 21.777 21.777 0 0 0-7.813 4.637 22.118 22.118 0 0 0-5.286 7.446 22.376 22.376 0 0 0-1.855 8.975v1.62c0 .03-.118 1.705-1.555 1.73h-2.02A6.723 6.723 0 0 0 2.37 27.56 6.887 6.887 0 0 0 .4 32.403V73.12a6.905 6.905 0 0 0 1.97 4.847A6.76 6.76 0 0 0 7.146 80h50.713a6.746 6.746 0 0 0 4.77-2.03 6.925 6.925 0 0 0 1.971-4.845V32.403a6.91 6.91 0 0 0-1.965-4.85 6.793 6.793 0 0 0-2.19-1.493 6.676 6.676 0 0 0-2.588-.53l.002-.003Zm-42.2-3.335c-.007-2.55.549-5.07 1.625-7.373a17.085 17.085 0 0 1 4.606-5.945 16.8 16.8 0 0 1 6.684-3.358 16.71 16.71 0 0 1 7.462-.115c3.835.91 7.245 3.12 9.665 6.266a17.61 17.61 0 0 1 3.64 11.02v1.475c0 .18-.035.358-.102.523a1.349 1.349 0 0 1-1.244.842H17.722a1.876 1.876 0 0 1-.744-.085 1.894 1.894 0 0 1-1.119-.957 1.98 1.98 0 0 1-.204-.728v-1.565h.005ZM59.663 73.12c0 .487-.19.952-.529 1.3a1.796 1.796 0 0 1-1.279.545H7.146a1.826 1.826 0 0 1-1.807-1.845V32.403a1.85 1.85 0 0 1 .523-1.3c.168-.17.365-.308.585-.4.22-.093.454-.14.691-.143h50.719c.479.005.938.2 1.276.545.339.345.526.81.526 1.295v40.717l.003.003Z" />
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export class AvatarComponent implements OnChanges {
|
|||
get classList() {
|
||||
return ["tw-rounded-full"]
|
||||
.concat(SizeClasses[this.size] ?? [])
|
||||
.concat(this.border ? ["tw-border", "tw-border-solid", "tw-border-secondary-500"] : []);
|
||||
.concat(this.border ? ["tw-border", "tw-border-solid", "tw-border-secondary-600"] : []);
|
||||
}
|
||||
|
||||
private generate() {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ Use the user 'ID' field if `Name` is not defined.
|
|||
## Outline
|
||||
|
||||
If the avatar is displayed on one of the theme's `background` color variables or is interactive,
|
||||
display the avatar with a 1 pixel `secondary-500` border to meet WCAG AA graphic contrast guidelines
|
||||
display the avatar with a 1 pixel `secondary-600` border to meet WCAG AA graphic contrast guidelines
|
||||
for interactive elements.
|
||||
|
||||
<Story of={stories.Border} />
|
||||
|
|
@ -64,4 +64,4 @@ When the avatar is used as a button, the following states should be used:
|
|||
## Accessibility
|
||||
|
||||
Avatar background color should have 3.1:1 contrast with it’s background; or include the
|
||||
`secondary-500` border Avatar text should have 4.5:1 contrast with the avatar background color
|
||||
`secondary-600` border Avatar text should have 4.5:1 contrast with the avatar background color
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
|
|||
export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
|
||||
|
||||
const styles: Record<BadgeVariant, string[]> = {
|
||||
primary: ["tw-bg-primary-500"],
|
||||
primary: ["tw-bg-primary-600"],
|
||||
secondary: ["tw-bg-text-muted"],
|
||||
success: ["tw-bg-success-500"],
|
||||
danger: ["tw-bg-danger-500"],
|
||||
warning: ["tw-bg-warning-500"],
|
||||
info: ["tw-bg-info-500"],
|
||||
success: ["tw-bg-success-600"],
|
||||
danger: ["tw-bg-danger-600"],
|
||||
warning: ["tw-bg-warning-600"],
|
||||
info: ["tw-bg-info-600"],
|
||||
};
|
||||
|
||||
const hoverStyles: Record<BadgeVariant, string[]> = {
|
||||
|
|
|
|||
|
|
@ -28,13 +28,13 @@ export class BannerComponent implements OnInit {
|
|||
get bannerClass() {
|
||||
switch (this.bannerType) {
|
||||
case "danger":
|
||||
return "tw-bg-danger-500";
|
||||
return "tw-bg-danger-600";
|
||||
case "info":
|
||||
return "tw-bg-info-500";
|
||||
return "tw-bg-info-600";
|
||||
case "premium":
|
||||
return "tw-bg-success-500";
|
||||
return "tw-bg-success-600";
|
||||
case "warning":
|
||||
return "tw-bg-warning-500";
|
||||
return "tw-bg-warning-600";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ describe("Button", () => {
|
|||
it("should apply classes based on type", () => {
|
||||
testAppComponent.buttonType = "primary";
|
||||
fixture.detectChanges();
|
||||
expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
|
||||
expect(linkDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
|
||||
expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-600")).toBe(true);
|
||||
expect(linkDebugElement.nativeElement.classList.contains("tw-bg-primary-600")).toBe(true);
|
||||
|
||||
testAppComponent.buttonType = "secondary";
|
||||
fixture.detectChanges();
|
||||
|
|
@ -40,8 +40,8 @@ describe("Button", () => {
|
|||
|
||||
testAppComponent.buttonType = "danger";
|
||||
fixture.detectChanges();
|
||||
expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
|
||||
expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
|
||||
expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-600")).toBe(true);
|
||||
expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-600")).toBe(true);
|
||||
|
||||
testAppComponent.buttonType = "unstyled";
|
||||
fixture.detectChanges();
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ const focusRing = [
|
|||
|
||||
const buttonStyles: Record<ButtonType, string[]> = {
|
||||
primary: [
|
||||
"tw-border-primary-500",
|
||||
"tw-bg-primary-500",
|
||||
"tw-border-primary-600",
|
||||
"tw-bg-primary-600",
|
||||
"!tw-text-contrast",
|
||||
"hover:tw-bg-primary-700",
|
||||
"hover:tw-border-primary-700",
|
||||
"disabled:tw-bg-primary-500/60",
|
||||
"disabled:tw-border-primary-500/60",
|
||||
"disabled:tw-bg-primary-600/60",
|
||||
"disabled:tw-border-primary-600/60",
|
||||
"disabled:!tw-text-contrast/60",
|
||||
"disabled:tw-bg-clip-padding",
|
||||
"disabled:tw-cursor-not-allowed",
|
||||
|
|
@ -39,13 +39,13 @@ const buttonStyles: Record<ButtonType, string[]> = {
|
|||
],
|
||||
danger: [
|
||||
"tw-bg-transparent",
|
||||
"tw-border-danger-500",
|
||||
"tw-border-danger-600",
|
||||
"!tw-text-danger",
|
||||
"hover:tw-bg-danger-500",
|
||||
"hover:tw-border-danger-500",
|
||||
"hover:tw-bg-danger-600",
|
||||
"hover:tw-border-danger-600",
|
||||
"hover:!tw-text-contrast",
|
||||
"disabled:tw-bg-transparent",
|
||||
"disabled:tw-border-danger-500/60",
|
||||
"disabled:tw-border-danger-600/60",
|
||||
"disabled:!tw-text-danger/60",
|
||||
"disabled:tw-cursor-not-allowed",
|
||||
...focusRing,
|
||||
|
|
|
|||
|
|
@ -42,13 +42,13 @@ export class CalloutComponent implements OnInit {
|
|||
get calloutClass() {
|
||||
switch (this.type) {
|
||||
case "danger":
|
||||
return "tw-border-l-danger-500";
|
||||
return "tw-border-l-danger-600";
|
||||
case "info":
|
||||
return "tw-border-l-info-500";
|
||||
return "tw-border-l-info-600";
|
||||
case "success":
|
||||
return "tw-border-l-success-500";
|
||||
return "tw-border-l-success-600";
|
||||
case "warning":
|
||||
return "tw-border-l-warning-500";
|
||||
return "tw-border-l-warning-600";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
|
|||
"tw-rounded",
|
||||
"tw-border",
|
||||
"tw-border-solid",
|
||||
"tw-border-secondary-500",
|
||||
"tw-border-secondary-600",
|
||||
"tw-h-3.5",
|
||||
"tw-w-3.5",
|
||||
"tw-mr-1.5",
|
||||
|
|
@ -43,8 +43,8 @@ export class CheckboxComponent implements BitFormControlAbstraction {
|
|||
"disabled:tw-border",
|
||||
"disabled:tw-bg-secondary-100",
|
||||
|
||||
"checked:tw-bg-primary-500",
|
||||
"checked:tw-border-primary-500",
|
||||
"checked:tw-bg-primary-600",
|
||||
"checked:tw-border-primary-600",
|
||||
"checked:hover:tw-bg-primary-700",
|
||||
"checked:hover:tw-border-primary-700",
|
||||
"[&>label:hover]:checked:tw-bg-primary-700",
|
||||
|
|
@ -59,8 +59,8 @@ export class CheckboxComponent implements BitFormControlAbstraction {
|
|||
"[&:not(:indeterminate)]:checked:before:tw-mask-image-[var(--mask-image)]",
|
||||
"indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
|
||||
|
||||
"indeterminate:tw-bg-primary-500",
|
||||
"indeterminate:tw-border-primary-500",
|
||||
"indeterminate:tw-bg-primary-600",
|
||||
"indeterminate:tw-border-primary-600",
|
||||
"indeterminate:hover:tw-bg-primary-700",
|
||||
"indeterminate:hover:tw-border-primary-700",
|
||||
"[&>label:hover]:indeterminate:tw-bg-primary-700",
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export class ColorPasswordComponent {
|
|||
[CharacterType.Emoji]: [],
|
||||
[CharacterType.Letter]: ["tw-text-main"],
|
||||
[CharacterType.Special]: ["tw-text-danger"],
|
||||
[CharacterType.Number]: ["tw-text-primary-500"],
|
||||
[CharacterType.Number]: ["tw-text-primary-600"],
|
||||
};
|
||||
|
||||
@HostBinding("class")
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const DEFAULT_ICON: Record<SimpleDialogType, string> = {
|
|||
};
|
||||
|
||||
const DEFAULT_COLOR: Record<SimpleDialogType, string> = {
|
||||
primary: "tw-text-primary-500",
|
||||
primary: "tw-text-primary-600",
|
||||
success: "tw-text-success",
|
||||
info: "tw-text-info",
|
||||
warning: "tw-text-warning",
|
||||
|
|
|
|||
|
|
@ -33,11 +33,11 @@ the simple dialog's type is specified.
|
|||
|
||||
| type | icon name | icon | color |
|
||||
| ------- | ------------------------ | -------------------------------------------- | ----------- |
|
||||
| primary | bwi-business | <i class="bwi bwi-business"></i> | primary-500 |
|
||||
| success | bwi-star | <i class="bwi bwi-star"></i> | success-500 |
|
||||
| info | bwi-info-circle | <i class="bwi bwi-info-circle"></i> | info-500 |
|
||||
| warning | bwi-exclamation-triangle | <i class="bwi bwi-exclamation-triangle"></i> | warning-500 |
|
||||
| danger | bwi-error | <i class="bwi bwi-error"></i> | danger-500 |
|
||||
| primary | bwi-business | <i class="bwi bwi-business"></i> | primary-600 |
|
||||
| success | bwi-star | <i class="bwi bwi-star"></i> | success-600 |
|
||||
| info | bwi-info-circle | <i class="bwi bwi-info-circle"></i> | info-600 |
|
||||
| warning | bwi-exclamation-triangle | <i class="bwi bwi-exclamation-triangle"></i> | warning-600 |
|
||||
| danger | bwi-error | <i class="bwi bwi-error"></i> | danger-600 |
|
||||
|
||||
## Scrolling Content
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export const PrefixClasses = [
|
|||
"tw-bg-background-alt",
|
||||
"tw-border",
|
||||
"tw-border-solid",
|
||||
"tw-border-secondary-500",
|
||||
"tw-border-secondary-600",
|
||||
"tw-text-muted",
|
||||
"tw-rounded-none",
|
||||
];
|
||||
|
|
|
|||
|
|
@ -174,5 +174,5 @@ the field’s label.
|
|||
|
||||
- All field inputs are interactive elements that must follow the WCAG graphic contrast guidelines.
|
||||
Maintain a ratio of 3:1 with the form's background.
|
||||
- Error styling should not rely only on using the `danger-500`color change. Use
|
||||
- Error styling should not rely only on using the `danger-600`color change. Use
|
||||
<i class="bwi bwi-error"></i> as a prefix to highlight the text as error text versus helper
|
||||
|
|
|
|||
|
|
@ -60,15 +60,15 @@ const styles: Record<IconButtonType, string[]> = {
|
|||
...focusRing,
|
||||
],
|
||||
primary: [
|
||||
"tw-bg-primary-500",
|
||||
"tw-bg-primary-600",
|
||||
"!tw-text-contrast",
|
||||
"tw-border-primary-500",
|
||||
"tw-border-primary-600",
|
||||
"hover:tw-bg-primary-700",
|
||||
"hover:tw-border-primary-700",
|
||||
"focus-visible:before:tw-ring-primary-700",
|
||||
"disabled:tw-opacity-60",
|
||||
"disabled:hover:tw-border-primary-500",
|
||||
"disabled:hover:tw-bg-primary-500",
|
||||
"disabled:hover:tw-border-primary-600",
|
||||
"disabled:hover:tw-bg-primary-600",
|
||||
...focusRing,
|
||||
],
|
||||
secondary: [
|
||||
|
|
@ -88,15 +88,15 @@ const styles: Record<IconButtonType, string[]> = {
|
|||
danger: [
|
||||
"tw-bg-transparent",
|
||||
"!tw-text-danger",
|
||||
"tw-border-danger-500",
|
||||
"tw-border-danger-600",
|
||||
"hover:!tw-text-contrast",
|
||||
"hover:tw-bg-danger-500",
|
||||
"hover:tw-bg-danger-600",
|
||||
"focus-visible:before:tw-ring-primary-700",
|
||||
"disabled:tw-opacity-60",
|
||||
"disabled:hover:tw-border-danger-500",
|
||||
"disabled:hover:tw-border-danger-600",
|
||||
"disabled:hover:tw-bg-transparent",
|
||||
"disabled:hover:!tw-text-danger",
|
||||
"disabled:hover:tw-border-danger-500",
|
||||
"disabled:hover:tw-border-danger-600",
|
||||
...focusRing,
|
||||
],
|
||||
light: [
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const Default: Story = {
|
|||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size">Button</button>
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="secondary"[size]="size">Button</button>
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size">Button</button>
|
||||
<div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
|
||||
<div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="contrast" [size]="size">Button</button>
|
||||
</div>
|
||||
<div class="tw-bg-background-alt2 tw-p-2 tw-inline-block">
|
||||
|
|
@ -111,7 +111,7 @@ export const Contrast: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<div class="tw-bg-primary-500 tw-p-6 tw-w-full tw-inline-block">
|
||||
<div class="tw-bg-primary-600 tw-p-6 tw-w-full tw-inline-block">
|
||||
<button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import { svgIcon } from "../icon";
|
|||
|
||||
export const NoAccess = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="154" height="130" fill="none">
|
||||
<path class="tw-stroke-secondary-500" d="M60.795 112.1h55.135a4 4 0 0 0 4-4V59.65M32.9 51.766V6a4 4 0 0 1 4-4h79.03a4 4 0 0 1 4 4v19.992" stroke-width="4"/>
|
||||
<path class="tw-stroke-secondary-500" d="M46.997 21.222h13.806M69.832 21.222h13.806M93.546 21.222h13.806M46.997 44.188h13.806M69.832 44.188h13.806M93.546 44.188h13.806M50.05 67.02h10.753M69.832 67.02h13.806M93.546 67.02h13.806M46.997 90.118h13.806M69.832 90.118h13.806M93.546 90.118h13.806" stroke-width="2" stroke-linecap="round"/>
|
||||
<path class="tw-stroke-secondary-500" d="M30.914 89.366c10.477 0 18.97-8.493 18.97-18.97 0-10.476-8.493-18.97-18.97-18.97-10.476 0-18.969 8.494-18.969 18.97 0 10.477 8.493 18.97 18.97 18.97ZM2.313 117.279c2.183-16.217 15.44-27.362 29.623-27.362 14.07 0 25.942 11.022 27.898 27.33.167 1.39-.988 2.753-2.719 2.753H5c-1.741 0-2.87-1.366-2.687-2.721Z" stroke-width="4"/>
|
||||
<path class="tw-stroke-danger-500" d="m147.884 50.361-15.89-27.522c-2.31-4-8.083-4-10.392 0l-15.891 27.523c-2.309 4 .578 9 5.196 9h31.781c4.619 0 7.505-5 5.196-9Z" stroke-width="4"/>
|
||||
<path class="tw-stroke-danger-500" d="M126.798 29.406v16.066" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="tw-fill-danger-500" d="M126.798 54.727a2.635 2.635 0 1 0 0-5.27 2.635 2.635 0 0 0 0 5.27Z" />
|
||||
<path class="tw-stroke-secondary-600" d="M60.795 112.1h55.135a4 4 0 0 0 4-4V59.65M32.9 51.766V6a4 4 0 0 1 4-4h79.03a4 4 0 0 1 4 4v19.992" stroke-width="4"/>
|
||||
<path class="tw-stroke-secondary-600" d="M46.997 21.222h13.806M69.832 21.222h13.806M93.546 21.222h13.806M46.997 44.188h13.806M69.832 44.188h13.806M93.546 44.188h13.806M50.05 67.02h10.753M69.832 67.02h13.806M93.546 67.02h13.806M46.997 90.118h13.806M69.832 90.118h13.806M93.546 90.118h13.806" stroke-width="2" stroke-linecap="round"/>
|
||||
<path class="tw-stroke-secondary-600" d="M30.914 89.366c10.477 0 18.97-8.493 18.97-18.97 0-10.476-8.493-18.97-18.97-18.97-10.476 0-18.969 8.494-18.969 18.97 0 10.477 8.493 18.97 18.97 18.97ZM2.313 117.279c2.183-16.217 15.44-27.362 29.623-27.362 14.07 0 25.942 11.022 27.898 27.33.167 1.39-.988 2.753-2.719 2.753H5c-1.741 0-2.87-1.366-2.687-2.721Z" stroke-width="4"/>
|
||||
<path class="tw-stroke-danger-600" d="m147.884 50.361-15.89-27.522c-2.31-4-8.083-4-10.392 0l-15.891 27.523c-2.309 4 .578 9 5.196 9h31.781c4.619 0 7.505-5 5.196-9Z" stroke-width="4"/>
|
||||
<path class="tw-stroke-danger-600" d="M126.798 29.406v16.066" stroke-width="4" stroke-linecap="round"/>
|
||||
<path class="tw-fill-danger-600" d="M126.798 54.727a2.635 2.635 0 1 0 0-5.27 2.635 2.635 0 0 0 0 5.27Z" />
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@ export const Search = svgIcon`
|
|||
<svg width="120" height="120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".49">
|
||||
<path class="tw-fill-secondary-300" fill-rule="evenodd" clip-rule="evenodd" d="M40.36 73.256a30.004 30.004 0 0 0 10.346 1.826c16.282 0 29.482-12.912 29.482-28.84 0-.384-.008-.766-.023-1.145h28.726v39.57H40.36v-11.41Z" />
|
||||
<path class="tw-stroke-secondary-500" d="M21.546 46.241c0 15.929 13.2 28.841 29.482 28.841S80.51 62.17 80.51 46.241c0-15.928-13.2-28.841-29.482-28.841S21.546 30.313 21.546 46.241Z" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path class="tw-fill-secondary-500" d="M35.36 70.595a1.2 1.2 0 0 0-2.4 0h2.4Zm77.475-30.356a2.343 2.343 0 0 1 2.365 2.33h2.4c0-2.593-2.107-4.73-4.765-4.73v2.4Zm2.365 2.33v46.047h2.4V42.57h-2.4Zm0 46.047c0 1.293-1.058 2.33-2.365 2.33v2.4c2.59 0 4.765-2.069 4.765-4.73h-2.4Zm-2.365 2.33h-75.11v2.4h75.11v-2.4Zm-75.11 0a2.343 2.343 0 0 1-2.365-2.33h-2.4c0 2.594 2.107 4.73 4.766 4.73v-2.4Zm-2.365-2.33v-18.02h-2.4v18.02h2.4Zm44.508-48.377h32.967v-2.4H79.868v2.4Z" />
|
||||
<path class="tw-stroke-secondary-500" d="M79.907 45.287h29.114v39.57H40.487V73.051" stroke-width="2" stroke-linejoin="round" />
|
||||
<path class="tw-stroke-secondary-500" d="M57.356 102.56h35.849" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path class="tw-stroke-secondary-500" d="M68.954 92.147v10.413m11.599-10.413v10.413" stroke-width="4" stroke-linejoin="round" />
|
||||
<path class="tw-stroke-secondary-500" d="m27.44 64.945-4.51 4.51L5.72 86.663a3 3 0 0 0 0 4.243l1.238 1.238a3 3 0 0 0 4.243 0L28.41 74.936l4.51-4.51" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path class="tw-stroke-secondary-500" d="M101.293 53.154H85.178m16.115 6.043H90.214m-5.036 0h-7.553m23.668 6.043h-7.05m-5.54 0h-15.61m28.2 6.042H85.178m-5.538 0h-8.562m30.215 6.043H78.632m-5.539 0H60m-5.54 0h-8.057" stroke-width="2" stroke-linecap="round" />
|
||||
<path class="tw-stroke-secondary-500" d="M29.164 33.01h41.529a2.4 2.4 0 0 1 2.4 2.4v6.28a2.4 2.4 0 0 1-2.4 2.4h-41.53a2.4 2.4 0 0 1-2.4-2.4v-6.28a2.4 2.4 0 0 1 2.4-2.4Z" stroke-width="4" />
|
||||
<path class="tw-stroke-secondary-500" d="M22.735 54.16h34.361a2.4 2.4 0 0 1 2.4 2.4v6.28a2.4 2.4 0 0 1-2.4 2.4H28.778m50.358-11.08h-6.161a2.4 2.4 0 0 0-2.4 2.4v6.414a2.266 2.266 0 0 0 2.266 2.265" stroke-width="4" stroke-linecap="round" />
|
||||
<path class="tw-stroke-secondary-600" d="M21.546 46.241c0 15.929 13.2 28.841 29.482 28.841S80.51 62.17 80.51 46.241c0-15.928-13.2-28.841-29.482-28.841S21.546 30.313 21.546 46.241Z" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path class="tw-fill-secondary-600" d="M35.36 70.595a1.2 1.2 0 0 0-2.4 0h2.4Zm77.475-30.356a2.343 2.343 0 0 1 2.365 2.33h2.4c0-2.593-2.107-4.73-4.765-4.73v2.4Zm2.365 2.33v46.047h2.4V42.57h-2.4Zm0 46.047c0 1.293-1.058 2.33-2.365 2.33v2.4c2.59 0 4.765-2.069 4.765-4.73h-2.4Zm-2.365 2.33h-75.11v2.4h75.11v-2.4Zm-75.11 0a2.343 2.343 0 0 1-2.365-2.33h-2.4c0 2.594 2.107 4.73 4.766 4.73v-2.4Zm-2.365-2.33v-18.02h-2.4v18.02h2.4Zm44.508-48.377h32.967v-2.4H79.868v2.4Z" />
|
||||
<path class="tw-stroke-secondary-600" d="M79.907 45.287h29.114v39.57H40.487V73.051" stroke-width="2" stroke-linejoin="round" />
|
||||
<path class="tw-stroke-secondary-600" d="M57.356 102.56h35.849" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path class="tw-stroke-secondary-600" d="M68.954 92.147v10.413m11.599-10.413v10.413" stroke-width="4" stroke-linejoin="round" />
|
||||
<path class="tw-stroke-secondary-600" d="m27.44 64.945-4.51 4.51L5.72 86.663a3 3 0 0 0 0 4.243l1.238 1.238a3 3 0 0 0 4.243 0L28.41 74.936l4.51-4.51" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path class="tw-stroke-secondary-600" d="M101.293 53.154H85.178m16.115 6.043H90.214m-5.036 0h-7.553m23.668 6.043h-7.05m-5.54 0h-15.61m28.2 6.042H85.178m-5.538 0h-8.562m30.215 6.043H78.632m-5.539 0H60m-5.54 0h-8.057" stroke-width="2" stroke-linecap="round" />
|
||||
<path class="tw-stroke-secondary-600" d="M29.164 33.01h41.529a2.4 2.4 0 0 1 2.4 2.4v6.28a2.4 2.4 0 0 1-2.4 2.4h-41.53a2.4 2.4 0 0 1-2.4-2.4v-6.28a2.4 2.4 0 0 1 2.4-2.4Z" stroke-width="4" />
|
||||
<path class="tw-stroke-secondary-600" d="M22.735 54.16h34.361a2.4 2.4 0 0 1 2.4 2.4v6.28a2.4 2.4 0 0 1-2.4 2.4H28.778m50.358-11.08h-6.161a2.4 2.4 0 0 0-2.4 2.4v6.414a2.266 2.266 0 0 0 2.266 2.265" stroke-width="4" stroke-linecap="round" />
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export class BitInputDirective implements BitFormFieldControl {
|
|||
"tw-bg-background-alt",
|
||||
"tw-border",
|
||||
"tw-border-solid",
|
||||
this.hasError ? "tw-border-danger-500" : "tw-border-secondary-500",
|
||||
this.hasError ? "tw-border-danger-600" : "tw-border-secondary-600",
|
||||
"tw-text-main",
|
||||
"tw-placeholder-text-muted",
|
||||
// Rounded
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ export type LinkType = "primary" | "secondary" | "contrast" | "light";
|
|||
|
||||
const linkStyles: Record<LinkType, string[]> = {
|
||||
primary: [
|
||||
"!tw-text-primary-500",
|
||||
"hover:!tw-text-primary-500",
|
||||
"!tw-text-primary-600",
|
||||
"hover:!tw-text-primary-600",
|
||||
"focus-visible:before:tw-ring-primary-700",
|
||||
"disabled:!tw-text-primary-500/60",
|
||||
"disabled:!tw-text-primary-600/60",
|
||||
],
|
||||
secondary: [
|
||||
"!tw-text-main",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import * as stories from "./link.stories";
|
|||
|
||||
# Link / Text button
|
||||
|
||||
Text Links and Buttons use the `primary-500` color and can use either the `<a>` or `<button>` tags.
|
||||
Text Links and Buttons use the `primary-600` color and can use either the `<a>` or `<button>` tags.
|
||||
Choose which based on the action the button takes:
|
||||
|
||||
- if navigating to a new page, use a `<a>`
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const Buttons: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
|
||||
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
|
||||
<div class="tw-block tw-p-2">
|
||||
<button bitLink [linkType]="linkType">Button</button>
|
||||
</div>
|
||||
|
|
@ -61,7 +61,7 @@ export const Anchors: StoryObj<AnchorLinkDirective> = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
|
||||
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
|
||||
<div class="tw-block tw-p-2">
|
||||
<a bitLink [linkType]="linkType" href="#">Anchor</a>
|
||||
</div>
|
||||
|
|
@ -108,7 +108,7 @@ export const Disabled: Story = {
|
|||
template: `
|
||||
<button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
|
||||
<button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
|
||||
<div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
|
||||
<div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
|
||||
<button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="tw-my-2 tw-border-0 tw-border-t tw-border-solid tw-border-t-secondary-500"
|
||||
class="tw-my-2 tw-border-0 tw-border-t tw-border-solid tw-border-t-secondary-600"
|
||||
role="separator"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<ng-template>
|
||||
<div
|
||||
(click)="closed.emit()"
|
||||
class="tw-flex tw-shrink-0 tw-flex-col tw-rounded tw-border tw-border-solid tw-border-secondary-500 tw-bg-background tw-bg-clip-padding tw-py-2 tw-overflow-y-auto"
|
||||
class="tw-flex tw-shrink-0 tw-flex-col tw-rounded tw-border tw-border-solid tw-border-secondary-600 tw-bg-background tw-bg-clip-padding tw-py-2 tw-overflow-y-auto"
|
||||
[attr.role]="ariaRole"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
cdkTrapFocus
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
$ng-select-highlight: rgb(var(--color-primary-700)) !default;
|
||||
$ng-select-primary-text: rgb(var(--color-text-main)) !default;
|
||||
$ng-select-disabled-text: rgb(var(--color-secondary-100)) !default;
|
||||
$ng-select-border: rgb(var(--color-secondary-500)) !default;
|
||||
$ng-select-border: rgb(var(--color-secondary-600)) !default;
|
||||
$ng-select-border-radius: 4px !default;
|
||||
$ng-select-bg: rgb(var(--color-background-alt)) !default;
|
||||
$ng-select-selected: transparent !default;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export const Default: Story = {
|
|||
<div class="tw-mt-32">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
>
|
||||
|
|
@ -119,7 +119,7 @@ export const InitiallyOpen: Story = {
|
|||
<div class="tw-mt-32">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
[popoverOpen]="true"
|
||||
#triggerRef="popoverTrigger"
|
||||
|
|
@ -145,7 +145,7 @@ export const RightStart: Story = {
|
|||
<div class="tw-mt-32">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -168,7 +168,7 @@ export const RightCenter: Story = {
|
|||
<div class="tw-mt-32">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -191,7 +191,7 @@ export const RightEnd: Story = {
|
|||
<div class="tw-mt-32">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -214,7 +214,7 @@ export const LeftStart: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -237,7 +237,7 @@ export const LeftCenter: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -259,7 +259,7 @@ export const LeftEnd: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -282,7 +282,7 @@ export const BelowStart: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-center">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -305,7 +305,7 @@ export const BelowCenter: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-center">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -328,7 +328,7 @@ export const BelowEnd: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-center">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -351,7 +351,7 @@ export const AboveStart: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-center">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -374,7 +374,7 @@ export const AboveCenter: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-center">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
@ -397,7 +397,7 @@ export const AboveEnd: Story = {
|
|||
<div class="tw-mt-32 tw-flex tw-justify-center">
|
||||
<button
|
||||
type="button"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-500"
|
||||
class="tw-border-none tw-bg-transparent tw-text-primary-600"
|
||||
[bitPopoverTriggerFor]="myPopover"
|
||||
#triggerRef="popoverTrigger"
|
||||
[position]="'${args.position}'"
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ const SizeClasses: Record<SizeTypes, string[]> = {
|
|||
};
|
||||
|
||||
const BackgroundClasses: Record<BackgroundTypes, string[]> = {
|
||||
danger: ["tw-bg-danger-500"],
|
||||
primary: ["tw-bg-primary-500"],
|
||||
success: ["tw-bg-success-500"],
|
||||
warning: ["tw-bg-warning-500"],
|
||||
danger: ["tw-bg-danger-600"],
|
||||
primary: ["tw-bg-primary-600"],
|
||||
success: ["tw-bg-success-600"],
|
||||
warning: ["tw-bg-warning-600"],
|
||||
};
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@ context of the implementation.
|
|||
|
||||
For a strength indicator use the following styles for fill:
|
||||
|
||||
- **Weak:** `danger-500`
|
||||
- **Weak2:** `warning-500`
|
||||
- **Good:** `primary-500`
|
||||
- **Strong:** `success-500`
|
||||
- **Weak:** `danger-600`
|
||||
- **Weak2:** `warning-600`
|
||||
- **Good:** `primary-600`
|
||||
- **Strong:** `success-600`
|
||||
|
||||
## Accessibility
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
|
|||
"tw-rounded-full",
|
||||
"tw-border",
|
||||
"tw-border-solid",
|
||||
"tw-border-secondary-500",
|
||||
"tw-border-secondary-600",
|
||||
"tw-w-3.5",
|
||||
"tw-h-3.5",
|
||||
"tw-mr-1.5",
|
||||
|
|
@ -50,7 +50,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
|
|||
"disabled:tw-bg-secondary-100",
|
||||
|
||||
"checked:tw-bg-text-contrast",
|
||||
"checked:tw-border-primary-500",
|
||||
"checked:tw-border-primary-600",
|
||||
|
||||
"checked:hover:tw-border",
|
||||
"checked:hover:tw-border-primary-700",
|
||||
|
|
@ -58,7 +58,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
|
|||
"[&>label:hover]:checked:tw-bg-primary-700",
|
||||
"[&>label:hover]:checked:tw-border-primary-700",
|
||||
|
||||
"checked:before:tw-bg-primary-500",
|
||||
"checked:before:tw-bg-primary-600",
|
||||
|
||||
"checked:disabled:tw-border-secondary-100",
|
||||
"checked:disabled:tw-bg-secondary-100",
|
||||
|
|
|
|||
|
|
@ -26,29 +26,29 @@ export const Table = (args) => (
|
|||
</tbody>
|
||||
<tbody>
|
||||
{Row("primary-300")}
|
||||
{Row("primary-500")}
|
||||
{Row("primary-600")}
|
||||
{Row("primary-700")}
|
||||
</tbody>
|
||||
<tbody>
|
||||
{Row("secondary-100")}
|
||||
{Row("secondary-300")}
|
||||
{Row("secondary-500")}
|
||||
{Row("secondary-600")}
|
||||
{Row("secondary-700")}
|
||||
</tbody>
|
||||
<tbody>
|
||||
{Row("success-500")}
|
||||
{Row("success-600")}
|
||||
{Row("success-700")}
|
||||
</tbody>
|
||||
<tbody>
|
||||
{Row("danger-500")}
|
||||
{Row("danger-600")}
|
||||
{Row("danger-700")}
|
||||
</tbody>
|
||||
<tbody>
|
||||
{Row("warning-500")}
|
||||
{Row("warning-600")}
|
||||
{Row("warning-700")}
|
||||
</tbody>
|
||||
<tbody>
|
||||
{Row("info-500")}
|
||||
{Row("info-600")}
|
||||
{Row("info-700")}
|
||||
</tbody>
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -49,14 +49,14 @@ Only use Tailwind for styling. No Bootstrap or other custom CSS is allowed.
|
|||
This is easy to verify. Bitwarden prefixes all Tailwind classes with `tw-`. If you see a class
|
||||
without this prefix, it probably shouldn't be there.
|
||||
|
||||
<div class="tw-bg-danger-500/10 tw-p-4">
|
||||
<div class="tw-bg-danger-600/10 tw-p-4">
|
||||
<span class="tw-font-bold tw-text-danger">Bad (Bootstrap)</span>
|
||||
```html
|
||||
<div class="mb-2"></div>
|
||||
```
|
||||
</div>
|
||||
|
||||
<div class="tw-bg-success-500/10 tw-p-4">
|
||||
<div class="tw-bg-success-600/10 tw-p-4">
|
||||
<span class="tw-font-bold tw-text-success">Good (Tailwind)</span>
|
||||
```html
|
||||
<div class="tw-mb-2"></div>
|
||||
|
|
@ -65,7 +65,7 @@ without this prefix, it probably shouldn't be there.
|
|||
|
||||
**Exception:** Icon font classes, prefixed with `bwi`, are allowed.
|
||||
|
||||
<div class="tw-bg-success-500/10 tw-p-4">
|
||||
<div class="tw-bg-success-600/10 tw-p-4">
|
||||
<span class="tw-font-bold tw-text-success">Good (Icons)</span>
|
||||
```html
|
||||
<i class="bwi bwi-spinner bwi-lg bwi-spin" aria-hidden="true"></i>
|
||||
|
|
@ -79,7 +79,7 @@ The CL has form components that integrate with Angular's reactive forms: `bit-fo
|
|||
reactive forms to make use of these components. Review the
|
||||
[form component docs](?path=/docs/component-library-form--docs).
|
||||
|
||||
<div class="tw-bg-danger-500/10 tw-p-4">
|
||||
<div class="tw-bg-danger-600/10 tw-p-4">
|
||||
<span class="tw-text-danger tw-font-bold">Bad</span>
|
||||
```html
|
||||
<form #form (ngSubmit)="submit()">
|
||||
|
|
@ -88,7 +88,7 @@ reactive forms to make use of these components. Review the
|
|||
```
|
||||
</div>
|
||||
|
||||
<div class="tw-bg-success-500/10 tw-p-4">
|
||||
<div class="tw-bg-success-600/10 tw-p-4">
|
||||
<span class="tw-text-success tw-font-bold">Good</span>
|
||||
```html
|
||||
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
||||
|
|
@ -105,14 +105,14 @@ fully migrated should have no reference to the `ModalService`.
|
|||
|
||||
1. Update the template to use CL components:
|
||||
|
||||
<div class="tw-bg-danger-500/10 tw-p-4">
|
||||
<div class="tw-bg-danger-600/10 tw-p-4">
|
||||
```html
|
||||
<!-- FooDialogComponent -->
|
||||
<div class="modal fade" role="dialog" aria-modal="true">...</div>
|
||||
```
|
||||
</div>
|
||||
|
||||
<div class="tw-bg-success-500/10 tw-p-4">
|
||||
<div class="tw-bg-success-600/10 tw-p-4">
|
||||
```html
|
||||
<!-- FooDialogComponent -->
|
||||
<bit-dialog>...</bit-dialog>
|
||||
|
|
@ -121,7 +121,7 @@ fully migrated should have no reference to the `ModalService`.
|
|||
|
||||
2. Create a static `open` method on the component, that calls `DialogService.open`:
|
||||
|
||||
<div class="tw-bg-success-500/10 tw-p-4">
|
||||
<div class="tw-bg-success-600/10 tw-p-4">
|
||||
```ts
|
||||
export class FooDialogComponent {
|
||||
//...
|
||||
|
|
@ -137,7 +137,7 @@ fully migrated should have no reference to the `ModalService`.
|
|||
3. If you need to pass data into the dialog, pass it to `open` as a parameter and inject
|
||||
`DIALOG_DATA` into the component's constructor.
|
||||
|
||||
<div class="tw-bg-success-500/10 tw-p-4">
|
||||
<div class="tw-bg-success-600/10 tw-p-4">
|
||||
```ts
|
||||
export type FooDialogParams = {
|
||||
bar: string;
|
||||
|
|
@ -157,9 +157,9 @@ fully migrated should have no reference to the `ModalService`.
|
|||
4. Replace calls to `ModalService.open` or `ModalService.openViewRef` with the newly created static
|
||||
`open` method:
|
||||
|
||||
<div class="tw-bg-danger-500/10 tw-p-4">`this.modalService.open(FooDialogComponent);`</div>
|
||||
<div class="tw-bg-danger-600/10 tw-p-4">`this.modalService.open(FooDialogComponent);`</div>
|
||||
|
||||
<div class="tw-bg-success-500/10 tw-p-4">`FooDialogComponent.open(this.dialogService);`</div>
|
||||
<div class="tw-bg-success-600/10 tw-p-4">`FooDialogComponent.open(this.dialogService);`</div>
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export class TabListItemDirective implements FocusableOption {
|
|||
return ["!tw-text-muted", "hover:!tw-text-muted"];
|
||||
}
|
||||
if (this.active) {
|
||||
return ["!tw-text-primary-500", "hover:!tw-text-primary-700"];
|
||||
return ["!tw-text-primary-600", "hover:!tw-text-primary-700"];
|
||||
}
|
||||
return ["!tw-text-main", "hover:!tw-text-main"];
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@ export class TabListItemDirective implements FocusableOption {
|
|||
return [
|
||||
"tw--mb-px",
|
||||
"tw-border-x-secondary-300",
|
||||
"tw-border-t-primary-500",
|
||||
"tw-border-t-primary-600",
|
||||
"tw-border-b",
|
||||
"tw-border-b-background",
|
||||
"!tw-bg-background",
|
||||
|
|
|
|||
|
|
@ -50,10 +50,10 @@ export class ToggleComponent<TValue> {
|
|||
"peer-focus:tw-outline-none",
|
||||
"peer-focus:tw-ring",
|
||||
"peer-focus:tw-ring-offset-2",
|
||||
"peer-focus:tw-ring-primary-500",
|
||||
"peer-focus:tw-ring-primary-600",
|
||||
"peer-focus:tw-z-10",
|
||||
"peer-focus:tw-bg-primary-500",
|
||||
"peer-focus:tw-border-primary-500",
|
||||
"peer-focus:tw-bg-primary-600",
|
||||
"peer-focus:tw-border-primary-600",
|
||||
"peer-focus:!tw-text-contrast",
|
||||
|
||||
"hover:tw-no-underline",
|
||||
|
|
@ -61,8 +61,8 @@ export class ToggleComponent<TValue> {
|
|||
"hover:tw-border-text-muted",
|
||||
"hover:!tw-text-contrast",
|
||||
|
||||
"peer-checked:tw-bg-primary-500",
|
||||
"peer-checked:tw-border-primary-500",
|
||||
"peer-checked:tw-bg-primary-600",
|
||||
"peer-checked:tw-border-primary-600",
|
||||
"peer-checked:!tw-text-contrast",
|
||||
"tw-py-1.5",
|
||||
"tw-px-3",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
@import "./reset.css";
|
||||
|
||||
/**
|
||||
Note that the value of the *-600 colors is currently equivalent to the value
|
||||
of the *-500 variant of that color. This is a temporary change to make BW-42
|
||||
updates easier.
|
||||
|
||||
TODO remove comment when the color palette portion of BW-42 is completed.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--color-transparent-hover: rgb(0 0 0 / 0.03);
|
||||
|
||||
|
|
@ -10,24 +18,24 @@
|
|||
--color-background-alt4: 13 60 119;
|
||||
|
||||
--color-primary-300: 103 149 232;
|
||||
--color-primary-500: 23 93 220;
|
||||
--color-primary-600: 23 93 220;
|
||||
--color-primary-700: 18 82 163;
|
||||
|
||||
--color-secondary-100: 240 240 240;
|
||||
--color-secondary-300: 206 212 220;
|
||||
--color-secondary-500: 137 146 159;
|
||||
--color-secondary-600: 137 146 159;
|
||||
--color-secondary-700: 33 37 41;
|
||||
|
||||
--color-success-500: 1 126 69;
|
||||
--color-success-600: 1 126 69;
|
||||
--color-success-700: 0 85 46;
|
||||
|
||||
--color-danger-500: 200 53 34;
|
||||
--color-danger-600: 200 53 34;
|
||||
--color-danger-700: 152 41 27;
|
||||
|
||||
--color-warning-500: 139 102 9;
|
||||
--color-warning-600: 139 102 9;
|
||||
--color-warning-700: 105 77 5;
|
||||
|
||||
--color-info-500: 85 85 85;
|
||||
--color-info-600: 85 85 85;
|
||||
--color-info-700: 59 58 58;
|
||||
|
||||
--color-text-main: 33 37 41;
|
||||
|
|
@ -53,24 +61,24 @@
|
|||
--color-background-alt4: 16 18 21;
|
||||
|
||||
--color-primary-300: 23 93 220;
|
||||
--color-primary-500: 106 153 240;
|
||||
--color-primary-600: 106 153 240;
|
||||
--color-primary-700: 180 204 249;
|
||||
|
||||
--color-secondary-100: 47 52 61;
|
||||
--color-secondary-300: 110 118 137;
|
||||
--color-secondary-500: 186 192 206;
|
||||
--color-secondary-600: 186 192 206;
|
||||
--color-secondary-700: 255 255 255;
|
||||
|
||||
--color-success-500: 82 224 124;
|
||||
--color-success-600: 82 224 124;
|
||||
--color-success-700: 168 239 190;
|
||||
|
||||
--color-danger-500: 255 141 133;
|
||||
--color-danger-600: 255 141 133;
|
||||
--color-danger-700: 255 191 187;
|
||||
|
||||
--color-warning-500: 255 235 102;
|
||||
--color-warning-600: 255 235 102;
|
||||
--color-warning-700: 255 245 179;
|
||||
|
||||
--color-info-500: 164 176 198;
|
||||
--color-info-600: 164 176 198;
|
||||
--color-info-700: 209 215 226;
|
||||
|
||||
--color-text-main: 255 255 255;
|
||||
|
|
@ -92,24 +100,24 @@
|
|||
--color-background-alt4: 67 76 94;
|
||||
|
||||
--color-primary-300: 108 153 166;
|
||||
--color-primary-500: 136 192 208;
|
||||
--color-primary-600: 136 192 208;
|
||||
--color-primary-700: 160 224 242;
|
||||
|
||||
--color-secondary-100: 76 86 106;
|
||||
--color-secondary-300: 94 105 125;
|
||||
--color-secondary-500: 216 222 233;
|
||||
--color-secondary-600: 216 222 233;
|
||||
--color-secondary-700: 255 255 255;
|
||||
|
||||
--color-success-500: 163 190 140;
|
||||
--color-success-600: 163 190 140;
|
||||
--color-success-700: 144 170 122;
|
||||
|
||||
--color-danger-500: 228 129 139;
|
||||
--color-danger-600: 228 129 139;
|
||||
--color-danger-700: 191 97 106;
|
||||
|
||||
--color-warning-500: 235 203 139;
|
||||
--color-warning-600: 235 203 139;
|
||||
--color-warning-700: 210 181 121;
|
||||
|
||||
--color-info-500: 129 161 193;
|
||||
--color-info-600: 129 161 193;
|
||||
--color-info-700: 94 129 172;
|
||||
|
||||
--color-text-main: 229 233 240;
|
||||
|
|
@ -131,24 +139,24 @@
|
|||
--color-background-alt4: 0 43 54;
|
||||
|
||||
--color-primary-300: 42 161 152;
|
||||
--color-primary-500: 133 153 0;
|
||||
--color-primary-600: 133 153 0;
|
||||
--color-primary-700: 192 203 123;
|
||||
|
||||
--color-secondary-100: 31 72 87;
|
||||
--color-secondary-300: 101 123 131;
|
||||
--color-secondary-500: 131 148 150;
|
||||
--color-secondary-600: 131 148 150;
|
||||
--color-secondary-700: 238 232 213;
|
||||
|
||||
--color-success-500: 133 153 0;
|
||||
--color-success-600: 133 153 0;
|
||||
--color-success-700: 192 203 123;
|
||||
|
||||
--color-danger-500: 220 50 47;
|
||||
--color-danger-600: 220 50 47;
|
||||
--color-danger-700: 223 135 134;
|
||||
|
||||
--color-warning-500: 181 137 0;
|
||||
--color-warning-600: 181 137 0;
|
||||
--color-warning-700: 220 189 92;
|
||||
|
||||
--color-info-500: 133 153 0;
|
||||
--color-info-600: 133 153 0;
|
||||
--color-info-700: 192 203 123;
|
||||
|
||||
--color-text-main: 253 246 227;
|
||||
|
|
|
|||
|
|
@ -25,29 +25,29 @@ module.exports = {
|
|||
black: colors.black,
|
||||
primary: {
|
||||
300: rgba("--color-primary-300"),
|
||||
500: rgba("--color-primary-500"),
|
||||
600: rgba("--color-primary-600"),
|
||||
700: rgba("--color-primary-700"),
|
||||
},
|
||||
secondary: {
|
||||
100: rgba("--color-secondary-100"),
|
||||
300: rgba("--color-secondary-300"),
|
||||
500: rgba("--color-secondary-500"),
|
||||
600: rgba("--color-secondary-600"),
|
||||
700: rgba("--color-secondary-700"),
|
||||
},
|
||||
success: {
|
||||
500: rgba("--color-success-500"),
|
||||
600: rgba("--color-success-600"),
|
||||
700: rgba("--color-success-700"),
|
||||
},
|
||||
danger: {
|
||||
500: rgba("--color-danger-500"),
|
||||
600: rgba("--color-danger-600"),
|
||||
700: rgba("--color-danger-700"),
|
||||
},
|
||||
warning: {
|
||||
500: rgba("--color-warning-500"),
|
||||
600: rgba("--color-warning-600"),
|
||||
700: rgba("--color-warning-700"),
|
||||
},
|
||||
info: {
|
||||
500: rgba("--color-info-500"),
|
||||
600: rgba("--color-info-600"),
|
||||
700: rgba("--color-info-700"),
|
||||
},
|
||||
text: {
|
||||
|
|
@ -71,13 +71,13 @@ module.exports = {
|
|||
contrast: rgba("--color-text-contrast"),
|
||||
alt2: rgba("--color-text-alt2"),
|
||||
code: rgba("--color-text-code"),
|
||||
success: rgba("--color-success-500"),
|
||||
danger: rgba("--color-danger-500"),
|
||||
warning: rgba("--color-warning-500"),
|
||||
info: rgba("--color-info-500"),
|
||||
success: rgba("--color-success-600"),
|
||||
danger: rgba("--color-danger-600"),
|
||||
warning: rgba("--color-warning-600"),
|
||||
info: rgba("--color-info-600"),
|
||||
primary: {
|
||||
300: rgba("--color-primary-300"),
|
||||
500: rgba("--color-primary-500"),
|
||||
600: rgba("--color-primary-600"),
|
||||
700: rgba("--color-primary-700"),
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user