fix: features popup for light theme

[JivusAyrus]

Summary by CodeRabbit

• Style
  • Updated the New Features popup to use theme-aware design tokens for all text, background, and icon colors.
  • SVG icons now inherit the text color for consistent theming across light/dark modes.
  • Improved contrast and readability; secondary text uses muted tones.
  • Ensures visual consistency with the app theme while reducing harsh whites.
  • No changes to interactions or behavior.

Checklist

• I have discussed my proposed changes in an issue and have received approval to proceed.
• I have followed the coding standards of the project.
• Tests or benchmarks have been added or updated.
• Documentation has been updated on https://github.com/wundergraph/cosmo-docs.
• I have read the Contributors Guide.

[coderabbitai]

Walkthrough

Updated NewFeaturesPopup.tsx to replace hard-coded colors with semantic design tokens and currentColor-driven SVG fills. Updated class names for backgrounds and text, adjusted SVG to inherit color, and kept component logic and exports unchanged.

Changes

Cohort / File(s)	Summary
Design tokens and SVG theming studio/src/components/dashboard/NewFeaturesPopup.tsx	Replaced fixed colors with design tokens (bg-card, text-card-foreground, text-muted-foreground), added text-foreground to SVG, converted SVG fills to currentColor, no logic or API changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: add a popup about new features on the dashboard #2182 — Similar styling update for NewFeaturesPopup: switches hard-coded colors to design tokens and currentColor while keeping dismissal logic unchanged.

Pre-merge checks (2 passed, 1 warning)

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly summarizes the primary change of adjusting the features popup styling for the light theme and uses a conventional commit prefix, making it immediately understandable to reviewers.
Description Check	✅ Passed	The description includes a project-specific checklist and relevant screenshots demonstrating the popup behavior, which directly relate to the styling updates for the features popup in the light theme.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

✨ Finishing Touches

• 📝 Generate Docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (5)

studio/src/components/dashboard/NewFeaturesPopup.tsx (5)

46-50: Open-in-new: include noopener for safety.

Add noopener alongside noreferrer.

-          rel="noreferrer"
+          rel="noopener noreferrer"

---

56-63: Decorative SVG: mark as presentational and soften color for light theme.

Helps screen readers skip it and reduces visual weight on white cards.

-        <svg
+        <svg
           width="172"
           height="112"
           viewBox="0 0 172 112"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          className="text-foreground"
+          className="text-muted-foreground/40 dark:text-muted-foreground/30"
+          aria-hidden="true"
+          focusable="false"
+          role="presentation"
         >

---

55-55: Place SVG behind content to avoid overlaying text.

Currently z-40 renders above the card (even if pointer-events-none). Put it below the content’s z-10.

-      <div className="pointer-events-none absolute left-4 top-4 z-40">
+      <div className="pointer-events-none absolute left-4 top-4 z-0">

---

192-199: clipPath rect: drop fill attribute.

Fill has no effect inside clipPath; removing avoids unintended theming bleed.

           <clipPath id="clip0_354_8">
             <rect
               width="171"
               height="112"
-              fill="currentColor"
               transform="translate(0.625)"
             />
           </clipPath>

---

21-21: Optional: consider tokenizing the gradient stops.

Hard-coded HSLA stops won’t adapt to themes; consider design-token-based colors (e.g., from brand/primary scales).

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 698e9f1 and a8ddf92.

📒 Files selected for processing (1)

• studio/src/components/dashboard/NewFeaturesPopup.tsx (4 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Analyze (go)
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: build_test
• GitHub Check: build_push_image

🔇 Additional comments (1)

studio/src/components/dashboard/NewFeaturesPopup.tsx (1)

22-22: Good move to semantic tokens (bg-card, text-card-foreground, text-muted-foreground).

This aligns the popup with themeable design tokens and should fix contrast in light mode.

Also applies to: 25-25, 39-39