diff --git a/eslint.config.mjs b/eslint.config.mjs
index af5d56e6f7..07bc595178 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -78,7 +78,7 @@ export default tseslint.config(
"@bitwarden/platform/required-using": "error",
"@bitwarden/platform/no-enums": "error",
- "@bitwarden/components/require-theme-colors-in-svg": "warn",
+ "@bitwarden/components/require-theme-colors-in-svg": "error",
"@typescript-eslint/explicit-member-accessibility": ["error", { accessibility: "no-public" }],
"@typescript-eslint/no-explicit-any": "off", // TODO: This should be re-enabled
diff --git a/libs/assets/src/svg/svgs/background-right-illustration.ts b/libs/assets/src/svg/svgs/background-right-illustration.ts
index b8f02935d8..1c488f7242 100644
--- a/libs/assets/src/svg/svgs/background-right-illustration.ts
+++ b/libs/assets/src/svg/svgs/background-right-illustration.ts
@@ -1,5 +1,28 @@
import { svgIcon } from "../icon-service";
export const BackgroundRightIllustration = svgIcon`
-
+
`;
diff --git a/libs/assets/src/svg/svgs/bitwarden-icon.ts b/libs/assets/src/svg/svgs/bitwarden-icon.ts
index 2f88b38043..203460952b 100644
--- a/libs/assets/src/svg/svgs/bitwarden-icon.ts
+++ b/libs/assets/src/svg/svgs/bitwarden-icon.ts
@@ -3,12 +3,12 @@ import { svgIcon } from "../icon-service";
export const BitwardenIcon = svgIcon`
diff --git a/libs/assets/src/svg/svgs/two-factor-auth-yubico.icon.ts b/libs/assets/src/svg/svgs/two-factor-auth-yubico.icon.ts
index e00bc90588..d4d38c363a 100644
--- a/libs/assets/src/svg/svgs/two-factor-auth-yubico.icon.ts
+++ b/libs/assets/src/svg/svgs/two-factor-auth-yubico.icon.ts
@@ -1,3 +1,5 @@
+// this svg includes the Yubico logo, which contains colors not part of our bitwarden theme colors
+/* eslint-disable @bitwarden/components/require-theme-colors-in-svg */
import { svgIcon } from "../icon-service";
export const TwoFactorAuthYubicoIcon = svgIcon`
@@ -8,7 +10,7 @@ export const TwoFactorAuthYubicoIcon = svgIcon`
-
+
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 1e0a6f438f..f8e02a7e66 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -62,6 +62,7 @@
--color-hover-contrast: rgb(255 255 255 / 0.15);
--color-marketing-logo: 23 93 220;
+ --color-bw-blue: 23 93 220;
--tw-ring-offset-color: #ffffff;
@@ -129,6 +130,7 @@
--color-hover-contrast: rgb(0 0 0 / 0.15);
--color-marketing-logo: 255 255 255;
+ --color-bw-blue: 23 93 220;
--tw-ring-offset-color: #1f242e;
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index b3f3077b1a..06c325894d 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -83,6 +83,7 @@ module.exports = {
contrast: "var(--color-hover-contrast)",
},
"marketing-logo": rgba("--color-marketing-logo"),
+ "bw-blue": rgba("--color-bw-blue"),
illustration: {
outline: rgba("--color-illustration-outline"),
"bg-primary": rgba("--color-illustration-bg-primary"),