🐛 fix: Replaced hardcoded colors in ReplaceCardModal and CodeBlock with theme tokens. by gulshank0 · Pull Request #1497 · kubestellar/console

gulshank0 · 2026-02-27T19:57:42Z

📌 Fixes

Fixes #1322

📝 Summary of Changes

In web/src/components/dashboard/ReplaceCardModal.tsx:

bg-slate-800/50 → bg-secondary/50 (KEEP the /50 opacity)

In web/src/components/ui/CodeBlock.tsx:

text-gray-300 → text-foreground/80 (NOT text-muted-foreground — gray-300 is lighter and muted-foreground is too dark for code text)
text-gray-400 → text-muted-foreground
bg-gray-800/80 → bg-secondary/80 (KEEP the /80 opacity)
hover:bg-gray-700/80 → hover:bg-accent/80 (KEEP the /80 opacity)

Changes Made

Updated ...
Refactored ...
Fixed ...
Added tests for ...

Checklist

Please ensure the following before submitting your PR:

I have reviewed the project's contribution guidelines.
I have written unit tests for the changes (if applicable).
I have updated the documentation (if applicable).
I have tested the changes locally and ensured they work as expected.
My code follows the project's coding standards.

Screenshots or Logs (if applicable)

👀 Reviewer Notes

Add any special notes for the reviewer here

…th theme tokens Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>

netlify · 2026-02-27T19:57:48Z

❌ Deploy Preview for kubestellarconsole failed. Why did it fail? →

Name	Link
🔨 Latest commit	`c501f27`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69a27a4c6cb0a20008a9b1a0

github-actions · 2026-02-27T19:57:50Z

👋 Hey @gulshank0 — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

Claude Code (Opus 4.5 / 4.6) — recommended

GitHub Copilot

Cursor

Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

This is an automated message.

github-actions · 2026-02-27T19:57:51Z

Welcome to KubeStellar! 🚀 Thank you for submitting this Pull Request.

Before your PR can be merged, please ensure:

✅ DCO Sign-off - All commits must be signed off with git commit -s to certify the Developer Certificate of Origin

✅ PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), ⚠️ (breaking change)

Getting Started with KubeStellar:

📦 Quick Start
📖 Documentation
🎬 YouTube - Getting Started & Contributing

Contributor Resources:

🌟 Help KubeStellar Grow - We Need Adopters!

Our roadmap is driven entirely by adopter feedback. Whether you're using KubeStellar yourself or know someone who could benefit from multi-cluster Kubernetes:

📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction!

A maintainer will review your PR soon. Feel free to ask questions in the comments or on Slack!

Copilot

Pull request overview

This PR aims to remove hardcoded Tailwind palette colors from two UI components so they adapt correctly to light/dark theme switching.

Changes:

Updated ReplaceCardModal category badge styling to use semantic theme tokens.
Updated CodeBlock dark-theme text and button colors to use theme tokens (partial).
Kept specified opacity modifiers (/50, /80) in the updated classes.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
web/src/components/ui/CodeBlock.tsx	Swaps some dark-mode `gray-` classes for theme tokens, but still leaves several hardcoded `gray-` classes in the component.
web/src/components/dashboard/ReplaceCardModal.tsx	Replaces `slate-*` badge styles with theme tokens for better theme compatibility.

Copilot · 2026-02-27T20:00:33Z

        <button
          onClick={handleCopy}
-          className="p-1.5 rounded bg-gray-200/80 dark:bg-gray-800/80 hover:bg-gray-300/80 dark:hover:bg-gray-700/80 transition-colors"
+          className="p-1.5 rounded bg-gray-200/80 dark:bg-secondary/80 hover:bg-gray-300/80 dark:hover:bg-accent/80 transition-colors"


This button styling still contains hardcoded light-theme grays (bg-gray-200/80 and hover:bg-gray-300/80). That conflicts with the stated goal / issue acceptance criteria of removing gray-*/slate-* classes from this component. Switch these remaining light-mode color classes to the equivalent theme tokens (and consider removing the dark: variants once both themes use tokens).

