diff --git a/libs/assets/src/svg/svgs/admin-console.ts b/libs/assets/src/svg/svgs/admin-console.ts index 83c8cf9f0e1..3e8f47ec4a5 100644 --- a/libs/assets/src/svg/svgs/admin-console.ts +++ b/libs/assets/src/svg/svgs/admin-console.ts @@ -2,13 +2,13 @@ import { svgIcon } from "../icon-service"; const AdminConsoleLogo = svgIcon` - + - + diff --git a/libs/assets/src/svg/svgs/password-manager.ts b/libs/assets/src/svg/svgs/password-manager.ts index 17b6f148be3..5b19562e022 100644 --- a/libs/assets/src/svg/svgs/password-manager.ts +++ b/libs/assets/src/svg/svgs/password-manager.ts @@ -2,13 +2,13 @@ import { svgIcon } from "../icon-service"; const PasswordManagerLogo = svgIcon` - + - + diff --git a/libs/assets/src/svg/svgs/provider-portal.ts b/libs/assets/src/svg/svgs/provider-portal.ts index 51c04e1553b..fad2ce6b864 100644 --- a/libs/assets/src/svg/svgs/provider-portal.ts +++ b/libs/assets/src/svg/svgs/provider-portal.ts @@ -2,13 +2,13 @@ import { svgIcon } from "../icon-service"; const ProviderPortalLogo = svgIcon` - + - + diff --git a/libs/assets/src/svg/svgs/secrets-manager.ts b/libs/assets/src/svg/svgs/secrets-manager.ts index 27589e7e2f9..62b54174c55 100644 --- a/libs/assets/src/svg/svgs/secrets-manager.ts +++ b/libs/assets/src/svg/svgs/secrets-manager.ts @@ -2,13 +2,13 @@ import { svgIcon } from "../icon-service"; const SecretsManagerLogo = svgIcon` - + - + diff --git a/libs/assets/src/svg/svgs/shield.ts b/libs/assets/src/svg/svgs/shield.ts index 38d429604aa..af626a98e9d 100644 --- a/libs/assets/src/svg/svgs/shield.ts +++ b/libs/assets/src/svg/svgs/shield.ts @@ -3,11 +3,11 @@ import { svgIcon } from "../icon-service"; const BitwardenShield = svgIcon` - + - + diff --git a/libs/components/src/icon-button/icon-button.component.ts b/libs/components/src/icon-button/icon-button.component.ts index c7eb28fc086..3b5e01132a2 100644 --- a/libs/components/src/icon-button/icon-button.component.ts +++ b/libs/components/src/icon-button/icon-button.component.ts @@ -71,9 +71,9 @@ const styles: Record = { primary: ["!tw-text-primary-600", "focus-visible:before:tw-ring-primary-600", ...focusRing], danger: ["!tw-text-danger-600", "focus-visible:before:tw-ring-primary-600", ...focusRing], "nav-contrast": [ - "!tw-text-alt2", + "!tw-text-fg-sidenav-text", "hover:!tw-bg-hover-contrast", - "focus-visible:before:tw-ring-text-alt2", + "focus-visible:before:tw-ring-border-focus", ...focusRing, ], }; diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html index 1790fea179a..d305f89063e 100644 --- a/libs/components/src/navigation/nav-group.component.html +++ b/libs/components/src/navigation/nav-group.component.html @@ -19,7 +19,7 @@ @if (open) { @@ -31,7 +31,7 @@ > @if (icon()) { @@ -47,7 +47,7 @@ 0" data-fvw [routerLink]="route()" @@ -68,7 +68,7 @@ 0" data-fvw (click)="mainContentClicked.emit()" @@ -79,7 +79,7 @@ @if (open) { diff --git a/libs/components/src/navigation/nav-item.component.ts b/libs/components/src/navigation/nav-item.component.ts index b32ca0e3fde..e57413d9980 100644 --- a/libs/components/src/navigation/nav-item.component.ts +++ b/libs/components/src/navigation/nav-item.component.ts @@ -90,7 +90,7 @@ export class NavItemComponent extends NavBaseComponent { protected focusVisibleWithin$ = new BehaviorSubject(false); protected fvwStyles$ = this.focusVisibleWithin$.pipe( map((value) => - value ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-inset tw-ring-text-alt2" : "", + value ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-inset tw-ring-border-focus" : "", ), ); @HostListener("focusin", ["$event.target"]) diff --git a/libs/components/src/navigation/nav-logo.component.html b/libs/components/src/navigation/nav-logo.component.html index 5915f029357..1d9961554c2 100644 --- a/libs/components/src/navigation/nav-logo.component.html +++ b/libs/components/src/navigation/nav-logo.component.html @@ -8,7 +8,7 @@ @if (data.open) { diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css index 757859985d6..5aab0d8bec9 100644 --- a/libs/components/src/tw-theme.css +++ b/libs/components/src/tw-theme.css @@ -353,6 +353,19 @@ /* Focus Border */ --color-border-focus: var(--color-black); + + /**======================================== + * SIDENAV BACKGROUND COLORS (Light mode) + * ======================================== */ + --color-sidenav-background: var(--color-brand-800); + --color-sidenav-text: var(--color-white); + --color-sidenav-active-item: var(--color-brand-900); + --color-sidenav-item-hover: var(--color-brand-900); + + --color-admin-sidenav-background: var(--color-gray-100); + --color-admin-sidenav-text: var(--color-gray-900); + --color-admin-sidenav-active-item: var(--color-gray-300); + --color-admin-sidenav-item-hover: var(--color-gray-300); } .theme_light { @@ -542,6 +555,19 @@ /* Focus Border */ --color-border-focus: var(--color-white); + + /**======================================== + * SIDENAV BACKGROUND COLORS (Dark mode) + * ======================================== */ + --color-sidenav-background: var(--color-gray-800); + --color-sidenav-text: var(--color-white); + --color-sidenav-active-item: var(--color-gray-900); + --color-sidenav-item-hover: var(--color-gray-900); + + --color-admin-sidenav-background: var(--color-gray-800); + --color-admin-sidenav-text: var(--color-white); + --color-admin-sidenav-active-item: var(--color-gray-900); + --color-admin-sidenav-item-hover: var(--color-gray-900); } @layer components { diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js index bd88f5471ff..d8220c39ff8 100644 --- a/libs/components/tailwind.config.base.js +++ b/libs/components/tailwind.config.base.js @@ -72,11 +72,11 @@ module.exports = { code: rgba("--color-text-code"), }, background: { - DEFAULT: rgba("--color-background"), - alt: rgba("--color-background-alt"), - alt2: rgba("--color-background-alt2"), - alt3: rgba("--color-background-alt3"), - alt4: rgba("--color-background-alt4"), + DEFAULT: "var(--color-bg-primary)", + alt: "var(--color-bg-tertiary)", + alt2: "var(--color-bg-brand)", + alt3: "var(--color-bg-brand-strong)", + alt4: "var(--color-brand-950)", }, bg: { white: "var(--color-bg-white)", @@ -117,6 +117,9 @@ module.exports = { "accent-tertiary": "var(--color-bg-accent-tertiary)", hover: "var(--color-bg-hover)", overlay: "var(--color-bg-overlay)", + sidenav: "var(--color-sidenav-background)", + "sidenav-active-item": "var(--color-sidenav-active-item)", + "sidenav-item-hover": "var(--color-sidenav-item-hover)", }, hover: { default: "var(--color-hover-default)", @@ -159,6 +162,7 @@ module.exports = { "accent-tertiary-soft": "var(--color-fg-accent-tertiary-soft)", "accent-tertiary": "var(--color-fg-accent-tertiary)", "accent-tertiary-strong": "var(--color-fg-accent-tertiary-strong)", + "sidenav-text": "var(--color-sidenav-text)", }, border: { muted: "var(--color-border-muted)", @@ -253,6 +257,7 @@ module.exports = { "fg-accent-tertiary-soft": "var(--color-fg-accent-tertiary-soft)", "fg-accent-tertiary": "var(--color-fg-accent-tertiary)", "fg-accent-tertiary-strong": "var(--color-fg-accent-tertiary-strong)", + "fg-sidenav-text": "var(--color-sidenav-text)", }), borderColor: ({ theme }) => ({ ...theme("colors"),