feat: use new color palette

[tanvibhakta]

Description

handoff for hex values: https://www.notion.so/appsmith/New-Colors-86633b9e99674c2db9c63587c1fc7376 handoff for semantic token changes: https://www.notion.so/appsmith/Semantic-Color-Token-174c8017d8e5481b833805c22345f493 Fixes https://github.com/appsmithorg/appsmith/issues/25719

Depends on https://github.com/appsmithorg/appsmith/pull/25747

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

• Manual on storybook
• Manual on main repo
• Jest
• 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

• [ ] My code follows the style guidelines of this project
• [ ] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes

QA activity:

• [ ] Test plan has been approved by relevant developers
• [ ] Test plan has been peer reviewed by QA
• [ ] Cypress test cases have been added and approved by either SDET or manual QA
• [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA
• [ ] Added Test Plan Approved label after reveiwing all Cypress test

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 8c1f67c644bd160552826a127a0ffe9d6393b568

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 3, 2023 2:04pm

[tanvibhakta]

@vasanthappsmith needs to hand off all the updates to our existing semantic tokens before this PR can go in.

This PR is blocking https://github.com/appsmithorg/design-system/pull/538. When this PR goes in, the tag PR will Just Work ™️.

[albinAppsmith]

Button have a different border color

[albinAppsmith]

Is this active state correct? cc: @vasanthappsmith

[vasanthappsmith]

https://theappsmith.slack.com/archives/C0293DVQACW/p1689573934172429?thread_ts=1689477001.434849&cid=C0293DVQACW

During our discussion, we came to the conclusion that the Red-Error button does not fit well with the application in Modal and other places, with secondary action buttons. It also has very poor contrast with the background and text. We tried altering the hues of the color like 50, 100, and 200 to fit, but found that this does not work well for other use-cases. Hence, we suggest having a darker button. Attaching options for the button variants.

Based on the conversation we had last time. You suggested we should have a separate task on this.

[tanvibhakta]

@vasanthappsmith

You suggested we should have a separate task on this.

This does not mean that it is okay to break the current experience of the error button.

[vasanthappsmith]

@tanvibhakta What do you suggest then? A quick fix?

Also, I don't remember having a border for buttons. If it's hard to replace now. Can we have a '-500' for the buttons?

[tanvibhakta]

What do you suggest then? A quick fix?

No, we need a holistic solution, this is why we allocated all the time we did towards color palette

Also, I don't remember having a border for buttons.

This is why we we don't rely on memory when making design changes, we rely on existing documentation, and prototyping.

If it's hard to replace now. Can we have a '-500' for the buttons?

No, we use semantic tokens in all the places, and we cannot replace it with a primary token, that would defeat the purpose of us having a design system and a token hierarchy.

I think your next steps here should be to go through every state and every component in the preview here, make a note of the changes that are needed, and then you can go back to the drawing board.

cc @AbhaySM

[vasanthappsmith]

Sure, I can do that.

Do we have different semantics for "fg" icons? We should have them since we need to differentiate between the icons and text for callouts/toasts. For emphasized text, we will also use 700, which is for the tags and callout text.

cc: @AbhaySM

[tanvibhakta]

/generate-alpha

[github-actions[bot]]

Publish Result: @appsmithorg/[email protected]

[dpulls[bot]]

:tada: All dependencies have been resolved !