detach from Figma's tokens #2140

six7 · 2023-08-07T07:46:12Z

This is a WIP PR to detach from Figma's tokens and instead ship our own.

/describe

changeset-bot · 2023-08-07T07:46:15Z

🦋 Changeset detected

Latest commit: bb5e9ff

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

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

github-actions · 2023-08-08T20:31:56Z

Commit SHA:dd93d4dcbad1378d84ba22e65e72065bdce7c09a

Test coverage results 🧪

Code coverage diff between base branch:main and head branch: feat/introduce-own-tokens

Status	File	% Stmts	% Branch	% Funcs	% Lines
🟢	total	68.36 (0.08)	59.61 (0.01)	66.65 (0.07)	68.64 (0.08)
🔴	src/app/components/AppContainer/AppContainer.tsx	83.33 (0.73)	88.23 (-5.1)	75 (0)	83.33 (0.73)
🔴	src/app/components/inspector/TokenNodes.tsx	30 (-3.33)	0 (0)	0 (0)	33.33 (-4.17)
✨ 🆕	src/hooks/useFigmaTheme.ts	83.33	50	75	81.81
✨ 🆕	src/tokens/core.ts	100	100	100	100
✨ 🆕	src/tokens/dark.ts	100	100	100	100
✨ 🆕	src/tokens/light.ts	100	100	100	100

six7 · 2023-08-08T20:52:48Z

/review

github-actions · 2023-08-08T20:53:58Z

PR Analysis

🎯 Main theme: This PR is about detaching from Figma's tokens and shipping their own tokens.
📌 Type of PR: Enhancement
🧪 Relevant tests added: No
✨ Focused PR: Yes, the PR code diff changes are focused on detaching from Figma's tokens and introducing their own tokens.
🔒 Security concerns: No

PR Feedback

