bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-13 23:13:36 +00:00
Code Issues Releases Wiki Activity

[CL-230] [CL-296] Update button styles (#9345)

Browse Source 
Co-authored-by: Will Martin <contact@willmartian.com>
This commit is contained in:
Victoria League
2024-05-28 15:00:58 -04:00
committed by GitHub
parent 537a5b93f3
commit 42a98bc6b4
5 changed files with 52 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstrac
const focusRing = [
"focus-visible:tw-ring",
"focus-visible:tw-ring-offset-2",
"focus-visible:tw-ring-primary-700",
"focus-visible:tw-ring-primary-500",
"focus-visible:tw-z-10",
];
@@ -17,37 +17,24 @@ const buttonStyles: Record<ButtonType, string[]> = {
"!tw-text-contrast",
"hover:tw-bg-primary-700",
"hover:tw-border-primary-700",
"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",
...focusRing,
],
secondary: [
"tw-bg-transparent",
"tw-border-text-muted",
"!tw-text-muted",
"hover:tw-bg-text-muted",
"hover:tw-border-text-muted",
"hover:!tw-text-contrast",
"disabled:tw-bg-transparent",
"disabled:tw-border-text-muted/60",
"disabled:!tw-text-muted/60",
"disabled:tw-cursor-not-allowed",
"tw-border-primary-600",
"!tw-text-primary-600",
"hover:tw-bg-transparent",
"hover:tw-border-primary-700",
"hover:!tw-text-primary-700",
...focusRing,
],
danger: [
"tw-bg-transparent",
"tw-border-danger-600",
"!tw-text-danger",
"hover:tw-bg-danger-600",
"hover:tw-border-danger-600",
"hover:!tw-text-contrast",
"disabled:tw-bg-transparent",
"disabled:tw-border-danger-600/60",
"disabled:!tw-text-danger/60",
"disabled:tw-cursor-not-allowed",
"hover:tw-bg-transparent",
"hover:tw-border-danger-700",
"hover:!tw-text-danger-700",
...focusRing,
],
unstyled: [],
@@ -64,14 +51,22 @@ export class ButtonComponent implements ButtonLikeAbstraction {
"tw-font-semibold",
"tw-py-1.5",
"tw-px-3",
"tw-rounded",
"tw-rounded-full",
"tw-transition",
"tw-border",
"tw-border-2",
"tw-border-solid",
"tw-text-center",
"tw-no-underline",
"hover:tw-no-underline",
"hover:tw-underline",
"focus:tw-outline-none",
"disabled:tw-bg-secondary-300",
"disabled:hover:tw-bg-secondary-300",
"disabled:tw-border-secondary-300",
"disabled:hover:tw-border-secondary-300",
"disabled:!tw-text-muted",
"disabled:hover:!tw-text-muted",
"disabled:tw-cursor-not-allowed",
"disabled:hover:tw-no-underline",
]
.concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
.concat(buttonStyles[this.buttonType ?? "secondary"]);