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

[CL-404] Switch to primary-600 for all focus indicators (#11015)

Browse Source
This commit is contained in:
Victoria League
2024-09-13 14:29:33 -04:00
committed by GitHub
parent a9397705c9
commit 0a861e5ee0
13 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
View File

@@ -6,7 +6,7 @@
<div class="tw-flex tw-flex-1">
<a
*ngFor="let button of navButtons"
class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-500"
class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
[ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
[title]="button.label"
[routerLink]="button.page"

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

@@ -49,7 +49,7 @@ export class BadgeDirective implements FocusableElement {
"focus-visible:tw-outline-none",
"focus-visible:tw-ring-2",
"focus-visible:tw-ring-offset-2",
"focus-visible:tw-ring-primary-500",
"focus-visible:tw-ring-primary-600",
"disabled:tw-bg-secondary-300",
"disabled:hover:tw-bg-secondary-300",
"disabled:tw-border-secondary-300",

2
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-2",
"focus-visible:tw-ring-offset-2",
"focus-visible:tw-ring-primary-500",
"focus-visible:tw-ring-primary-600",
"focus-visible:tw-z-10",
];

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

@@ -39,7 +39,7 @@ export class CheckboxComponent implements BitFormControlAbstraction {
// if it exists, the parent form control handles focus
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-500",
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
"disabled:tw-cursor-auto",
"disabled:tw-border",

2
libs/components/src/chip-select/chip-select.component.html
View File

@@ -7,7 +7,7 @@
'tw-bg-transparent hover:tw-bg-background-alt !tw-text-muted': !selectedOption && !disabled,
'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
'tw-border-text-muted': !disabled,
'tw-ring-2 tw-ring-primary-700 tw-ring-offset-1': focusVisibleWithin(),
'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
}"
>
<!-- Primary button -->

2
libs/components/src/form-control/form-control.component.html
View File

@@ -1,5 +1,5 @@
<label
class="tw-transition tw-select-none tw-mb-0 tw-inline-flex tw-rounded tw-p-0.5 has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-500"
class="tw-transition tw-select-none tw-mb-0 tw-inline-flex tw-rounded tw-p-0.5 has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
[ngClass]="[formControl.disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
>
<ng-content></ng-content>

2
libs/components/src/form-field/form-field.component.html
View File

@@ -89,7 +89,7 @@
!disableReadOnlyBorder && !defaultContentIsFocused(),
'tw-border-b-2 tw-border-transparent tw-pb-[4px]':
disableReadOnlyBorder && !defaultContentIsFocused(),
'tw-border-b-2 tw-border-primary-500': defaultContentIsFocused(),
'tw-border-b-2 tw-border-primary-600': defaultContentIsFocused(),
}"
>
<div

6
libs/components/src/form-field/form-field.component.ts
View File

@@ -48,15 +48,15 @@ export class BitFormFieldComponent implements AfterContentChecked {
const groupClasses = [
this.input.hasError
? "group-hover/bit-form-field:tw-border-danger-700"
: "group-hover/bit-form-field:tw-border-primary-500",
: "group-hover/bit-form-field:tw-border-primary-600",
// the next 2 selectors override the above hover selectors when the input (or text area) is non-interactive (i.e. readonly, disabled)
"group-has-[input:read-only]/bit-form-field:group-hover/bit-form-field:tw-border-secondary-500",
"group-has-[textarea:read-only]/bit-form-field:group-hover/bit-form-field:tw-border-secondary-500",
"group-focus-within/bit-form-field:tw-outline-none",
shouldFocusBorderAppear ? "group-focus-within/bit-form-field:tw-border-2" : "",
shouldFocusBorderAppear ? "group-focus-within/bit-form-field:tw-border-primary-500" : "",
shouldFocusBorderAppear ? "group-focus-within/bit-form-field:tw-border-primary-600" : "",
shouldFocusBorderAppear
? "group-focus-within/bit-form-field:group-hover/bit-form-field:tw-border-primary-500"
? "group-focus-within/bit-form-field:group-hover/bit-form-field:tw-border-primary-600"
: "",
];

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

@@ -41,8 +41,8 @@ const styles: Record<IconButtonType, string[]> = {
"!tw-text-main",
"tw-border-transparent",
"hover:tw-bg-transparent-hover",
"hover:tw-border-primary-500",
"focus-visible:before:tw-ring-primary-500",
"hover:tw-border-primary-600",
"focus-visible:before:tw-ring-primary-600",
"disabled:!tw-text-secondary-300",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
@@ -53,8 +53,8 @@ const styles: Record<IconButtonType, string[]> = {
"!tw-text-muted",
"tw-border-transparent",
"hover:tw-bg-transparent-hover",
"hover:tw-border-primary-500",
"focus-visible:before:tw-ring-primary-500",
"hover:tw-border-primary-600",
"focus-visible:before:tw-ring-primary-600",
"disabled:!tw-text-secondary-300",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
@@ -64,9 +64,9 @@ const styles: Record<IconButtonType, string[]> = {
"tw-bg-primary-600",
"!tw-text-contrast",
"tw-border-primary-600",
"hover:tw-bg-primary-500",
"hover:tw-border-primary-500",
"focus-visible:before:tw-ring-primary-500",
"hover:tw-bg-primary-600",
"hover:tw-border-primary-600",
"focus-visible:before:tw-ring-primary-600",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-primary-600",
"disabled:hover:tw-bg-primary-600",
@@ -78,7 +78,7 @@ const styles: Record<IconButtonType, string[]> = {
"tw-border-text-muted",
"hover:!tw-text-contrast",
"hover:tw-bg-text-muted",
"focus-visible:before:tw-ring-primary-500",
"focus-visible:before:tw-ring-primary-600",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-text-muted",
"disabled:hover:tw-bg-transparent",
@@ -91,8 +91,8 @@ const styles: Record<IconButtonType, string[]> = {
"tw-border-transparent",
"hover:!tw-text-danger-600",
"hover:tw-bg-transparent",
"hover:tw-border-primary-500",
"focus-visible:before:tw-ring-primary-500",
"hover:tw-border-primary-600",
"focus-visible:before:tw-ring-primary-600",
"disabled:!tw-text-secondary-300",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",

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

@@ -128,15 +128,15 @@ export class BitInputDirective implements BitFormFieldControl {
"tw-py-2",
"tw-rounded-lg",
// Hover
this.hasError ? "hover:tw-border-danger-700" : "hover:tw-border-primary-500",
this.hasError ? "hover:tw-border-danger-700" : "hover:tw-border-primary-600",
// Focus
"focus:hover:tw-border-primary-500",
"focus:hover:tw-border-primary-600",
"disabled:tw-bg-secondary-100",
"disabled:hover:tw-border-secondary-500",
"focus:tw-border-primary-500",
"focus:tw-border-primary-600",
"focus:tw-ring-1",
"focus:tw-ring-inset",
"focus:tw-ring-primary-500",
"focus:tw-ring-primary-600",
"focus:tw-z-10",
];
}

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

@@ -2,7 +2,7 @@
class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg tw-mb-1.5"
[ngClass]="
focusVisibleWithin()
? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-700 tw-border-transparent'
? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'
: 'tw-border-b-secondary-300 [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-border-b-transparent'
"
>

2
libs/components/src/menu/menu-item.directive.ts
View File

@@ -25,7 +25,7 @@ export class MenuItemDirective implements FocusableOption {
"focus-visible:tw-ring-2",
"focus-visible:tw-rounded-lg",
"focus-visible:tw-ring-inset",
"focus-visible:tw-ring-primary-500",
"focus-visible:tw-ring-primary-600",
"active:!tw-ring-0",
"active:!tw-ring-offset-0",
"disabled:!tw-text-muted",

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

@@ -37,7 +37,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
// if it exists, the parent form control handles focus
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-500",
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
"before:tw-content-['']",
"before:tw-transition",