General suggestions: The PR looks good overall. It's great that the team is detaching from Figma's tokens and introducing their own tokens. However, it would be beneficial to add relevant tests to ensure the correctness of the changes.
🤖 Code feedback:
- relevant file: src/stitches.config.ts
  suggestion: Consider removing the unused globalTokens object. [medium]
  relevant line: const globalTokens = {
- relevant file: src/tokens/light.ts
  suggestion: Update the colors object to use the new token names. [important]
  relevant line: export const colors = {
- relevant file: src/tokens/dark.ts
  suggestion: Update the colors object to use the new token names. [important]
  relevant line: export const colors = {

How to use

To invoke the PR-Agent, add a comment using one of the following commands:
/review [-i]: Request a review of your Pull Request. For an incremental review, which only considers changes since the last review, include the '-i' option.
/describe: Modify the PR title and description based on the contents of the PR.
/improve: Suggest improvements to the code in the PR.
/ask <QUESTION>: Pose a question about the PR.

To edit any configuration parameter from 'configuration.toml', add --config_path=new_value
For example: /review --pr_reviewer.extra_instructions="focus on the file: ..."
To list the possible configuration parameters, use the /config command.

six7 · 2023-08-08T20:55:17Z

/describe

LukeFinch

Only a couple of minor comments - nothing major.
This looks really good - and will be super helpful for iterating designs!

LukeFinch · 2023-08-10T20:27:53Z

src/app/components/Button/StyledButton.tsx

        '&:focus-visible': {
          boxShadow: '$focus',
        },
      },
      ghost: {
        background: 'transparent',
        padding: '$2 $3',
-        color: '$fgBtnGhost',
-        '&:hover': {


Do ghost buttons not have hover states?

that must've been by mistake 👍

LukeFinch · 2023-08-10T20:34:32Z

src/app/components/ThemeSelector/ThemeSelector.tsx

@@ -110,7 +110,7 @@ export const ThemeSelector: React.FC = () => {
          return (
            filteredThemes.length > 0 && (
              <DropdownMenuRadioGroup value={typeof activeTheme[groupName] !== 'undefined' ? activeTheme[groupName] : ''}>
-                <Text css={{ color: '$staticTextMuted', padding: '$2 $3' }}>{groupName === INTERNAL_THEMES_NO_GROUP ? INTERNAL_THEMES_NO_GROUP_LABEL : groupName}</Text>
+                <Text css={{ color: '$contextMenuForegroundMuted', padding: '$2 $3' }}>{groupName === INTERNAL_THEMES_NO_GROUP ? INTERNAL_THEMES_NO_GROUP_LABEL : groupName}</Text>


This token name doesn't match the naming convention of 'fg' for foreground

💯 i will create a followup PR for a second refactor just to keep this PR a bit smaller. i'd also like to change textMuted / textDefault over to fgDefault etc

LukeFinch · 2023-08-10T20:36:46Z

src/hooks/useFigmaTheme.ts

@@ -5,8 +5,21 @@ export function useFigmaTheme() {

  useEffect(() => {
    const htmlClassList = document.documentElement?.classList || [];
+    console.log('useFigmaTheme', isDarkTheme, htmlClassList);


Do we need the console log here in production?

changes naming on a few tokens to align with Studio tokens, followup to #2140

six7 added 18 commits August 6, 2023 01:52

introduce tokensintroduce new token files

5cb6dd2

switch out border

bbbc0b8

rename danger

8544820

rename tooltip tokens

f3f0b84

fix tooltip font size

340faac

move token files

407f53a

clean up tooltip colors

2f6cabf

remove staticTextMuted

2286272

change pro badge

1764f41

remove fgSubtle in favor of text

543db59

clean btn tokens

c58fb70

remove switch tokens

e71b424

rename accentBg

dd7174c

replace accent, danger, success colors

0f86432

reintroduce buttonsecondary fg

8d59293

remove unused tokens

ca0b845

fix renamed tokens

4df6f41

adjust tokens

0057d68

adjust colors

f28871f

six7 added 3 commits August 8, 2023 22:37

fix dropdown max height

ca0c6bd

adjust dark values

807c778

Merge branch 'main' into feat/introduce-own-tokens

a0b2dd9

six7 marked this pull request as ready for review August 8, 2023 20:53

Create short-years-pump.md

35d7689

six7 requested a review from LukeFinch August 10, 2023 16:55

LukeFinch approved these changes Aug 10, 2023

View reviewed changes

six7 added 2 commits August 11, 2023 17:19

fix review

4d5b7a9

Merge branch 'main' into feat/introduce-own-tokens

bb5e9ff

six7 merged commit 03aa9d0 into main Aug 13, 2023
6 checks passed

six7 mentioned this pull request Aug 13, 2023

tokens restructure pt2 #2160

Merged

six7 added a commit that referenced this pull request Aug 14, 2023

tokens restructure pt2 (#2160)

5103b7d

changes naming on a few tokens to align with Studio tokens, followup to #2140

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

detach from Figma's tokens #2140

detach from Figma's tokens #2140

six7 commented Aug 7, 2023 •

edited

Loading

changeset-bot bot commented Aug 7, 2023 •

edited

Loading

github-actions bot commented Aug 8, 2023 •

edited

Loading

six7 commented Aug 8, 2023

github-actions bot commented Aug 8, 2023

six7 commented Aug 8, 2023

LukeFinch left a comment

LukeFinch Aug 10, 2023

six7 Aug 11, 2023

LukeFinch Aug 10, 2023

six7 Aug 11, 2023

LukeFinch Aug 10, 2023

detach from Figma's tokens #2140

detach from Figma's tokens #2140

Conversation

six7 commented Aug 7, 2023 • edited Loading

changeset-bot bot commented Aug 7, 2023 • edited Loading

🦋 Changeset detected

github-actions bot commented Aug 8, 2023 • edited Loading

Test coverage results 🧪

six7 commented Aug 8, 2023

github-actions bot commented Aug 8, 2023

PR Analysis

PR Feedback

How to use

six7 commented Aug 8, 2023

LukeFinch left a comment

Choose a reason for hiding this comment

LukeFinch Aug 10, 2023

Choose a reason for hiding this comment

six7 Aug 11, 2023

Choose a reason for hiding this comment

LukeFinch Aug 10, 2023

Choose a reason for hiding this comment

six7 Aug 11, 2023

Choose a reason for hiding this comment

LukeFinch Aug 10, 2023

Choose a reason for hiding this comment

six7 commented Aug 7, 2023 •

edited

Loading

changeset-bot bot commented Aug 7, 2023 •

edited

Loading

github-actions bot commented Aug 8, 2023 •

edited

Loading