chore: Update WDS outline buttons subtlety

[ichik]

Description

Subtler borders to align better with the proposed design for FC.

Before	After

Automation

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

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/13815728571
Commit: d01d374
Cypress dashboard.
Tags: @tag.Sanity
Spec:

---

Wed, 12 Mar 2025 16:33:43 UTC

Communication

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

• Yes
• No

Summary by CodeRabbit

• New Features

  • Introduced additional, nuanced border color variants for both dark and light themes, providing refined color distinctions across accent, neutral, positive, negative, and warning elements.

• Style

  • Updated outlined button styling to utilize the new subtle color variations, enhancing the overall visual polish and clarity of UI elements.

• Bug Fixes

  • Adjusted expected output values for the bgNeutralHover color in test cases to reflect updated RGB values under various conditions.

[coderabbitai]

Walkthrough

This change introduces subtle variations for border colors across both dark and light themes. New methods and properties have been added to the theme classes to compute a slightly modified version of the base border colors by adjusting lightness and chroma values. Additionally, the color interface is updated to include these properties, and the button component CSS now uses the subtle color variant for its outline.

Changes

File(s)	Change Summary
.../DarkModeTheme.ts, .../LightModeTheme.ts	Added new methods/getters (bdAccentSubtle, bdNeutralSubtle, bdPositiveSubtle, bdNegativeSubtle, bdWarningSubtle) and updated getColors to include these properties.
.../types.ts	Extended the ColorModeTheme interface with five new properties for subtle border colors.
.../Button/src/styles.module.css	Updated the outline property from var(--color-bd-$(color)) to var(--color-bd-$(color)-subtle) to utilize the newly defined subtle colors.
.../LightModeTheme.test.ts	Updated expected RGB values for bgNeutralHover in multiple test cases to reflect changes in color logic.

Sequence Diagram(s)

sequenceDiagram
    participant UI as UI Component
    participant TM as Theme Manager
    participant Theme as Theme (Dark/Light)
    
    UI->>TM: Request color palette
    TM->>Theme: invoke getColors()
    Theme-->>TM: Return palette (standard + subtle colors)
    TM->>UI: Provide palette for component styling
    UI->>UI: Apply subtle border styles using CSS

Loading

Possibly related PRs

• chore: WDS text inputs visual refinements #35581: Introduced new subtle border color properties and methods in the theme classes.
• chore: WDS outline buttons color adjustment #34615: Made adjustments to subtle border color variants specifically for theme classes in both dark and light modes.
• chore: Refactor WDSTableWidget with basic features #33286: Related changes in the theme classes for introducing subtle border colors.

Suggested labels

Enhancement, Task, WDS team, ADS Components, Design System Product, ok-to-test

Suggested reviewers

• ApekshaBhosale
• KelvinOm
• tbrizitsky

Poem

A gentle tweak in the code, so bright,
Subtle borders now set the UI alight.
Colors whisper in soft, designed hues,
Delightfully crafted for subtle views.
Code and art in joyous flight!

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 0fb502b and d01d374.

📒 Files selected for processing (2)

• app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts (8 hunks)
• app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (7)

• GitHub Check: client-unit-tests / client-unit-tests
• GitHub Check: client-lint / client-lint
• GitHub Check: client-build / client-build
• GitHub Check: client-prettier / prettier-check
• GitHub Check: storybook-tests
• GitHub Check: chromatic-deployment
• GitHub Check: chromatic-deployment

🔇 Additional comments (10)

app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts (2)

277-277: Tests updated to match the new bgNeutralHover implementation.

The expectation for lighter neutral hover color is aligned with the implementation change in LightModeTheme.ts where the lightness increment was increased.

---

301-301: Test expectations properly updated for all bgNeutralHover scenarios.

These test expectation changes reflect the implementation changes in the bgNeutralHover method which now returns lighter colors across all cases, ensuring better contrast for hover states.

Also applies to: 309-309, 317-317

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

110-110: LGTM: New subtle border color properties properly exposed in getColors.

These new properties correctly expose the subtle border variants in the theme's color palette.

Also applies to: 114-114, 117-117, 120-120, 123-123

---

357-357: Significant increase to hover state lightness.

The lightness increment was increased substantially (to 0.5) for bgNeutralHover when the base color has very low lightness. This creates a more noticeable hover effect.

---

970-983: Border accent color derivation refined.

The border accent color implementation has been improved by:

1. Basing it on fgAccent instead of the previous source
2. Adjusting the contrast threshold to 25
3. Using cleaner conditional checks for color chroma values

These changes make the implementation clearer and more maintainable.

---

989-996: New bdAccentSubtle implementation for outline buttons.

This implementation creates a subtler accent border by increasing lightness, which achieves the PR's goal of creating less prominent borders for outline buttons.

---

1052-1059: Well-implemented neutral subtle border.

The neutral subtle border implementation follows the same pattern as the accent subtle border, providing a consistent approach to creating subtler borders.

---

1097-1105: Positive subtle border carefully balances lightness and chroma.

This implementation not only increases lightness but also reduces chroma, which is appropriate for a positive (green) color to maintain legibility while being subtle.

---

1143-1151: Negative subtle border implementation with fine-tuned adjustments.

The negative color (red) receives both lightness increase and a slight hue adjustment, which helps maintain its warning characteristics while achieving the desired subtlety.

---

1189-1197: Warning subtle border implemented with balanced adjustments.

The warning color implementation uses modest adjustments to both lightness and chroma, ensuring the warning color remains recognizable while achieving the desired subtlety for outline buttons.

---

🪧 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.