Skip to content

fix : add background styling for dark logos in branding documentation #247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ekagrashharma wants to merge 7 commits into
base: main
Choose a base branch
from
+22 −2
Open

fix : add background styling for dark logos in branding documentation #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a4b5ee2
fix(branding): add background styling for dark logos in branding docu…
Ekagrashharma Aug 15, 2026
d981689
fix(branding): update background color for dark logos in branding doc…
Ekagrashharma Aug 15, 2026
63257a1
test(mdx): add two test divs
Ekagrashharma Aug 17, 2026
396d74c
Update pages/about/branding.md
Ekagrashharma Aug 17, 2026
e7141e3
fix: add darkBg class for logo styling
Ekagrashharma Aug 17, 2026
718cfb4
fix the logo sizing sizing
Ekagrashharma Aug 19, 2026
6d0357d
fixup!
moshams272 Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions pages/about/branding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,20 @@ Please use the **logo with text** whenever possible. The logo should be placed o

### Horizontal logo

<div class="halfWidthTable">

| Light backgrounds | Dark backgrounds |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| ![webpack horizontal logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png) | ![webpack horizontal logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) |
| ![webpack horizontal logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png) | <span class="darkBg">![webpack horizontal logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png)</span> |
| [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) |

</div>

### Stacked logo

| Light backgrounds | Dark backgrounds |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| ![webpack stacked logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png) | ![webpack stacked logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) |
| ![webpack stacked logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png) | <span class="darkBg">![webpack stacked logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png)</span> |
| [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) |

## webpack Icons
Expand Down
16 changes: 16 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,19 @@
--color-brand-900: var(--color-blue-900);
--color-brand-950: var(--color-blue-950);
}

.darkBg {
background-color: var(--color-neutral-950);
display: inline-block;
padding: 20px;
}
Comment on lines +25 to +29

@coderabbitai coderabbitai Bot Aug 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Expect image rules that keep the logos within their 50% table cells.
rg -n -C 4 '\.darkBg|\.halfWidthTable|img|max-width|max-height|overflow' \
  styles pages/about/branding.md

Repository: webpack/webpack-doc-kit

Length of output: 855

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- branding references and image syntax ---'
rg -n -C 8 'darkBg|halfWidthTable|!\[|<img|image|logo' pages/about/branding.md pages styles || true

printf '%s\n' '--- stylesheet structure and image rules ---'
fd -t f -e css -e scss -e md . styles pages | sort
rg -n -C 3 '(^|[,{[:space:]])img([[:space:]:,{]|$)|max-width|max-height|width:|height:|overflow' styles pages || true

printf '%s\n' '--- relevant file sizes ---'
wc -l styles/index.css pages/about/branding.md

Repository: webpack/webpack-doc-kit

Length of output: 50382

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
from pathlib import Path
import re

css = Path("styles/index.css").read_text()
md = Path("pages/about/branding.md").read_text()

print("--- CSS declarations ---")
for selector, body in re.findall(r"([^{}]+)\{([^{}]*)\}", css):
    if any(term in selector for term in ("darkBg", "halfWidthTable", "img")):
        print(selector.strip(), "=>", " ".join(body.split()))

print("--- branding image lines and wrappers ---")
for number, line in enumerate(md.splitlines(), 1):
    if any(term in line for term in ("darkBg", "halfWidthTable", "![", "<img")):
        print(f"{number}: {line}")

print("--- intrinsic image dimensions in repository ---")
for path in Path(".").rglob("*"):
    if path.is_file() and path.suffix.lower() in {".png", ".jpg", ".jpeg", ".svg", ".webp"}:
        print(path)
PY

Repository: webpack/webpack-doc-kit

Length of output: 3313

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- all stylesheet files ---'
fd -t f \( -e css -o -e scss \) . | sort

printf '%s\n' '--- image and table rules in stylesheets ---'
while IFS= read -r file; do
  printf '\n[%s]\n' "$file"
  rg -n -C 3 '(^|[,{[:space:]])img([[:space:]:,{]|$)|max-width|max-height|width:|height:|overflow|table-layout|halfWidthTable|darkBg' "$file" || true
done < <(fd -t f \( -e css -o -e scss \) . | sort)

printf '%s\n' '--- layout/config references ---'
rg -n -C 3 'styles/index\.css|index\.css|markdown|remark|rehype|table' package.json *.js *.cjs *.mjs *.ts config* scripts plugins 2>/dev/null || true

Repository: webpack/webpack-doc-kit

Length of output: 303

🏁 Script executed (no clone):

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
from urllib.request import urlopen
from struct import unpack

urls = {
    "horizontal-light": "https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png",
    "horizontal-dark": "https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png",
    "stacked-light": "https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png",
    "stacked-dark": "https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png",
}

for name, url in urls.items():
    with urlopen(url, timeout=15) as response:
        data = response.read()
    if data[:8] != b"\x89PNG\r\n\x1a\n":
        raise RuntimeError(f"{name}: response is not PNG")
    width, height = unpack(">II", data[16:24])
    print(f"{name}: {width}x{height}, bytes={len(data)}")
