[SPARK-6] - update the notice border color for dark mode and high contrast dark mode #1965

ttaylor-stack · 2025-08-07T16:11:18Z

Updated the notice border color for dark mode and high contrast dark mode as specified in the the story https://stackoverflow.atlassian.net/browse/SPARK-6

Also updated README to correct the port to use with localhost and add npm i to build instructions

…odes' into ttaylor/spark-6/update-notice-border-color-for-darkmode-and-highcontrast-darkmode

changeset-bot · 2025-08-07T16:11:22Z

🦋 Changeset detected

Latest commit: 0afed48

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@stackoverflow/stacks	Patch

Not sure what this means? Click here to learn what changesets are.

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

netlify · 2025-08-07T16:11:23Z

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	`0afed48`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/689521f812ea5100080de2d3
😎 Deploy Preview	https://deploy-preview-1965--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

dancormier · 2025-08-07T22:08:19Z

lib/components/notice/notice.less

-        .dark-mode({
-            --_no-bc: ~"@{darkMode}";
-        });
-
-        .highcontrast-dark-mode({
-                --_no-bc: ~"@{highContrast}"
+        .highcontrast-mode({
+            --_no-bc: ~"var(--@{colorName}-400)";


@ttaylor-stack since all high contrast mode borders should be the 400 color stop for their given color, we can remove the need for the extra @highContrast param and just concat the color name to -400.

dancormier · 2025-08-07T22:13:29Z

lib/components/notice/notice.less

-    .dark-mode({
-        --_no-bc: var(--black-225);
-    });


We previously had a dark mode override here (https://github.com/StackExchange/Stacks/blob/develop/lib/components/notice/notice.less#L57-L59):

.dark-mode({ --_no-bc: var(--_no-bg); });

Both light and dark modes use --black-225 for border color (base style when not high contrast). By getting rid of the dark mode override altogether, var(--black-225) becomes the default value and is simpler to override elsewhere because it's targeting a less specific selector (.s-notice instead of body.dark-mode .s-notice).

dancormier · 2025-08-07T22:15:42Z

lib/components/notice/notice.less

            }
        }
+
+        --_no-bc: var(--black-400);


This applies --_no-bc: var(--black-400); to the base high contrast style which can then be overridden by the .highcontrast-mode style rules defined in .generate-variant-variables (line 20).

dancormier

Really nice work @ttaylor-stack. Working on styles for this specific component is like playing on hard mode.

I think we can achieve the desired result without needing to add params to .generate-variant-variables. I was going to make suggestions inline but GitHub didn't make that easy in this case, so I just made a commit (678326d). I added a few notes in comments on that commit.

Check out the commit and let me know if anything seems off or could use clarification. If you're feeling good about the changes, we can go ahead and merge this branch.

Visual regression tests

I've also updated the visual regression tests images to represent the new style (0afed48). There's some instruction in the README on how to setup and run visual regression tests. Let me know if you have issues running them (or if you have any other questions) and I'd be happy to help.

Note

You'll notice lots of new images for both notice and banner components. That's because the banner styles are lifted from notice, so changes applied to notice will also apply to banner. Just a heads up.

dancormier · 2025-08-07T22:17:25Z

README.md

-This command will pull up the local dev server at http://localhost:8000. You can also view our [building guidelines](https://stackoverflow.design/product/develop/building).
+This command will pull up the local dev server at http://localhost:8080. You can also view our [building guidelines](https://stackoverflow.design/product/develop/building).


Thank you @ttaylor-stack! Sorry if this typo caused you any trouble.

* SPARK-8: Fix Modal Focus Issue when using Keyboard (#1963) * fix reported focus issue * Also handle case where modal has no tabbable elements * fix webpack.config.js for windows * move if check up * Create loud-suits-stare.md * fix whitespace * revert html changes * revert harder * add tests * lint * chore(new-release) (#1964) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * [SPARK-6] - update the notice border color for dark mode and high contrast dark mode (#1965) * Correct readme * Don't run minicssextractplugin when running locally * Revert changes * update border colour for dark mode and high contrast dark mode * Create tasty-masks-pump.md * Minor notice border style refactor * Update visual regression test images --------- Co-authored-by: Dan Cormier <dancormierall@gmail.com> * chore(new-release) (#1966) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * build(deps-dev): bump webpack from 5.99.9 to 5.101.2 (#1967) Bumps [webpack](https://github.com/webpack/webpack) from 5.99.9 to 5.101.2. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](webpack/webpack@v5.99.9...v5.101.2) --- updated-dependencies: - dependency-name: webpack dependency-version: 5.101.2 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * SPARK-12: Move to monorepo setup by splitting Stacks Docs and Classic into NPM workspaces (#1969) * mention why we are doing this as part of project SHINE * move folders * update paths * fix docs site and visual tests script * fix a11y and unit test scripts and tweak visual regression threshold * fix workflow tests * revert ci import paths to fix tests * try older image * fix visual ci tests? * mark stacks-docs not publishable * adjust adr based on pr feedback * adjust names * address PR feedback * add missing workspace param * switch back to old script * fix netlify and a11y * fix path * try fix workflows * fix harder * PR feedback * pr feedback round 2 * move some more packages around * Create eighty-pillows-relate.md * chore(screenshots): adjust gitignore patterns excluding failed images (#1972) * chore(monorepo): follow-up tweaks post monorepo changes (#1974) * chore(git-lfs): ensure visual test baseline images are tracked by git lfs (#1978) * Fix aria-current attribute placement in sidebar widget navigation examples (#1970) * chore(new-release) (#1979) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * build(deps-dev): bump vite from 7.1.3 to 7.1.5 (#1980) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 7.1.3 to 7.1.5. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v7.1.5/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-version: 7.1.5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: svc_tooling <svc_stacks@stackoverflow.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Tavian Taylor <ttaylor@stackoverflow.com> Co-authored-by: Dan Cormier <dancormierall@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Giamir Buoncristiani <gbuoncristiani@stackoverflow.com> Co-authored-by: qheaden-stack <101581623+qheaden-stack@users.noreply.github.com>

* SPARK-8: Fix Modal Focus Issue when using Keyboard (#1963) * fix reported focus issue * Also handle case where modal has no tabbable elements * fix webpack.config.js for windows * move if check up * Create loud-suits-stare.md * fix whitespace * revert html changes * revert harder * add tests * lint * chore(new-release) (#1964) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * [SPARK-6] - update the notice border color for dark mode and high contrast dark mode (#1965) * Correct readme * Don't run minicssextractplugin when running locally * Revert changes * update border colour for dark mode and high contrast dark mode * Create tasty-masks-pump.md * Minor notice border style refactor * Update visual regression test images --------- Co-authored-by: Dan Cormier <dancormierall@gmail.com> * chore(new-release) (#1966) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * build(deps-dev): bump webpack from 5.99.9 to 5.101.2 (#1967) Bumps [webpack](https://github.com/webpack/webpack) from 5.99.9 to 5.101.2. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](webpack/webpack@v5.99.9...v5.101.2) --- updated-dependencies: - dependency-name: webpack dependency-version: 5.101.2 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * SPARK-12: Move to monorepo setup by splitting Stacks Docs and Classic into NPM workspaces (#1969) * mention why we are doing this as part of project SHINE * move folders * update paths * fix docs site and visual tests script * fix a11y and unit test scripts and tweak visual regression threshold * fix workflow tests * revert ci import paths to fix tests * try older image * fix visual ci tests? * mark stacks-docs not publishable * adjust adr based on pr feedback * adjust names * address PR feedback * add missing workspace param * switch back to old script * fix netlify and a11y * fix path * try fix workflows * fix harder * PR feedback * pr feedback round 2 * move some more packages around * Create eighty-pillows-relate.md * chore(screenshots): adjust gitignore patterns excluding failed images (#1972) * chore(monorepo): follow-up tweaks post monorepo changes (#1974) * chore(git-lfs): ensure visual test baseline images are tracked by git lfs (#1978) * Fix aria-current attribute placement in sidebar widget navigation examples (#1970) * chore(new-release) (#1979) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * build(deps-dev): bump vite from 7.1.3 to 7.1.5 (#1980) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 7.1.3 to 7.1.5. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v7.1.5/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-version: 7.1.5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(docs): add readme for each workspace (#1982) * add readme's for each package * Create six-buckets-grab.md * adjust stacks classic readme a bit * don't publish changeset for private package stacks-docs (#1983) * chore(new-release) (#1985) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: svc_tooling <svc_stacks@stackoverflow.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Tavian Taylor <ttaylor@stackoverflow.com> Co-authored-by: Dan Cormier <dancormierall@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Giamir Buoncristiani <gbuoncristiani@stackoverflow.com> Co-authored-by: qheaden-stack <101581623+qheaden-stack@users.noreply.github.com>

ttaylor-stack added 5 commits August 7, 2025 10:00

Correct readme

d107f80

Don't run minicssextractplugin when running locally

b443604

Revert changes

27ca281

update border colour for dark mode and high contrast dark mode

2a56b0a

Merge branch 'SPARK-6/add_border_colors_to_Notice_component_in_dark_m…

9f0b55b

…odes' into ttaylor/spark-6/update-notice-border-color-for-darkmode-and-highcontrast-darkmode

ttaylor-stack requested review from dancormier, giamir and mukunku August 7, 2025 16:11

ttaylor-stack and others added 3 commits August 7, 2025 17:26

Create tasty-masks-pump.md

e130575

Minor notice border style refactor

678326d

Update visual regression test images

0afed48

dancormier reviewed Aug 7, 2025

View reviewed changes

ttaylor-stack merged commit 236f4a5 into develop Aug 12, 2025
16 of 17 checks passed

ttaylor-stack deleted the ttaylor/spark-6/update-notice-border-color-for-darkmode-and-highcontrast-darkmode branch August 12, 2025 09:05

stacks-tooling mentioned this pull request Aug 12, 2025

chore(new-release) #1966

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[SPARK-6] - update the notice border color for dark mode and high contrast dark mode #1965

[SPARK-6] - update the notice border color for dark mode and high contrast dark mode #1965

Uh oh!

ttaylor-stack commented Aug 7, 2025

Uh oh!

changeset-bot bot commented Aug 7, 2025 •

edited

Loading

Uh oh!

netlify bot commented Aug 7, 2025 •

edited

Loading

Uh oh!

dancormier Aug 7, 2025

Uh oh!

dancormier Aug 7, 2025

Uh oh!

dancormier Aug 7, 2025

Uh oh!

dancormier left a comment

Uh oh!

dancormier Aug 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		This command will pull up the local dev server at http://localhost:8000. You can also view our [building guidelines](https://stackoverflow.design/product/develop/building).
		This command will pull up the local dev server at http://localhost:8080. You can also view our [building guidelines](https://stackoverflow.design/product/develop/building).

[SPARK-6] - update the notice border color for dark mode and high contrast dark mode #1965

[SPARK-6] - update the notice border color for dark mode and high contrast dark mode #1965

Uh oh!

Conversation

ttaylor-stack commented Aug 7, 2025

Uh oh!

changeset-bot bot commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stacks ready!

Uh oh!

dancormier Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

dancormier Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

dancormier Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

dancormier left a comment

Choose a reason for hiding this comment

Visual regression tests

Uh oh!

dancormier Aug 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Aug 7, 2025 •

edited

Loading

netlify bot commented Aug 7, 2025 •

edited

Loading