Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2774 spike gradients driven by variables #2884

Merged
merged 44 commits into from
Jun 20, 2024
Merged

2774 spike gradients driven by variables #2884

merged 44 commits into from
Jun 20, 2024

Conversation

robinhoodie0823
Copy link
Contributor

Why does this PR exist?

Current plugin can not assign color variables to gradient's color stops due to previous figma plugin does not support it.

Closes #2774

What does this pull request do?

Updated figma plugin has boundVariables field with color field to support color variable assigning to gradient's color stops.
Updated gradientStops with color variables Ids in it.

Testing this change

Additional Notes (if any)

20240619_104106.mp4

@robinhoodie0823
feat: add token format option to get exact resolved value
757e3a4
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
64f7b9d 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
f2d07fa 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
9dc89e0 
…plugin into release-139
@robinhoodie0823
revert the DTCG format
0cffbfd
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
912f318 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
6193450 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
6088f3e 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
493c938 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
3ccab01 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
1a05a7e 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
9e63e5c 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
92e52b8 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
7a40c4a 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
b425dbb 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
b04d373 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
dce0e98 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
b9c6fef 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
def9936 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
4fadfb8 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
0e1b690 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
2057bbb 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
50e0794 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
473befc 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
f414eaa 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
31361df 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
1391624 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
586c6b1 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
44ea5d1 
…plugin into release-139
@robinhoodie0823
Merge branch 'release-139' of https://github.com/tokens-studio/figma-…
9aba90f 
…plugin into release-139
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jun 19, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 41bc273

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

@robinhoodie0823 robinhoodie0823 requested a review from six7 June 19, 2024 14:51
@six7 six7 linked an issue Jun 20, 2024 that may be closed by this pull request
[Spike]: Gradients driven by variables #2774
Closed
six7
six7 requested changes Jun 20, 2024
View reviewed changes
packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts Outdated
@@ -5,6 +5,16 @@ import { defaultTokenValueRetriever } from './TokenValueRetriever';
import { ColorPaintType, tryApplyColorVariableId } from '@/utils/tryApplyColorVariableId';
import { unbindVariableFromTarget } from './unbindVariableFromTarget';

const getReferenceTokensFromGradient = (rawValue: string): string[] => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you extract this into its own file and write a test? this should be able to properly extract values like

linear-gradient(90deg, {accent.bg} 0%, {accent.default} 100%) = [accent.bg, accent.default]
linear-gradient(90deg, {accent.bg} 0%, {accent.default} 50%, #ff0000 100%) = [accent.bg, accent.default]
linear-gradient({accent.bg} 0%, {accent.default} 100%) = [accent.bg, accent.default]

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because this fails today:

image

@robinhoodie0823 robinhoodie0823 requested a review from six7 June 20, 2024 10:18
six7
six7 approved these changes Jun 20, 2024
View reviewed changes
Copy link
Collaborator

@six7 six7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@six7 six7 merged commit 0a943ab into release-139 Jun 20, 2024
7 of 8 checks passed
@six7 six7 deleted the 2774-spike-gradients-driven-by-variables branch June 20, 2024 11:38
@SamIam4Hyma SamIam4Hyma added plugin v2 variables, UI, WTCG format, Bitbucket Figma variables token type gradient Not a type yet but exists in DTCG W3C token type color Figma export Previously create and sync styles variables Figma styles labels Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@six7 six7 six7 approved these changes

@macintoshhelper macintoshhelper Awaiting requested review from macintoshhelper

Assignees
No one assigned
Labels
Figma export Previously create and sync styles variables Figma styles Figma variables plugin v2 variables, UI, WTCG format, Bitbucket token type color token type gradient Not a type yet but exists in DTCG W3C
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Spike]: Gradients driven by variables
4 participants
@robinhoodie0823 @six7 @macintoshhelper @SamIam4Hyma