From b9edd453bafbcb528deb3bbbfc611d80a2085ae3 Mon Sep 17 00:00:00 2001 From: Vicki League Date: Sat, 18 Oct 2025 16:46:24 -0400 Subject: [PATCH] [CL-874] Replace or ignore hardcoded colors in svgs (#16871) * [CL-874] Replace or ignore hardcoded colors in svgs * missed the logo color remaining in dark mode * set svg color lint rule to error * add bw blue color --- eslint.config.mjs | 2 +- .../svg/svgs/background-right-illustration.ts | 25 ++++++++++++++++++- libs/assets/src/svg/svgs/bitwarden-icon.ts | 4 +-- libs/assets/src/svg/svgs/carousel-icon.ts | 2 +- .../src/svg/svgs/secrets-manager-alt.ts | 6 ++++- .../src/svg/svgs/two-factor-auth-duo.icon.ts | 4 ++- .../svg/svgs/two-factor-auth-yubico.icon.ts | 4 ++- libs/components/src/tw-theme.css | 2 ++ libs/components/tailwind.config.base.js | 1 + 9 files changed, 42 insertions(+), 8 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index af5d56e6f73..07bc5951786 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 b8f02935d83..1c488f7242d 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 2f88b38043c..203460952b5 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/carousel-icon.ts b/libs/assets/src/svg/svgs/carousel-icon.ts index 802f6ff1435..e29fd952098 100644 --- a/libs/assets/src/svg/svgs/carousel-icon.ts +++ b/libs/assets/src/svg/svgs/carousel-icon.ts @@ -2,6 +2,6 @@ import { svgIcon } from "../icon-service"; export const CarouselIcon = svgIcon` - + `; diff --git a/libs/assets/src/svg/svgs/secrets-manager-alt.ts b/libs/assets/src/svg/svgs/secrets-manager-alt.ts index 293bd99cbf3..98640803ca9 100644 --- a/libs/assets/src/svg/svgs/secrets-manager-alt.ts +++ b/libs/assets/src/svg/svgs/secrets-manager-alt.ts @@ -1,5 +1,9 @@ import { svgIcon } from "../icon-service"; export const SecretsManagerAlt = svgIcon` - + + + + + `; diff --git a/libs/assets/src/svg/svgs/two-factor-auth-duo.icon.ts b/libs/assets/src/svg/svgs/two-factor-auth-duo.icon.ts index 53a81386e04..5bf43334d18 100644 --- a/libs/assets/src/svg/svgs/two-factor-auth-duo.icon.ts +++ b/libs/assets/src/svg/svgs/two-factor-auth-duo.icon.ts @@ -1,3 +1,5 @@ +// this svg includes the Duo 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 TwoFactorAuthDuoIcon = svgIcon` @@ -13,7 +15,7 @@ export const TwoFactorAuthDuoIcon = 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 e00bc905880..d4d38c363ae 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 1e0a6f438f0..f8e02a7e668 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 b3f3077b1a3..06c325894df 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"),