Copilot · 2026-02-27T20:00:34Z

            <AlertCircle className="w-4 h-4 text-red-500 dark:text-red-400" />
          ) : (
-            <Copy className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+            <Copy className="w-4 h-4 text-gray-600 dark:text-muted-foreground" />


The copy icon still uses a hardcoded text-gray-600 color in light theme, which violates the requirement to remove gray-* classes from this file. Replace it with an appropriate semantic token (e.g., text-muted-foreground/text-foreground) so it adapts to theme changes.

Copilot · 2026-02-27T20:00:34Z

      <pre className={`bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-md p-4 overflow-x-auto ${fontSize === 'lg' ? 'text-sm' : fontSize === 'base' ? 'text-xs' : 'text-[11px]'}`}>
-        <code className={`language-${language} text-gray-800 dark:text-gray-300 font-mono`}>
+        <code className={`language-${language} text-gray-800 dark:text-foreground/80 font-mono`}>


The <pre>/<code> block still has multiple hardcoded gray classes (bg-gray-100, dark:bg-gray-900, border-gray-200, dark:border-gray-800, text-gray-800). This prevents full theme-token adoption and fails the “no gray-*/slate-* classes” acceptance criteria for this file. Replace these with semantic tokens (e.g., bg-muted/bg-secondary, border-border, text-foreground with the desired opacity) so both light and dark themes are handled via tokens.

Copilot · 2026-02-27T20:00:34Z

                    </div>
                    <p className="text-xs text-muted-foreground line-clamp-2">{cardType.description}</p>
-                    <span className="inline-block mt-1 text-[10px] text-slate-500 bg-slate-800/50 px-1.5 py-0.5 rounded">{cardType.category}</span>
+                    <span className="inline-block mt-1 text-[10px] text-muted-foreground bg-secondary/50 px-1.5 py-0.5 rounded">{cardType.category}</span>


The issue description for #1322 specifies bg-secondary (no opacity) for this badge background, but the change uses bg-secondary/50. Please confirm which is intended and align either the implementation or the issue/PR description so the acceptance criteria are unambiguous.

clubanderson

1495 🐛 fix: Replaced hardcoded gray/slate colors in WidgetExportModal with theme tokens. gulshank0
1410 🐛 fix(auth): replace hardcoded colors in Login.tsx with theme-aware tokens arnavgogia20
1380 ✨: add Metal3 monitoring card to KubeStellar Console aaradhychinche-alt

clubanderson

Review: Incomplete theme token migration

The dark-mode conversions look correct, but this PR doesn't satisfy the acceptance criteria from #1322:

No hardcoded gray- or slate- color classes remain in either file

Remaining hardcoded colors in `CodeBlock.tsx`:

bg-gray-200/80 → should be bg-secondary/80
hover:bg-gray-300/80 → should be hover:bg-accent/80
text-gray-600 → should be text-muted-foreground
bg-gray-100 → should be bg-secondary
border-gray-200 → should be border
dark:bg-gray-900 → should be dark:bg-secondary
dark:border-gray-800 → should be dark:border
text-gray-800 → should be text-foreground

Please convert ALL light and dark mode hardcoded colors to theme tokens. The PR currently only converts ~4 of the ~12 hardcoded values.

clubanderson · 2026-02-27T21:09:20Z

@gulshank0 Thanks for the contribution! The dark-mode token swaps look good, but there are still ~8 hardcoded gray- classes remaining in CodeBlock.tsx (light-mode values). Issue #1322 requires all hardcoded colors removed. Please update and I'll re-review. 👍

Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>

kubestellar-prow · 2026-02-28T05:12:09Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from clubanderson. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>

clubanderson

1410 🐛 fix(auth): replace hardcoded colors in Login.tsx with theme-aware tokens arnavgogia20
1380 ✨: add Metal3 monitoring card to KubeStellar Console aaradhychinche-alt

…Block (kubestellar#1322) - Replaced ALL hardcoded gray/slate values - Covered both light and dark mode tokens - Preserved opacity modifiers (/50, /80) - Maintained code readability with text-foreground/80 - Addresses incomplete migration in kubestellar#1497 Fixes kubestellar#1322 Signed-off-by: arnavgogia20 <arnavgogia404@gmail.com>

kubestellar-prow · 2026-03-02T22:55:10Z

PR needs rebase.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

clubanderson · 2026-03-02T22:56:01Z

👋 @gulshank0 — thank you for this contribution! Closing in favor of #1527 by @arnavgogia20 which addresses the same issue (#1322) with more complete coverage (including the light-mode values that were unconverted here).

We really appreciate you taking the time to work on this. Please consider picking up another issue — there are many good first issue and help wanted issues available! 🚀

…Block (#1322) (#1527) - Replaced ALL hardcoded gray/slate values - Covered both light and dark mode tokens - Preserved opacity modifiers (/50, /80) - Maintained code readability with text-foreground/80 - Addresses incomplete migration in #1497 Fixes #1322 Signed-off-by: arnavgogia20 <arnavgogia404@gmail.com>

🐛 fix: Replaced hardcoded colors in ReplaceCardModal and CodeBlock wi…

89aef80

…th theme tokens Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>

Copilot AI review requested due to automatic review settings February 27, 2026 19:57

kubestellar-prow Bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Feb 27, 2026

kubestellar-prow Bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Feb 27, 2026

Copilot started reviewing on behalf of gulshank0 February 27, 2026 19:58 View session

Copilot AI reviewed Feb 27, 2026

View reviewed changes

clubanderson reviewed Feb 27, 2026

View reviewed changes

clubanderson requested changes Feb 27, 2026

View reviewed changes

kubestellar-prow Bot assigned clubanderson Feb 27, 2026

🐛 fix: more hardcoded colors are being addressed

1e210fd

Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>

kubestellar-prow Bot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Feb 28, 2026

🐛 fix: minor correction

c501f27

Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>

clubanderson reviewed Feb 28, 2026

View reviewed changes

arnavgogia20 mentioned this pull request Mar 1, 2026

🐛 fix(ui): complete theme token migration for ReplaceCardModal and CodeBlock #1527

Merged

5 tasks

kubestellar-prow Bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Mar 2, 2026

clubanderson closed this Mar 2, 2026

Conversation

gulshank0 commented Feb 27, 2026

📌 Fixes

📝 Summary of Changes

Changes Made

Checklist

Screenshots or Logs (if applicable)

👀 Reviewer Notes

Uh oh!

netlify Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for kubestellarconsole failed. Why did it fail? →

Uh oh!

github-actions Bot commented Feb 27, 2026

Uh oh!

github-actions Bot commented Feb 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

clubanderson left a comment

Choose a reason for hiding this comment

Uh oh!

clubanderson left a comment

Choose a reason for hiding this comment

Review: Incomplete theme token migration

Remaining hardcoded colors in CodeBlock.tsx:

Uh oh!

clubanderson commented Feb 27, 2026

Uh oh!

kubestellar-prow Bot commented Feb 28, 2026

Uh oh!

clubanderson left a comment

Choose a reason for hiding this comment

Uh oh!

kubestellar-prow Bot commented Mar 2, 2026

Uh oh!

clubanderson commented Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Feb 27, 2026 •

edited

Loading

Remaining hardcoded colors in `CodeBlock.tsx`: