logo as image by nmerget · Pull Request #6661 · db-ux-design-system/core-web

nmerget · 2026-05-11T14:40:45Z

Proposed changes

Changed DBBrand component to render the default logo via CSS background images (served from foundations assets) rather than via the icon system

resolves https://github.com/db-ux-design-system/core-team/issues/2455

Types of changes

Bugfix (non-breaking change that fixes an issue)
New feature (non-breaking change which adds functionality)
Refactoring (improvements to existing components or architectural decisions)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation Update (if none of the other choices apply)

Further comments

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/test-logo-as-image

changeset-bot · 2026-05-11T14:40:54Z

⚠️ No Changeset found

Latest commit: 45d9e2a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

# Conflicts: # storybooks/angular-storybook/CHANGELOG.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

# Conflicts: # .config/.jscpd.json # pnpm-lock.yaml

…rand component

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…go-as-image

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 26 out of 49 changed files in this pull request and generated 6 comments.

Files not reviewed (3)

packages/vite-plugin/test/fixtures/react-app/package-lock.json: Language not supported
packages/vite-plugin/test/fixtures/vue-app/package-lock.json: Language not supported
pnpm-lock.yaml: Language not supported

# Conflicts: # __snapshots__/brand/showcase/chromium-highContrast/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png # __snapshots__/brand/showcase/chromium/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png # __snapshots__/brand/showcase/firefox/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png # __snapshots__/brand/showcase/mobile-chrome/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png # __snapshots__/brand/showcase/mobile-safari/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png # __snapshots__/brand/showcase/webkit/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png # __snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png # __snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png # __snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png # __snapshots__/header/showcase/mobile-chrome/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png # packages/components/package.json # pnpm-lock.yaml # scripts/package.json

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

michaelmkraus · 2026-06-02T11:49:34Z

 	IconProps &
 	ShowIconProps &


Suggested change

IconProps &

ShowIconProps &

no more necessary

michaelmkraus · 2026-06-02T11:52:57Z

