## Description
Fixes#39743
| Before | After |
|--------|--------|
| <img width="656" alt="Screenshot 2025-04-17 at 12 10 57"
src="https://github.com/user-attachments/assets/9d684160-6368-417e-a2e1-3e1378f85006"
/> | <img width="659" alt="Screenshot 2025-04-17 at 12 10 05"
src="https://github.com/user-attachments/assets/d53136ec-6bdc-4d26-9843-8c68d8695c98"
/> |
## Automation
/ok-to-test tags="@tag.Sanity"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!IMPORTANT]
> 🟣🟣🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/14513262899>
> Commit: cb548296b06fcb3d5598233ab572d72b5802a80f
> Workflow: `PR Automation test suite`
> Tags: `@tag.Sanity`
> Spec: ``
> <hr>Thu, 17 Apr 2025 10:08:35 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**
- Adjusted color tones for negative foreground elements in both dark and
light modes, resulting in updated visual appearance for certain UI
elements.
- **Tests**
- Updated test cases to reflect the new color values for negative
foreground elements in both dark and light modes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fixes#39900
| Before | After |
|--------|--------|
| <img width="746" alt="Screenshot 2025-04-04 at 12 28 54"
src="https://github.com/user-attachments/assets/8e36f87d-8340-4b83-92d4-9e3ff2525f4d"
/> | <img width="707" alt="Screenshot 2025-04-04 at 12 41 51"
src="https://github.com/user-attachments/assets/e786f8e8-0a7e-4a9c-8671-536962622ea2"
/> |
## Automation
/ok-to-test tags="@tag.Sanity"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
## Description
Fixes#39928
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!IMPORTANT]
> 🟣🟣🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/14243470954>
> Commit: 76d2cf3d2d8fecd9896c09cd87af1bb01ead7a7c
> Workflow: `PR Automation test suite`
> Tags: `@tag.Anvil`
> Spec: ``
> <hr>Thu, 03 Apr 2025 12:54:05 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**
- Refined typography by adjusting font feature settings and letter
spacing to ensure consistent text rendering and visual appearance across
components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fixes brown-ish neutrals.
## Automation
/ok-to-test tags="@tag.Sanity"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
## Description
Fixes#39956
Increased lightness (in light mode) and chroma for `fg`, `fgNeutral`,
`fgNeutralSubtle`, `fgAccent` colors (and dependant child styles).
| Before | After |
|--------|--------|
| <img width="709" alt="Screenshot 2025-04-02 at 11 14 01"
src="https://github.com/user-attachments/assets/060bf65a-26c1-493a-a324-a0ca16172de6"
/> | <img width="734" alt="Screenshot 2025-04-02 at 11 33 05"
src="https://github.com/user-attachments/assets/9d3e28e0-c1b8-48c7-81a5-3f5e52dcfaa6"
/> |
<details><summary>Examples with other seeds, changes to dark mode
etc.</summary>
<p>
<img width="981" alt="Screenshot 2025-04-02 at 11 37 42"
src="https://github.com/user-attachments/assets/7bf55666-b3df-4a48-a5ec-42437aa95f0d"
/>
<img width="1001" alt="Screenshot 2025-04-02 at 11 38 02"
src="https://github.com/user-attachments/assets/776556b7-e027-4253-95e1-8a01e990bff3"
/>
<img width="1005" alt="Screenshot 2025-04-02 at 11 38 08"
src="https://github.com/user-attachments/assets/3747a5a9-08bc-4057-a171-3bb1aff33f46"
/>
<img width="1015" alt="Screenshot 2025-04-02 at 11 38 13"
src="https://github.com/user-attachments/assets/e561495f-a451-4f72-93e6-c6f2026258e9"
/>
</p>
</details>
## Automation
/ok-to-test tags="@tag.Sanity"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!IMPORTANT]
> 🟣🟣🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/14218884554>
> Commit: 4c300307ed74646e0839f26630bf66c5a4abac74
> Workflow: `PR Automation test suite`
> Tags: `@tag.Sanity`
> Spec: ``
> <hr>Wed, 02 Apr 2025 11:50:42 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
- **New Features**
- - **Light Mode Enhancements:** The light mode theme has been refreshed
with optimized foreground and accent colors, enhancing readability and
overall visual clarity.
- **Dark Mode Enhancements:** Updated the dark mode palette now delivers
a more balanced interface with refined contrasts and accent details for
improved visual appeal.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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 -->
## Description
Subtler borders to align better with the proposed design for FC.
| Before | After |
|--------|--------|
|
|
|
## 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/13815728571>
> Commit: d01d374dbc71cb38996b122cffab44c2719efa31
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13815728571&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Wed, 12 Mar 2025 16:33:43 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
- **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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
This PR enforces lodash version 4.17.21 or above, mitigating the
**Critical severity** vulnerability
[CVE-2019-10744](https://github.com/advisories/GHSA-jf85-cpcp-j695).
## Automation
/ok-to-test tags="@tag.Sanity"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- 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
- **Chores**
- Updated the version constraints for the lodash library across multiple
packages. This ensures a minimum version of 4.17.21 while allowing a
broader range of updates, including potential major releases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
https://github.com/user-attachments/assets/efccee4b-c329-4766-8fc6-92c8a135f8df
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced dynamic scrollbar width styling that enhances the overall
theme layout.
- Input and textarea components now automatically detect and adjust
based on scrollbar presence.
- Made available a new utility for accurately measuring scrollbar width.
- **Style**
- Applied new CSS rules to ensure proper positioning of suffix elements
in input groups when scrollbars appear.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13673799093>
> Commit: a72538ba720e28f178fcf2a39a58a3c73728e5c4
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13673799093&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Wed, 05 Mar 2025 10:49:39 UTC
<!-- end of auto-generated comment: Cypress test results -->
/ok-to-test tags="@tag.Widget"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
- **New Features**
- Introduced a custom widget with enhanced console logging and
communication capabilities.
- Added a configuration system for widget properties, including
visibility, style settings, and autocomplete functionality.
- Implemented a responsive design for the custom widget with dynamic
loading events and error handling.
- Expanded widget mapping to include the new custom widget type.
- Added support for multiple code templates (React, Vue, Vanilla JS) for
custom widget creation.
- Introduced a custom hook for managing widget height based on component
sizes and embedding status.
- **Bug Fixes**
- Resolved various issues related to event handling and message passing
between the widget and parent context.
- **Documentation**
- Added comprehensive comments and structure to configuration files for
better clarity and usability.
- **Style**
- Included a CSS reset stylesheet for consistent styling across
browsers.
- Introduced new CSS classes for improved widget styling.
- Enhanced styling rules to manage pointer events during widget
resizing.
- **Tests**
- Developed a test suite to ensure the reliability of the widget's
functionality and event handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12194686716>
> Commit: a757240165ea8d2730d6b6f2574b2c1c7335fada
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12194686716&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget`
> Spec:
> <hr>Fri, 06 Dec 2024 08:28:58 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Description
Fixes#36902
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 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/11385450221>
> Commit: 27bdba6a4e0f4d0a91b374ac52c3220f15bc099b
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11385450221&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Thu, 17 Oct 2024 13:21:51 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
- **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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Added ESLint rule to force blank lines between statements.
Fixes #`Issue Number`
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._
## Automation
/ok-to-test tags="@tag.All"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> 🔴🔴🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10924926728>
> Commit: 34f57714a1575ee04e94e03cbcaf95e57a96c86c
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10924926728&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.All
> Spec:
> The following are new failures, please fix them before merging the PR:
<ol>
> <li>cypress/e2e/Regression/ClientSide/Anvil/AnvilModal_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInlineButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilParagraphWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilStatsWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchGroupWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilZoneSectionWidgetSnapshot_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Wed, 18 Sep 2024 16:33:36 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
---------
Co-authored-by: Valera Melnikov <valera@appsmith.com>
## Description
Added styles for input to the combobox
Separate reused components(FieldDescription, FieldError, FieldLabel,
FieldListPopover)
Fixes#36224
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 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/10888601720>
> Commit: 7ef81de082771d0345478f5cf21ce7fadcc83547
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10888601720&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 16 Sep 2024 17:33:23 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
## Release Notes
- **New Features**
- Added a more comprehensive set of button size examples to the
`Button.stories.tsx` file.
- Introduced a new `FieldDescription` component in the `ComboBox.tsx`
file to handle field descriptions.
- **Styling Improvements**
- Refined the spacing, padding, and text size for the `Button` component
based on its size.
- Enhanced the visual feedback for checkboxes in invalid and selected
states in the `Checkbox` component.
- Simplified the CSS structure and improved the visual states of the
`ComboBox` component.
- **Refactor**
- Replaced legacy components in the `ComboBox` with more standardized
design system components for improved consistency.
- Removed the `ListBoxItem` component, indicating a change in the list
box rendering approach.
- Narrowed the allowed sizes for the `ComboBox` component, excluding
"xSmall" and "large" sizes.
- **Chores**
- Removed the `ErrorMessage` component and its associated export in the
`index.ts` file.
- Added a `verbatimModuleSyntax` property to the `tsconfig.json` file,
potentially affecting module handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#35175
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10845022776>
> Commit: 9224955b35c1083a6135afd956ba9026c91683c1
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10845022776&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 13 Sep 2024 08:02:36 UTC
<!-- end of auto-generated comment: Cypress test results -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Simplified theme management by removing icon style options from the
user interface.
- **Bug Fixes**
- Enhanced clarity in theme handling by refining type usage in various
components.
- **Chores**
- Removed deprecated icon style properties and constants to streamline
code and improve maintainability.
- Deleted a test case related to icon styles to focus testing efforts
elsewhere.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
/ok-to-test tags="@tag.All"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Introduced new hooks for icon management: `useIconDensity` and
`useIconSizing`.
- **Improvements**
- Refactored hooks to enhance performance by using `useMemo` instead of
state management, leading to more efficient calculations for icon size,
density, spacing, and typography.
- Streamlined theme management by consolidating logic and removing
unnecessary properties, improving clarity and maintainability.
- Optimized CSS class name management within the `useCssTokens` hook for
better performance.
- **Bug Fixes**
- Removed `fontFamily` property from various components, which may
affect text rendering but simplifies font management.
- **Documentation**
- Updated comments and documentation to reflect changes in typography
and theme handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10786030048>
> Commit: a0d12586c130252d4164305c5293c1b6fb67b5eb
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10786030048&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 10 Sep 2024 06:00:30 UTC
<!-- end of auto-generated comment: Cypress test results -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
/ok-to-test tags="@tag.Widget"
## Description
> [!TIP]
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._
Fixes #`Issue Number`
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._
## Automation
/ok-to-test tags=""
### 🔍 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/10414775054>
> Commit: 445dec9a23df945a5b2a965ce39b8369641bd2b8
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10414775054&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget`
> Spec:
> <hr>Fri, 16 Aug 2024 05:45:49 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
Fixes#34844
Fixes several issues that were spotted related to that:
- We were not applying `--fg-neutral-subtle` to our placeholder because
ADS has `!important` for their placeholder styling, so I added it to
ours for now
- After applying it, it became obvious that `--fg-neutral-subtle` and
the “parent” `--fg-neutral` needed adjustments too
- Disabled opacity needed an increase (became obvious) after making our
`--bg-neutral-subtle` lighter to deal with the primary issue of the
ticket)
- `--bg-neutral-subtle` were derived from the seed, despite the intent
to be derived from `--bg-accent-subtle`, fixed that too
| Before | After |
|--------|--------|
| <img width="1114" alt="before-light"
src="https://github.com/user-attachments/assets/a2c8b8ca-db5c-443d-84bf-8b7f7dd2333d">
| <img width="1102" alt="after-light"
src="https://github.com/user-attachments/assets/dd924865-ea19-4d74-b4ed-3037e0b418ef">
|
Additional preview of how dark mode looks after these changes:
<img width="1119" alt="after-dark"
src="https://github.com/user-attachments/assets/2d06df1e-211d-4b1d-a293-99710b34f7bd">
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> 🔴🔴🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10319662006>
> Commit: e1f99f2ea8956ff988c891470fc7fa4285ab32b0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319662006&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.Anvil
> Spec:
> The following are new failures, please fix them before merging the PR:
<ol>
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilHeadingWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInlineButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilParagraphWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Fri, 09 Aug 2024 13:25:27 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
- **New Features**
- Enhanced color themes for both dark and light modes, improving
aesthetic coherence and visual accessibility.
- **Bug Fixes**
- Adjusted opacity of disabled components to improve clarity and user
experience.
- **Style**
- Updated placeholder text styling in input fields to ensure consistent
visibility across different contexts.
- **Tests**
- Modified expected output values in color theme tests for improved
accuracy and alignment with new color definitions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fixes#34856
| Before | After |
|--------|--------|
| <img width="945" alt="Screenshot 2024-08-02 at 14 21 12"
src="https://github.com/user-attachments/assets/f157d616-6b42-4d56-be20-da778e5a9ba3">
| <img width="950" alt="Screenshot 2024-08-02 at 14 38 02"
src="https://github.com/user-attachments/assets/2e565b64-2379-4499-8e95-f1e58a5b7e55">
|
| <img width="934" alt="Screenshot 2024-08-02 at 14 21 21"
src="https://github.com/user-attachments/assets/760d1264-25ab-4c0f-9ae3-85c17dea0602">
| <img width="939" alt="Screenshot 2024-08-02 at 14 49 57"
src="https://github.com/user-attachments/assets/7c2c1671-75a2-4d46-9c23-96c46e4c1013">
|
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> 🔴🔴🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10216260757>
> Commit: e865f449f68767e53d0a0e4b19ae3294bea3987c
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10216260757&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.Anvil
> Spec:
> The following are new failures, please fix them before merging the PR:
<ol>
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilHeadingWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInlineButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilParagraphWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Fri, 02 Aug 2024 13:46:02 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
- **New Features**
- Enhanced color adjustment logic for both Dark and Light Mode themes to
improve visual harmony and accessibility.
- **Bug Fixes**
- Updated expected RGB values for neutral background colors in both Dark
and Light Mode in tests.
- **Refactor**
- Reworked lightness thresholds and adjustments for color properties for
a more refined user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fixes#35296
## Automation
/ok-to-test tags="@tag.All"
### 🔍 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/10182307436>
> Commit: 8b0aa1a644769cd28161b92a21f7426d0d94cf4f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10182307436&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 31 Jul 2024 15:48:59 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
## Summary by CodeRabbit
- **New Features**
- Updated TypeScript dependency across multiple modules to support newer
features and improvements.
- Updated `colorjs.io` dependency in design system packages to enhance
functionality.
- **Bug Fixes**
- Enhanced type-checking and overall code quality through dependency
updates.
- Refined color values in both `LightModeTheme` and `DarkModeTheme` to
improve visual accuracy.
- **Chores**
- Improved flexibility in dependency management by allowing minor and
patch updates for TypeScript and `colorjs.io`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Upgrade Typescript from 4.9.5 to 5.4
Upgrading to 5.5 is not possible until we upgrade colors.js lib. It will
be done in separate PR
More details here
https://github.com/color-js/color.js/issues/560#issuecomment-2182819685
## Automation
/ok-to-test tags="@tag.All"
### 🔍 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/10163124159>
> Commit: 8d2e93f2e2913e715686ccb058d3efddd55aabc9
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10163124159&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 30 Jul 2024 14:11:42 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
## Summary by CodeRabbit
- **New Features**
- Updated TypeScript dependency to the latest version (5.4), enhancing
overall functionality with potential new features and improvements.
- **Improvements**
- Enhanced type safety by refining the `isString` function, allowing
better type inference and preventing runtime errors.
- Improved comments and annotations in the `indirectEval` function for
better clarity on its usage and intent.
- Corrected typographical errors in error handling logic across multiple
controllers, improving reliability in error messaging.
- Updated export style for `IconNames` to clarify its purpose as a type,
enhancing developer experience.
- **Configuration Changes**
- Updated Jest configurations to better support ECMAScript Modules
(ESM), improving compatibility and allowing for more flexible module
handling.
- Adjusted TypeScript configuration to enhance module handling and
compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Add a new application setting which would allow users to set max width
of their applications.
Fixes#34993
## Automation
/ok-to-test tags="@tag.All"
### 🔍 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/10159296604>
> Commit: d2a98dcaecda2903dd8233f1f53ea119721095fa
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10159296604&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 30 Jul 2024 09:50:48 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
## Summary by CodeRabbit
- **New Features**
- Introduced a new constant for application maximum width settings,
allowing for `Unlimited`, `Large`, and `Medium` options.
- Added an `AppMaxWidthSelect` component for users to select maximum
width configurations from a dropdown menu.
- Enhanced `Canvas` and `MainContainerWrapper` components to accept and
utilize maximum width settings for improved layout adaptability.
- Implemented a new selector to retrieve the maximum width setting for
use in various components.
- Enhanced the theme property pane to allow users to customize the
application layout through maximum width selection.
- Updated `CanvasFactory` to utilize the application theme settings for
a more responsive layout.
- **Bug Fixes**
- Improved initialization logic to prevent null reference issues related
to theme settings.
- **Tests**
- Enhanced test cases to verify inclusion of maximum width settings in
exported applications and during application imports.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
## Description
1. Add scripts for local e2e testing in the docker container.
2. Add types for cypress-image-snapshot
In this PR, I also added the following PRS as they affect screenshot
tests as well. I did this to speed up the process and unblock the team.
#34528#34546#34676#34729#34638#34639#34511
To run E2E tests locally in docker, you need to do the following:
1. Run FE locally and prepare the tests for local launch. See the
instructions
[here](https://github.com/appsmithorg/appsmith/blob/release/contributions/ClientSetup.md).
2. Run `yarn cypress:snapshot:docker:build` — this will create a docker
container with the necessary environment.
3. Run `yarn cypress:snapshot:docker
"./cypress/e2e/Regression/ClientSide/Anvil/Widgets/*_spec.ts"
updateSnapshots=false`. Here we can use the path to a specific file, or
set `updateSnapshots=true` flag to update the screenshots.
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 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/9844579277>
> Commit: 75f26599b149f831051fbd631aaa059084b226dd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9844579277&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 08 Jul 2024 18:37:36 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
- **New Features**
- Added support for image snapshot testing with the
`@types/cypress-image-snapshot` dependency.
- **Refactor**
- Updated test specifications by removing unnecessary
`triggerInputInvalidState()` calls.
- Reorganized and improved efficiency of image snapshot methods for
various devices.
- **Chores**
- Updated `Dockerfile` to configure the Cypress environment with
specific versions for dependencies.
- Changed import paths in `e2e.js` for better module resolution.
- **Style**
- Fixed a comment typo in Cypress plugin configuration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Co-authored-by: unknown <vadim@appsmith.com>
## Description
Fixed overflow operation for widgets in zones.
Fixes
#32922#33537
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 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/9386697113>
> Commit: e0f8f24f3dd34ec39acb10846d35d0c2f020ca02
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9386697113&attempt=1"
target="_blank">Click here!</a>
<!-- 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
- **New Features**
- Introduced dynamic font size customization using CSS custom
properties.
- **Improvements**
- Adjusted layout behavior for `AnvilFlexComponent` to use `fit-content`
for better content fitting.
- Enhanced styling for elements with elevation property, including font
size and spacing adjustments.
- Switched to `isEditOnlyModeSelector` for more accurate layout wrapping
behavior in `SectionRow`.
- **Removals**
- Removed `renderMode` property from `BaseLayoutComponent`,
`FlexLayoutProps`, and related components for streamlined functionality.
- Simplified imports and prop handling in `AlignedWidgetRowComp`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Refactoring wds button component
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 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/8788334412>
> Commit: 3e11d5f7800eaf492cb42f049f42980ed33cd774
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8788334412&attempt=1"
target="_blank">Click here!</a>
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced the design system by switching the `Button` component imports
to `react-aria-components` across various components for improved
accessibility and performance.
- **Style Updates**
- Revised multiple CSS properties across components, improving visual
consistency and user interface aesthetics.
- **Refactor**
- Updated various components to use `ForwardedRef<HTMLButtonElement>`
replacing previous ref types, aligning with modern React patterns and
improving component interoperability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
- Update Storybook and related dependencies
- Delete the stories for old widget components
- Rewrite stories for new widgets(mdx to tsx)
Note: local chromatic doesn't work because of this
https://github.com/storybookjs/storybook/issues/22531
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced new component stories across various packages to enhance
design system documentation and user experience.
- **Documentation**
- Updated `.gitignore` files to optimize version control settings for
Storybook and build logs.
- **Refactor**
- Modified UI element positioning in Storybook theming for improved
layout management.
- **Style**
- Adjusted CSS properties for the `Select` component to ensure better
visual presentation.
- **Chores**
- Updated dependencies and scripts in package configurations to maintain
up-to-date development tools.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Plenty changes related to widgets alignment
1. Paragraph, button, inputs, single checkbox and switch widgets are
aligned along the baseline of the text content
2. The icons in the buttons and the single checkbox and switch are now
positioned absolutely so as not to affect the height of the components.
The height of the components now depends on text content.
3. All unnecessary paddings and borders in the layout have been removed:
- Canvas padding: `--outer-spacing-4`
- Gap between sections and zones: `--outer-spacing-4`
- Zone padding: `--outer-spacing-3`
- Gap between widgets: `--outer-spacing-3`
4. In widget selection styles replace `border` with `outline`, since the
`outline` one does not take space.
5. Add Changes to the flex-basis calculation method. Now the gap between
the zones is taken into account there.
6. Add a lot of small fixes related to the changes described above.
https://github.com/appsmithorg/appsmith/assets/11555074/b7c220eb-3e27-4039-9c15-6281bafe8008Fixes#29364
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!IMPORTANT]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8375537665>
> Commit: `f85b63c0a49f30b9762379c2f8c3bd38c7a8355f`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8375537665&attempt=2"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉
<!-- end of auto-generated comment: Cypress test results -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Improved handling of CSS variable values in Flex components.
- Enhanced styling and layout configurations for a better user
experience.
- **Bug Fixes**
- Fixed label positioning and styling issues in Checkbox and Switch
components.
- Adjusted padding, margin, and sizing for consistency and alignment.
- **Refactor**
- Enhanced flex layout handling and space distribution logic for
improved layout flexibility.
- **Style**
- Updated component styles for refined user interface aesthetics.
- **Chores**
- Updated feature flags and configurations for widgets and components to
enable new functionalities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#31899
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new hover outline color for input fields to enhance user
interaction.
- **Style**
- Updated hover outline colors for both Dark and Light modes to improve
visibility and aesthetics.
- **Tests**
- Adjusted tests to reflect new color values for hover states in both
Dark and Light themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes#31284
1. Decreased overall chroma everywhere except for actual `bgAccent`.
2. Couldn't reproduce the too-light heading text issue in Storybook,
`fg*` colors are all appropriately dark. Perhaps, a wrong token is
applied in the editor?
Before / After comparisons for warm and cold seeds:
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **Style**
- Enhanced contrast in both dark and light mode themes through
adjustments in chroma and lightness values.
- Improved color accuracy in the design system themes for better
representation.
- Updated color values in test scenarios for more precise RGB
representation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#31020
We now have options to express elevation with backgrounds plus shadows,
borders, or a combination of both.
https://github.com/appsmithorg/appsmith/assets/80973/6ab62bc7-b2e9-4de5-9c6a-d5447b591b14
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced new methods in both dark and light mode themes to calculate
elevation border color.
- **Refactor**
- Restructured the `Elevation` testing story to offer a display of
borders, shadows, and combined effects.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#31054
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Updated styling across various components to align with the new
elevation theme, enhancing visual consistency.
- **Refactor**
- Adjusted border-radius properties in CSS styles for multiple
components to utilize `--border-radius-elevation-3` for a cohesive look.
- **Chores**
- Enhanced the `Elevation` component to use specific elevation-related
border radius values for improved styling.
- **Style**
- Tweaked background color and border-radius properties in the
`Container` component based on `elevatedBackground` and `elevation`
props.
- **Documentation**
- Updated access to `borderRadius` property in the theme object for
`TooltipContent.tsx` to `theme?.borderRadiusElevation?.[1].value`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
- Icon tokens now respond to changes to density and sizing in the theme.
Added the appropriate settings to the config as well
- Fixed the documentation and rendering of some stories in storybook.
- Fixed icon rendering
#### PR fixes following issue(s)
Fixes#30955
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/e0cd818f-9716-4887-9f5e-aaa3c3ab9e30
#### Type of change
- Bug fix (non-breaking change which fixes an issue)
- Chore (housekeeping or task changes that don't impact user perception)
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [x] Jest
- [x] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced custom React hooks for dynamic icon sizing
(`useIconSizing`) and stroke width adjustments (`useIconDensity`).
- Revised `Dimension` component functionality with new token calculation
and user adjustments.
- **Refactor**
- Updated various type imports to improve consistency across theming
hooks.
- Simplified logic in detached widget hooks and removed unnecessary
styling logic in resizer components.
- **Style**
- Adjusted shadow colors and properties in CSS modules.
- Updated icon and button styling for better size and stroke width
management.
- **Documentation**
- Removed sections focusing on deprecated hooks and components in
storybook stories.
- **Chores**
- Changed favicon path in Storybook manager.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes#30890
This is not a full refinement, because we set height/block-size
explicitly for some of our widgets with styles [such as
these](0d16dc0382/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css (L171)).
As such, changes to e.g. inner spacing only affect the horizontal/inline
size and not the vertical/block one since the block padding doesn't
affect an element that has block size set explicitly.
Ideally, we should switch to implicit sizing to fully embrace
multi-dimensional sizing and density theming control over the widget
dimensions (i.e. control it with padding that consumes the tokens of the
inner spacing scale). If that is not feasible I'd like to know why and
how we can closely tie together the sizing scale with inner spacing.
