bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-22 11:13:46 +00:00
Code Issues Releases Wiki Activity

[CL-254] Rename 500 colors to 600 to prep for UI redesign (#8623)

Browse Source 
* [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
2024-04-05 10:58:32 -04:00
committed by GitHub
parent fb51aa570d
commit 09169cac71
56 changed files with 253 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
libs/angular/src/auth/icons/create-passkey-failed.icon.ts
View File

@@ -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>
`;

16
libs/angular/src/auth/icons/create-passkey.icon.ts
View File

@@ -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>
`;

12
libs/auth/src/angular/icons/user-verification-biometrics-fingerprint.icon.ts
View File

@@ -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>
`;

4
libs/auth/src/icons/bitwarden-logo.ts
View File

@@ -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
libs/auth/src/icons/icon-lock.ts
View File

@@ -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>
`;

2
libs/components/src/avatar/avatar.component.ts
View File

@@ -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() {

4
libs/components/src/avatar/avatar.mdx
View File

@@ -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

10
libs/components/src/badge/badge.directive.ts
View File

@@ -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[]> = {

8
libs/components/src/banner/banner.component.ts
View File

@@ -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";
}
}
}

8
libs/components/src/button/button.component.spec.ts
View File

@@ -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();

16
libs/components/src/button/button.component.ts
View File

@@ -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,

8
libs/components/src/callout/callout.component.ts
View File

@@ -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";
}
}

10
libs/components/src/checkbox/checkbox.component.ts
View File

@@ -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",

2
libs/components/src/color-password/color-password.component.ts
View File

@@ -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")

2
libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.component.ts
View File

@@ -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",

10
libs/components/src/dialog/simple-dialog/simple-dialog.mdx
View File

@@ -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

2
libs/components/src/form-field/prefix.directive.ts
View File

@@ -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",
];

2
libs/components/src/form/forms.mdx
View File

@@ -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

16
libs/components/src/icon-button/icon-button.component.ts
View File

@@ -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: [

4
libs/components/src/icon-button/icon-button.stories.ts
View File

@@ -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>
`,

12
libs/components/src/icon/icons/no-access.ts
View File

@@ -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>
`;

18
libs/components/src/icon/icons/search.ts
View File

@@ -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>
`;

2
libs/components/src/input/input.directive.ts
View File

@@ -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

6
libs/components/src/link/link.directive.ts
View File

@@ -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",

2
libs/components/src/link/link.mdx
View File

@@ -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>`

6
libs/components/src/link/link.stories.ts
View File

@@ -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>
`,

2
libs/components/src/menu/menu-divider.component.html
View File

@@ -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>

2
libs/components/src/menu/menu.component.html
View File

@@ -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

2
libs/components/src/multi-select/scss/bw.theme.scss
View File

@@ -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;

28
libs/components/src/popover/popover.stories.ts
View File

@@ -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}'"

8
libs/components/src/progress/progress.component.ts
View File

@@ -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({

8
libs/components/src/progress/progress.mdx
View File

@@ -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

6
libs/components/src/radio-button/radio-input.component.ts
View File

@@ -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",

12
libs/components/src/stories/colors.mdx
View File

@@ -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>

22
libs/components/src/stories/migration.mdx
View File

@@ -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

4
libs/components/src/tabs/shared/tab-list-item.directive.ts
View File

@@ -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",

10
libs/components/src/toggle-group/toggle.component.ts
View File

@@ -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",

56
libs/components/src/tw-theme.css
View File

@@ -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;

22
libs/components/tailwind.config.base.js
View File

@@ -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"),
},
},