[docs] use variable styling for announcement bar

[cmpadden]

Summary & Motivation

Before

After

Test Plan

Changelog

The changelog is generated by an agent that examines merged PRs and
summarizes/categorizes user-facing changes. You can optionally replace
this text with a terse description of any user-facing changes in your PR,
which the agent will prioritize. Otherwise, delete this section.

[greptile-apps]

Greptile Summary

This PR updates the Docusaurus announcement bar to use design-system CSS variables instead of hardcoded colours, simplifies the HTML markup, and adds a rel="noopener noreferrer" attribute to the external link. However, two bugs prevent the intended result from being visible.

• The backgroundColor in docusaurus.config.ts is set to var(--theme-color-background-blue), which resolves to rgba(79, 67, 221, 0.12) (12% opacity) in light mode — effectively invisible on a white background.
• A new .theme-announcement-bar CSS block was added to docs/src/theme/DocCard/styles.module.css, which is a CSS Modules file. CSS Modules locally scopes every class name at build time, so the selector will never match the global Docusaurus element. The block is dead code and also contains a leftover color: red !important debug value.
• The rel="noopener noreferrer" addition to the external anchor is a good security improvement.

Confidence Score: 4/5

Not safe to merge as-is — the CSS module scoping bug produces dead code with leftover red debug styling, and the background colour resolves to near-transparent.

Two P1 defects: the announcement bar CSS is unreachable due to CSS Module scoping (and contains color: red), and the background colour variable resolves to 12% opacity making the bar nearly invisible. These are current, visible regressions rather than speculative issues.

Both changed files need attention: docs/src/theme/DocCard/styles.module.css (wrong file, dead CSS, debug colour) and docs/docusaurus.config.ts (near-transparent background variable).

Important Files Changed

Filename	Overview
docs/docusaurus.config.ts	Announcement bar updated to use CSS variables and simpler markup; backgroundColor resolves to a 12%-opacity blue that will likely be invisible on a white background.
docs/src/theme/DocCard/styles.module.css	New .theme-announcement-bar rule added to wrong file — CSS Module scoping means it will never target the real announcement bar; also contains leftover color: red !important debug code.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["docusaurus.config.ts\nbackgroundColor: var(--theme-color-background-blue)\ntextColor: var(--theme-color-text-default)"] --> B["Docusaurus builds\nannouncement bar"]
    B --> C["Inline style applied:\nbackground-color: rgba(79,67,221,0.12)\ncolor: rgba(3,6,21,1)"]
    C --> D["⚠️ Background nearly transparent\n(12% opacity on white page)"]

    E["DocCard/styles.module.css\n.theme-announcement-bar { color: red }"] --> F["CSS Modules build step"]
    F --> G["Compiled to:\n.DocCard_theme-announcement-bar__hash {}"]
    G --> H["❌ Never matches global\n.theme-announcement-bar element\n(Dead CSS)"]

Loading

_{Reviews (1): Last reviewed commit: "[docs] use variable styling for announce..." | Re-trigger Greptile}

[greptile-apps]

Dead CSS and leftover debug code in wrong file

This block has two problems:

1. CSS Modules scope: styles.module.css locally scopes every class name at build time, so .theme-announcement-bar is compiled to something like .DocCard_theme-announcement-bar__abc123. It will never match the global theme-announcement-bar element that Docusaurus generates for the announcement bar. The rule is effectively dead and will have no visible effect.

2. color: red !important: This looks like a leftover debugging artefact and contradicts the textColor: 'var(--theme-color-text-default)' value already set in docusaurus.config.ts.

If you intend to apply global styles to the announcement bar, the rule needs to live in a non-module stylesheet (e.g. custom.scss) and reference the global selector, for example:

// in custom.scss
.theme-announcement-bar {
  font-weight: bold;
}

[github-actions]

Deploy preview for dagster-docs ready!

Preview available at https://dagster-docs-njkjlb7po-elementl.vercel.app
https://colton-announcement-bar-tweaks.archive.dagster-docs.io

Direct link to changed pages: