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/carousel-icon.ts b/libs/assets/src/svg/svgs/carousel-icon.ts index 802f6ff143..e29fd95209 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 293bd99cbf..98640803ca 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 53a81386e0..5bf43334d1 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 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"),