bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +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

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