Skip to content

fix(branding): force light and dark backgrounds on logos and icons (#… #251

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

Closed
Ayush-AM wants to merge 1 commit into from
+39 −12
Closed

fix(branding): force light and dark backgrounds on logos and icons (#… #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 27 additions & 0 deletions docs/contributions/ISSUE-243.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Contribution Documentation for Issue #243

## Issue Details

- **Issue Number:** #243
- **Title:** `page(branding): should force light/dark. bg on icon`
- **URL:** https://github.com/webpack/webpack-doc-kit/issues/243

## Description & Problem

On the webpack branding page (`pages/about/branding.md`), logos intended for light backgrounds and dark backgrounds (as well as icons and stickers) were previously rendered directly onto the page theme background without explicit container background styling.

- When viewing the website in **dark mode**, the "Light backgrounds" column (which contains logos with dark blue text) had a dark page background, making the dark text unreadable.
- When viewing the website in **light mode**, the "Dark backgrounds" column (which contains logos with white text) had a light page background, making the white text unreadable.

## Changes Made

1. Modified `pages/about/branding.md`:
- Wrapped horizontal and stacked logos intended for light backgrounds in a container with a forced light background (`#ffffff` / `bg-white`).
- Wrapped horizontal and stacked logos intended for dark backgrounds in a container with a forced dark background (`#2b3a42` / `bg-[#2b3a42]` - using webpack's official Outer Space brand color).
- Wrapped the webpack icon and hex sticker in corresponding forced light/dark background containers for consistent contrast and visual fidelity across all theme modes.

## Verification

- Verified code formatting with `npm run format:check`.
- Ran linters with `npm run lint`.
- Executed unit tests with `npm test`.
24 changes: 12 additions & 12 deletions pages/about/branding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,26 @@ Please use the **logo with text** whenever possible. The logo should be placed o

### Horizontal logo

| 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) |
| [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) |
| Light backgrounds | Dark backgrounds |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <div class="bg-white p-4 rounded-md flex justify-center items-center" style="background-color: #ffffff; padding: 16px; border-radius: 8px; display: flex; justify-content: center; align-items: center;"><img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png" alt="webpack horizontal logo for light backgrounds" /></div> | <div class="bg-[#2b3a42] p-4 rounded-md flex justify-center items-center" style="background-color: #2b3a42; padding: 16px; border-radius: 8px; display: flex; justify-content: center; align-items: center;"><img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png" alt="webpack horizontal logo for dark backgrounds" /></div> |
| [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) |

### 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) |
| [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) |
| Light backgrounds | Dark backgrounds |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <div class="bg-white p-4 rounded-md flex justify-center items-center" style="background-color: #ffffff; padding: 16px; border-radius: 8px; display: flex; justify-content: center; align-items: center;"><img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png" alt="webpack stacked logo for light backgrounds" /></div> | <div class="bg-[#2b3a42] p-4 rounded-md flex justify-center items-center" style="background-color: #2b3a42; padding: 16px; border-radius: 8px; display: flex; justify-content: center; align-items: center;"><img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png" alt="webpack stacked logo for dark backgrounds" /></div> |
| [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

The icon is designed to be used in **layout-constrained areas only**. As previously stated, please prefer the logo with text.

| Icon (avatars, profile pictures, favicons) | Hex sticker |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| ![webpack icon](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-icon-color.png) | ![webpack hex sticker](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-hex-sticker.png) |
| [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.png) |
| Icon (avatars, profile pictures, favicons) | Hex sticker |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <div class="bg-white p-4 rounded-md flex justify-center items-center" style="background-color: #ffffff; padding: 16px; border-radius: 8px; display: flex; justify-content: center; align-items: center;"><img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-icon-color.png" alt="webpack icon" /></div> | <div class="bg-[#2b3a42] p-4 rounded-md flex justify-center items-center" style="background-color: #2b3a42; padding: 16px; border-radius: 8px; display: flex; justify-content: center; align-items: center;"><img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-hex-sticker.png" alt="webpack hex sticker" /></div> |
| [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-icon-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-hex-sticker.png) |

## Color Palette

Expand Down