+	}
+
+	&[data-no-text="true"] {
+		font-size: 0;


This might be an a11y issue. Screenreaders might skip texts with font-size 0.

"Do not size content to 0 pixels if you want the content to be read by a screen reader." (webaim)

This might be an a11y issue. Screenreaders might skip texts with font-size 0.

"Do not size content to 0 pixels if you want the content to be read by a screen reader." (webaim)

I even also already came to that thought, it's good that you remind me of this. We should check our codebase in general, as we're already using it at other places, and want to add the label by aria-label additionally.

michaelmkraus · 2026-06-02T12:01:25Z

    "dev:html": "pnpm run copy-assets && pnpm run build-assets && pnpm run build-style:01_sass && vite --open",
    "dev:react": "nodemon --watch src --watch scripts --watch configs --ext tsx,ts,cjs --exec \"pnpm run compile:react\"",
-    "dev:scss": "sass src:build --load-path=node_modules --watch --source-map",
+    "dev:scss": "sass src:build --load-path=node_modules --watch",


Shouldn't we keep the --source-map flag for dev?

michaelmkraus · 2026-06-02T12:11:50Z

 			<DBBrand>(Default) With Logo</DBBrand>
-			<DBBrand hideLogo={true}>No Logo</DBBrand>
-			<DBBrand hideLogo={true}>
+			<DBBrand data-logo="db-systel" noText>


You added data-logo, but there is no CSS selector in brand.scss that overrides the --db-logo-url. Right now, this example will just render the default DB logo, right? I think we need to add the CSS logic and type the prop.

michaelmkraus · 2026-06-02T12:33:55Z

+			content: "";
+			block-size: #{variables.$db-sizing-sm};
+			aspect-ratio: var(--db-logo-aspect-ratio);
+			background-image: var(--db-logo-url);
+			background-repeat: no-repeat;
+			background-size: auto #{variables.$db-sizing-sm};


Logo became $db-sizing-sm from $db-sizing-md. Is this intended?

nmerget added 4 commits January 29, 2026 16:25

test: ship logo as image with url paths

53c589e

chore: update _default-images.scss

8889f8a

chore: update from main

57fe1c0

chore: update brand image resolving

cb3b25a

github-project-automation Bot added this to UX Engineering Team Backlog May 11, 2026

github-project-automation Bot moved this to 🏗 In progress in UX Engineering Team Backlog May 11, 2026

github-actions Bot added 📕documentation Improvements or additions to documentation 🏗foundations 🏘components labels May 11, 2026

github-actions Bot assigned nmerget May 11, 2026

nmerget added 4 commits May 12, 2026 08:08

Merge remote-tracking branch 'origin/main' into test-logo-as-image

388807c

chore: update from main

912bdf2

chore: update ignore patterns for jscpd and stylelint

8a94e58

Merge remote-tracking branch 'origin/main' into test-logo-as-image

11cacff

# Conflicts: # storybooks/angular-storybook/CHANGELOG.md

github-actions Bot added the 🛠️configuration label May 12, 2026

chore: display logo image in variant example

5df7608

github-actions Bot mentioned this pull request May 12, 2026

Automated PR: auto update snapshots #6675

Merged

github-actions Bot and others added 2 commits May 12, 2026 10:11

auto update snapshots (#6675)

a48eaab

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

chore: remove hideLogo option from brand argument types

4b77f91

github-actions Bot added the 📺showcases Changes to 1-n showcases label May 12, 2026

nmerget added 3 commits May 12, 2026 13:24

chore: update _brand.arg.types.ts

ad3a981

Merge remote-tracking branch 'origin/main' into test-logo-as-image

a9783c2

# Conflicts: # .config/.jscpd.json # pnpm-lock.yaml

chore: update db-theme to version 5.7.0 and add noText support to DBB…

3734680

…rand component

github-actions Bot mentioned this pull request May 13, 2026

Automated PR: auto update snapshots #6692

Merged

auto update snapshots (#6692)

2c0a8fa

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

nmerget added this to the 4.9.0 milestone May 13, 2026

mfranzke added this to Roadmap May 13, 2026

nmerget added 2 commits May 13, 2026 10:20

chore: update snapshots

142b52e

Merge remote-tracking branch 'origin/test-logo-as-image' into test-lo…

6ccd935

…go-as-image

nmerget modified the milestones: 4.9.0, 4.10.0 May 19, 2026

mfranzke reviewed May 19, 2026

View reviewed changes

Comment thread scripts/package.json Outdated

mfranzke reviewed May 19, 2026

View reviewed changes

Comment thread packages/components/src/components/brand/model.ts

mfranzke reviewed May 19, 2026

View reviewed changes

Comment thread ...der/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png

mfranzke moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog May 19, 2026

nmerget added 2 commits May 22, 2026 09:21

chore: update from main

826dc7b

fix: issues from PR

944159d

nmerget requested a review from mfranzke May 22, 2026 11:02

nmerget moved this from 🎶 Waiting for feedback to 🎁 Ready for review in UX Engineering Team Backlog May 22, 2026

mfranzke requested a review from Copilot May 31, 2026 11:13

Copilot started reviewing on behalf of mfranzke May 31, 2026 11:14 View session

Copilot AI reviewed May 31, 2026

View reviewed changes

mfranzke requested a review from Copilot May 31, 2026 19:48

Copilot started reviewing on behalf of mfranzke May 31, 2026 19:48 View session

Copilot AI reviewed May 31, 2026

View reviewed changes

nmerget enabled auto-merge (squash) June 1, 2026 06:05

github-actions Bot mentioned this pull request Jun 1, 2026

Automated PR: auto update snapshots #6852

Merged

auto update snapshots (#6852)

45d9e2a

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

nmerget modified the milestones: 4.10.0, 4.11.0 Jun 1, 2026

michaelmkraus reviewed Jun 2, 2026

View reviewed changes

michaelmkraus moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Jun 2, 2026

michaelmkraus self-requested a review June 2, 2026 11:56

michaelmkraus reviewed Jun 2, 2026

View reviewed changes

michaelmkraus moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Jun 2, 2026

Conversation

nmerget commented May 11, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Types of changes

Further comments

Uh oh!

changeset-bot Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

michaelmkraus Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

michaelmkraus Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

mfranzke Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

michaelmkraus Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

michaelmkraus Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michaelmkraus Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nmerget commented May 11, 2026 •

edited by github-actions Bot

Loading

changeset-bot Bot commented May 11, 2026 •

edited

Loading

michaelmkraus Jun 2, 2026 •

edited

Loading