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-229] Update icon button styles (#10405)

Browse Source
This commit is contained in:
Victoria League
2024-08-08 11:57:30 -04:00
committed by GitHub
parent f545dca3b6
commit 46d17788c0
6 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { Input, HostBinding, Component } from "@angular/core";
import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
const focusRing = [
"focus-visible:tw-ring",
"focus-visible:tw-ring-2",
"focus-visible:tw-ring-offset-2",
"focus-visible:tw-ring-primary-500",
"focus-visible:tw-z-10",

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

@@ -15,10 +15,10 @@ const focusRing = [
"before:tw-content-['']",
"before:tw-block",
"before:tw-absolute",
"before:-tw-inset-[3px]",
"before:tw-rounded-md",
"before:-tw-inset-[2px]",
"before:tw-rounded-lg",
"before:tw-transition",
"before:tw-ring",
"before:tw-ring-2",
"before:tw-ring-transparent",
"focus-visible:tw-z-10",
];
@@ -41,9 +41,9 @@ const styles: Record<IconButtonType, string[]> = {
"!tw-text-main",
"tw-border-transparent",
"hover:tw-bg-transparent-hover",
"hover:tw-border-text-main",
"focus-visible:before:tw-ring-text-main",
"disabled:tw-opacity-60",
"hover:tw-border-primary-500",
"focus-visible:before:tw-ring-primary-500",
"disabled:!tw-text-secondary-300",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
...focusRing,
@@ -53,9 +53,9 @@ const styles: Record<IconButtonType, string[]> = {
"!tw-text-muted",
"tw-border-transparent",
"hover:tw-bg-transparent-hover",
"hover:tw-border-primary-700",
"focus-visible:before:tw-ring-primary-700",
"disabled:tw-opacity-60",
"hover:tw-border-primary-500",
"focus-visible:before:tw-ring-primary-500",
"disabled:!tw-text-secondary-300",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
...focusRing,
@@ -64,9 +64,9 @@ const styles: Record<IconButtonType, string[]> = {
"tw-bg-primary-600",
"!tw-text-contrast",
"tw-border-primary-600",
"hover:tw-bg-primary-700",
"hover:tw-border-primary-700",
"focus-visible:before:tw-ring-primary-700",
"hover:tw-bg-primary-500",
"hover:tw-border-primary-500",
"focus-visible:before:tw-ring-primary-500",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-primary-600",
"disabled:hover:tw-bg-primary-600",
@@ -78,26 +78,25 @@ const styles: Record<IconButtonType, string[]> = {
"tw-border-text-muted",
"hover:!tw-text-contrast",
"hover:tw-bg-text-muted",
"focus-visible:before:tw-ring-primary-700",
"focus-visible:before:tw-ring-primary-500",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-text-muted",
"disabled:hover:tw-bg-transparent",
"disabled:hover:!tw-text-muted",
"disabled:hover:tw-border-text-muted",
...focusRing,
],
danger: [
"tw-bg-transparent",
"!tw-text-danger",
"tw-border-danger-600",
"hover:!tw-text-contrast",
"hover:tw-bg-danger-600",
"focus-visible:before:tw-ring-primary-700",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-danger-600",
"!tw-text-danger-600",
"tw-border-transparent",
"hover:!tw-text-danger-600",
"hover:tw-bg-transparent",
"hover:tw-border-primary-500",
"focus-visible:before:tw-ring-primary-500",
"disabled:!tw-text-secondary-300",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
"disabled:hover:!tw-text-danger",
"disabled:hover:tw-border-danger-600",
"disabled:hover:!tw-text-secondary-300",
...focusRing,
],
light: [
@@ -107,6 +106,7 @@ const styles: Record<IconButtonType, string[]> = {
"hover:tw-bg-transparent-hover",
"hover:tw-border-text-alt2",
"focus-visible:before:tw-ring-text-alt2",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
...focusRing,
@@ -141,7 +141,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
"tw-font-semibold",
"tw-border",
"tw-border-solid",
"tw-rounded",
"tw-rounded-lg",
"tw-transition",
"hover:tw-no-underline",
"focus:tw-outline-none",

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

@@ -133,6 +133,6 @@ export const Disabled: Story = {
...Default,
args: {
disabled: true,
loading: true,
loading: false,
},
};

1
libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts
View File

@@ -76,6 +76,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
linkType="primary"
[bitPopoverTriggerFor]="myPopover"
#triggerRef="popoverTrigger"
type="button"
>
<i class="bwi bwi-question-circle"></i>
</button>

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

@@ -1,7 +1,7 @@
@import "./reset.css";
:root {
--color-transparent-hover: rgb(0 0 0 / 0.03);
--color-transparent-hover: rgb(0 0 0 / 0.02);
--color-background: 255 255 255;
--color-background-alt: 246 247 249;
@@ -52,7 +52,7 @@
}
.theme_dark {
--color-transparent-hover: rgb(255 255 255 / 0.12);
--color-transparent-hover: rgb(255 255 255 / 0.02);
--color-background: 32 39 51;
--color-background-alt: 18 26 39;

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

@@ -107,6 +107,7 @@ module.exports = {
700: rgba("--color-primary-700"),
},
secondary: {
300: rgba("--color-secondary-300"),
700: rgba("--color-secondary-700"),
},
},