diff --git a/docs/contributions/ISSUE-243.md b/docs/contributions/ISSUE-243.md new file mode 100644 index 00000000..8a0bb167 --- /dev/null +++ b/docs/contributions/ISSUE-243.md @@ -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`. diff --git a/pages/about/branding.md b/pages/about/branding.md index 7e3539d8..6e1c5114 100644 --- a/pages/about/branding.md +++ b/pages/about/branding.md @@ -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 | +| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +|
webpack horizontal logo for light backgrounds
|
webpack horizontal logo for dark backgrounds
| +| [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 | +| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +|
webpack stacked logo for light backgrounds
|
webpack stacked logo for dark backgrounds
| +| [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 | +| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +|
webpack icon
|
webpack hex sticker
| +| [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