feat: WDS bg-color-soft color algo

[ichik]

Description

Fixes #36902

Automation

/ok-to-test tags="@tag.Anvil"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11385450221
Commit: 27bdba6
Cypress dashboard.
Tags: @tag.Anvil
Spec:

---

Thu, 17 Oct 2024 13:21:51 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

• Yes
• No

Summary by CodeRabbit

• New Features
  • Enhanced color adjustments for both dark and light modes, improving visual representation.
  • Dark mode now features refined chroma and lightness for background and foreground colors.
  • Light mode adjustments provide a darker neutral soft background and lighter hover states.

[coderabbitai]

Walkthrough

The changes in this pull request involve adjustments to the color generation logic within the DarkModeTheme and LightModeTheme classes. Specifically, modifications were made to chroma and lightness values for various background and foreground colors. These adjustments refine the visual representation of colors in both dark and light modes, enhancing the overall color palette.

Changes

File Path	Change Summary
app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts	Adjusted chroma and lightness values for bgNeutralSubtle, bgNeutralSoftHover, and bgNeutralSoftActive.
app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts	Modified lightness adjustments for bgNeutralSoft, bgNeutralSoftHover, and bgNeutralSoftActive.

Assessment against linked issues

Objective	Addressed	Explanation
Follow-up to color algorithm adjustments	✅

Suggested labels

Task, ok-to-test

Poem

In dark and light, the colors play,
Adjustments made to brighten the day.
Chroma and lightness, refined with care,
A visual treat, beyond compare!
With every shade, a new delight,
Themes now dance in day and night! 🎨

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between cdc56c0 and 27bdba6.

📒 Files selected for processing (2)

• app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts (2 hunks)
• app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts (1 hunks)

🧰 Additional context used

🔇 Additional comments (7)

app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts (3)

413-414: Well done on refining the color algorithm, class!

You've made a thoughtful adjustment to the chroma threshold in the bgNeutralSubtle getter. By reducing the threshold from 0.025 to 0.005, you've effectively decreased the minimum chroma for the neutral subtle background color. This change will result in a less saturated appearance, which can contribute to a more refined and subtle color palette in dark mode.

Remember, subtle changes like this can have a significant impact on the overall user experience. Keep up the good work in fine-tuning our color system!

---

451-451: Excellent work on enhancing the hover effect, students!

In the bgNeutralSoftHover getter, you've doubled the lightness increment from 0.01 to 0.02. This adjustment will make the hover state more pronounced and easier for users to perceive. It's a smart move that improves the interactive feedback of our interface.

Remember, in design, it's often the small details that make a big difference. This change will contribute to a more responsive and engaging user experience. Keep up the great work in refining our color system!

---

459-459: Bravo on improving the active state contrast, pupils!

In the bgNeutralSoftActive getter, you've increased the lightness decrement from 0.01 to 0.015. This clever adjustment will create a more noticeable difference between the active state and both the hover and resting states.

By enhancing this contrast, you're providing users with clearer visual feedback when they interact with elements. This contributes to a more intuitive and responsive interface. Well done on continuing to refine our color system and improve the overall user experience!

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts (4)

435-438: Well done, class! Let's examine this change.

The adjustment to the lightness value in the bgNeutralSoft method is a step in the right direction. By decreasing the lightness from 0.03 to 0.045, we're creating a slightly darker neutral soft background. This change may enhance the visibility of elements using this background and improve overall contrast in the user interface.

Can anyone tell me how this might affect the user experience? Think about readability and visual hierarchy.

---

443-446: Excellent adjustment! Let's discuss the implications.

In the bgNeutralSoftHover method, we've increased the lightness difference from 0.01 to 0.015. This is a subtle but important change, students. By making the hover state slightly lighter, we're enhancing the visual feedback when a user interacts with elements using this background.

Can you think of any UI components where this hover effect might be particularly useful? Consider buttons, menu items, or interactive cards.

---

451-454: A thoughtful modification! Let's analyze this change.

In the bgNeutralSoftActive method, we've increased the lightness decrease from 0.01 to 0.015. This change, class, makes the active state darker and more distinct from both the default and hover states.

How might this affect the user's perception of interactivity? Consider the visual hierarchy of states: default, hover, and active. How does this change reinforce the feedback loop for user interactions?

---

435-454: Class, let's summarize what we've learned from these changes!

The modifications we've examined in the LightModeTheme class demonstrate a cohesive approach to enhancing the visual feedback for neutral soft background states. By adjusting the lightness values, we've created:

1. A darker default state (bgNeutralSoft)
2. A more noticeable hover effect (bgNeutralSoftHover)
3. A more distinct active state (bgNeutralSoftActive)

These changes work together to improve the overall user experience by providing clearer visual cues for interactive elements. Remember, students, in user interface design, even small adjustments can have a significant impact on usability and aesthetics.

For your homework, I'd like you to consider how these changes might affect users with different visual abilities. How might we further improve accessibility while maintaining these visual enhancements?

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.