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

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;