Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Adjust WDS buttons (#39967)

Browse Source 
## Description

Fixes #39952 and #39953

| Before | After |
|--------|--------|
| <img width="303" alt="Screenshot 2025-03-28 at 10 43 02"
src="https://github.com/user-attachments/assets/b9b19214-66ee-42f0-a376-9f1c8ce88d7e"
/> | <img width="307" alt="Screenshot 2025-03-28 at 10 46 03"
src="https://github.com/user-attachments/assets/16248fbe-8bb2-4c22-aee4-8cd55c7ed53e"
/> |

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14127447165>
> Commit: c0ce65e3b5fdaf15649831e2d7f5873a77170880
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14127447165&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Fri, 28 Mar 2025 11:39:28 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- **Light Mode Enhancements:** Updated the brightness of subtle UI
elements in light mode, offering a more refined and balanced visual
appearance.
- **Button Design Updates:** Adjusted button text sizing so that buttons
designated as smaller now display a caption style, improving readability
and visual consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
vadim 2025-03-28 12:42:20 +01:00 committed by GitHub
parent 1e5b502237
commit 77dffefe28
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
View File

@ -990,7 +990,7 @@ export class LightModeTheme implements ColorModeTheme {
// Slightly subtler version of accent border, used in outlined buttons
const color = this.bdAccent.clone();
color.oklch.l += 0.35;
color.oklch.l += 0.42;
return color;
}
@ -1053,7 +1053,7 @@ export class LightModeTheme implements ColorModeTheme {
// Slightly subtler version of neutral border, used in outlined buttons
const color = this.bdNeutral.clone();
color.oklch.l += 0.35;
color.oklch.l += 0.47;
return color;
}
@ -1095,7 +1095,7 @@ export class LightModeTheme implements ColorModeTheme {
}
private get bdPositiveSubtle() {
// Slightly subtler version of negative border, used in outlined buttons
// Slightly subtler version of positive border, used in outlined buttons
const color = this.bdPositive.clone();
color.oklch.l += 0.07;
@ -1190,7 +1190,7 @@ export class LightModeTheme implements ColorModeTheme {
// Slightly subtler version of warning border, used in outlined buttons
const color = this.bdWarning.clone();
color.oklch.l += 0.05;
color.oklch.l += 0.06;
color.oklch.c -= 0.05;
return color;

4
app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx
View File

@ -36,7 +36,7 @@ const _Button = (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
data-text=""
fontWeight={500}
lineClamp={1}
size={size === "xSmall" ? "footnote" : "body"}
size={size === "xSmall" || size === "small" ? "caption" : "body"}
>
{children}
</Text>
@ -48,7 +48,7 @@ const _Button = (props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
{!Boolean(children) && (
<Text
data-empty-text=""
size={size === "xSmall" ? "footnote" : "body"}
size={size === "xSmall" || size === "small" ? "caption" : "body"}
>
&#8203;
</Text>