PY

Length of output: 2412

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- all stylesheet files ---'
fd --type f --extension css --extension scss . | sort

printf '%s\n' '--- image and table rules in stylesheets ---'
while IFS= read -r file; do
  printf '\n[%s]\n' "$file"
  rg -n -C 3 '(^|[,{[:space:]])img([[:space:]:,{]|$)|max-width|max-height|width:|height:|overflow|table-layout|halfWidthTable|darkBg' "$file" || true
done < <(fd --type f --extension css --extension scss . | sort)

printf '%s\n' '--- layout/config references ---'
rg -n -C 3 'styles/index\.css|index\.css|markdown|remark|rehype|table' package.json '*.js' '*.cjs' '*.mjs' '*.ts' config* scripts plugins 2>/dev/null || true

Repository: webpack/webpack-doc-kit

Length of output: 1158

🏁 Script executed (no clone):

#!/bin/bash
set -euo pipefail

for url in \
  'https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png' \
  'https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png' \
  'https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png' \
  'https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png'
do
  printf '%s: ' "$url"
  curl -ksSL --fail "$url" | python3 -c '
import sys, struct
data = sys.stdin.buffer.read()
if data[:8] != b"\x89PNG\r\n\x1a\n":
    raise SystemExit("not a PNG")
print(f"{struct.unpack(\">II\", data[16:24])[0]}x{struct.unpack(\">II\", data[16:24])[1]}")
'
done

Length of output: 625

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- global stylesheets ---'
for file in styles/index.css styles/theme.css; do
  printf '\n[%s]\n' "$file"
  cat -n "$file"
done

printf '%s\n' '--- image rules across stylesheets ---'
rg -n -C 4 '(^|[,{[:space:]])img([[:space:]:,{]|$)|max-width|max-height|overflow' \
  styles components layouts || true

printf '%s\n' '--- branding table scope ---'
sed -n '18,38p' pages/about/branding.md

Repository: webpack/webpack-doc-kit

Length of output: 11940

🏁 Script executed (no clone):

#!/bin/bash
set -euo pipefail

for url in \
  'https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png' \
  'https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png' \
  'https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png' \
  'https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png'
do
  printf '%s: ' "$url"
  curl -ksSL --fail "$url" -o /tmp/logo.png
  python3 - <<'PY'
import struct
data = open("/tmp/logo.png", "rb").read()
if data[:8] != b"\x89PNG\r\n\x1a\n":
    raise SystemExit("not a PNG")
width, height = struct.unpack(">II", data[16:24])
print(f"{width}x{height}")
PY
done

Length of output: 658

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- Tailwind version and preflight source ---'
rg -n '"tailwindcss"|tailwindcss@|preflight' package.json package-lock.json pnpm-lock.yaml yarn.lock node_modules/tailwindcss 2>/dev/null | head -80 || true
find node_modules/tailwindcss -maxdepth 3 -type f \( -iname '*preflight*' -o -iname '*.css' \) -print 2>/dev/null | head -40

printf '%s\n' '--- markdown renderer and article classes ---'
rg -n -C 5 'ReactMarkdown|remark|rehype|dangerouslySetInnerHTML|prose|article|mdx|markdown' \
  components layouts plugins scripts package.json 2>/dev/null | head -240 || true

printf '%s\n' '--- exact branding wrapper scope ---'
python3 - <<'PY'
from pathlib import Path
text = Path("pages/about/branding.md").read_text()
print("halfWidthTable openings:", text.count('<div class="halfWidthTable">'))
print("halfWidthTable closings:", text.count("</div>"))
print("stacked table is inside wrapper:", text.index("### Stacked logo") < text.index("</div>"))
PY

Repository: webpack/webpack-doc-kit

Length of output: 315

🏁 Script executed:

#!/bin/bash
set -u

printf '%s\n' '--- Tailwind package files ---'
find node_modules/tailwindcss -maxdepth 3 -type f \( -iname '*preflight*' -o -iname '*.css' \) -print 2>/dev/null | head -40 || true

printf '%s\n' '--- Tailwind preflight references ---'
rg -n -C 4 'max-width: 100%|height: auto|img, video|preflight' \
  node_modules/tailwindcss package-lock.json 2>/dev/null | head -120 || true

printf '%s\n' '--- markdown renderer and article classes ---'
rg -n -C 5 'ReactMarkdown|remark|rehype|dangerouslySetInnerHTML|prose|article|mdx|markdown' \
  components layouts plugins scripts package.json 2>/dev/null | head -240 || true

printf '%s\n' '--- exact branding wrapper scope ---'
python3 - <<'PY'
from pathlib import Path
text = Path("pages/about/branding.md").read_text()
open_at = text.index('<div class="halfWidthTable">')
close_at = text.index("</div>", open_at)
stacked_at = text.index("### Stacked logo")
print("wrapper opening:", open_at)
print("wrapper closing:", close_at)
print("stacked heading:", stacked_at)
print("stacked table inside wrapper:", open_at < stacked_at < close_at)
PY

Repository: webpack/webpack-doc-kit

Length of output: 12385

🌐 Web query:

Tailwind CSS v4.3.3 preflight img video max-width 100% height auto

💡 Result:

In Tailwind CSS v4.3.3, Preflight includes a base style rule that constrains images and videos to prevent them from overflowing their containers [1][2]: img, video { max-width: 100%; height: auto; } This rule ensures that images and videos are responsive by default, maintaining their intrinsic aspect ratio [1][2]. If you need to override this behavior, you can use the max-w-none utility class [1][2]. For cases where you must remove the height: auto rule entirely, common approaches include [3][4]: 1. Disabling Preflight: You can disable Preflight globally if you prefer to manage your own base resets [3][4]. 2. Using Utility Overrides: While it is difficult to revert height: auto to the default browser behavior using simple CSS values, you may need to apply specific heights or use other layout strategies if the default behavior conflicts with your design [3][4]. 3. Custom PostCSS Plugins: Some developers use plugins to strip specific rules from the generated CSS after Tailwind runs [4]. Please note that Tailwind v4.3.3 introduced a fix regarding Preflight and iframes to prevent it from overriding Firefox's native focus-visible outline styles, but the core image and video constraint rules remain unchanged [5][6][7].

Citations:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '%s\n' '--- focused change ---'
git diff --unified=12 -- styles/index.css pages/about/branding.md

printf '%s\n' '--- available browser/layout tools ---'
for command in chromium chromium-browser google-chrome firefox playwright; do
  if command -v "$command" >/dev/null 2>&1; then
    printf '%s: %s\n' "$command" "$(command -v "$command")"
  fi
done

printf '%s\n' '--- relevant package metadata ---'
sed -n '1,80p' package.json

Repository: webpack/webpack-doc-kit

Length of output: 2226

🌐 Web query:

CSS inline-block wrapper padding child img max-width 100% intrinsic width overflow table cell

💡 Result:

The layout issues you are encountering when nesting an image with max-width: 100% inside an inline-block wrapper—especially within a table cell—stem from cyclic dependencies in how browsers calculate intrinsic widths [1][2][3]. When a container (like an inline-block or a table cell) has an auto width, its size is determined by its content [2][4]. If a child image within that container is set to max-width: 100%, the browser faces a circular dependency: it cannot determine the width of the container without the image, but it cannot determine the width of the image without knowing the width of the container [1][2][3]. Key causes and solutions for these behaviors are detailed below: Circular Dependency in Intrinsic Sizing When the wrapper is inline-block and the child image is set to max-width: 100%, the browser may default to the image's intrinsic (natural) pixel size rather than scaling it to the available space [1][5]. This often causes the wrapper (and consequently the table cell) to expand to the full natural width of the image [1][6][7]. Baseline Gaps Images are inline elements by default [8][6]. Even if you set display: block on an image, it often leaves a small gap at the bottom of a container because it aligns to the baseline of the text, reserving space for typographic descenders [9][10]. To eliminate this, ensure the image is set to display: block or vertical-align: top/bottom [11][9][6]. Fixing Table Cell Overflow If images cause a table cell or its wrapper to exceed expected bounds, consider these strategies: - Use the min function: If you need responsiveness while preventing expansion beyond natural size, use width: min(100%, px) [1]. This breaks the circular dependency by bounding the image's contribution to the table's auto-layout calculation [1]. - Enforce layout: Setting table-layout: fixed on the table can prevent cells from expanding based on image content, forcing them to respect defined column widths [8][12]. - Force Block Behavior: Always set display: block on images inside wrappers to remove inline-related spacing issues [11][6]. - Use min-width: 100% on the wrapper: If using an inline-block wrapper inside an overflow container, adding min-width: 100% ensures the wrapper correctly fills the available scrollable space rather than shrinking to fit the image [13]. If you are using percentage-based padding on the wrapper or child, the browser may ignore the padding during the initial intrinsic width calculation to avoid an infinite loop [3]. Using fixed units (e.g., px, em) for padding often resolves these layout calculation failures [3].

Citations:

Constrain .darkBg and wrap the stacked logo table.

Tailwind Preflight constrains the direct <img>, but .darkBg can retain the nested image’s intrinsic width. Its 20px padding can then make the dark cell overflow its fixed 50% column on narrow screens. Add scoped max-width: 100% and box-sizing: border-box rules to .darkBg.

The stacked logo table is outside .halfWidthTable, so it does not receive the fixed-layout or 50% column rules. Move the closing </div> after that table if both tables require equal columns.

@moshams272 moshams272 Aug 19, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ekagrashharma what about the third table 👀


.halfWidthTable table {
table-layout: fixed;
width: 100%;
}

.halfWidthTable td,
.halfWidthTable th {
width: 50%;
}