Add import-custom-colors Figma plugin
#415
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: mfranzke <[email protected]>
Co-authored-by: mfranzke <[email protected]>
mfranzke
reviewed
Sep 22, 2025
Co-authored-by: mfranzke <[email protected]>
Copilot
AI
changed the title
Copilot finished work on behalf of
mfranzke
September 22, 2025 13:28
|
@copilot I'd like to be more precise on the import format – it would be an external JSON file that the user should be able to upload, that includes a specific schema: {"colors":{"dibe-category1":{"0":{"$type":"color","$value":"#1a0909"},"1":{"$type":"color","$value":"#281111"},"2":{"$type":"color","$value":"#391b1b"},"3":{"$type":"color","$value":"#4b2626"},"4":{"$type":"color","$value":"#5e3131"},"5":{"$type":"color","$value":"#713c3c"},"6":{"$type":"color","$value":"#8c4c4c"},"7":{"$type":"color","$value":"#b06060"},"8":{"$type":"color","$value":"#c27f7f"},"9":{"$type":"color","$value":"#cea0a0"},"10":{"$type":"color","$value":"#dcc0c0"},"11":{"$type":"color","$value":"#eddfdf"},"12":{"$type":"color","$value":"#f4ecec"},"13":{"$type":"color","$value":"#f7f2f2"},"14":{"$type":"color","$value":"#fbf9f9"},"origin-light-default":{"$type":"color","$value":"#753e3e"},"origin-light-hovered":{"$type":"color","$value":"#281111"},"origin-light-pressed":{"$type":"color","$value":"#552b2b"},"on-origin-light-default":{"$type":"color","$value":"#fbf9f9"},"origin-dark-default":{"$type":"color","$value":"#753e3e"},"origin-dark-hovered":{"$type":"color","$value":"#281111"},"origin-dark-pressed":{"$type":"color","$value":"#552b2b"},"on-origin-dark-default":{"$type":"color","$value":"#fbf9f9"},"transparent-full-light-default":{"$type":"color","$value":"#8c4c4c00"},"transparent-full-light-hovered":{"$type":"color","$value":"#8c4c4c3d"},"transparent-full-light-pressed":{"$type":"color","$value":"#8c4c4c52"},"transparent-full-dark-default":{"$type":"color","$value":"#cea0a000"},"transparent-full-dark-hovered":{"$type":"color","$value":"#cea0a03d"},"transparent-full-dark-pressed":{"$type":"color","$value":"#cea0a052"},"transparent-semi-light-default":{"$type":"color","$value":"#8c4c4c14"},"transparent-semi-light-hovered":{"$type":"color","$value":"#8c4c4c3d"},"transparent-semi-light-pressed":{"$type":"color","$value":"#8c4c4c52"},"transparent-semi-dark-default":{"$type":"color","$value":"#cea0a029"},"transparent-semi-dark-hovered":{"$type":"color","$value":"#cea0a03d"},"transparent-semi-dark-pressed":{"$type":"color","$value":"#cea0a052"}},"dibe-category2":{"0":{"$type":"color","$value":"#110d0d"},"1":{"$type":"color","$value":"#1b1717"},"2":{"$type":"color","$value":"#282222"},"3":{"$type":"color","$value":"#362f2f"},"4":{"$type":"color","$value":"#443c3c"},"5":{"$type":"color","$value":"#534949"},"6":{"$type":"color","$value":"#685b5b"},"7":{"$type":"color","$value":"#837373"},"8":{"$type":"color","$value":"#9a8e8e"},"9":{"$type":"color","$value":"#b1a9a9"},"10":{"$type":"color","$value":"#cac5c5"},"11":{"$type":"color","$value":"#e4e2e2"},"12":{"$type":"color","$value":"#efeded"},"13":{"$type":"color","$value":"#f4f3f3"},"14":{"$type":"color","$value":"#faf9f9"},"origin-light-default":{"$type":"color","$value":"#473e3e"},"origin-light-hovered":{"$type":"color","$value":"#090707"},"origin-light-pressed":{"$type":"color","$value":"#2f2929"},"on-origin-light-default":{"$type":"color","$value":"#faf9f9"},"origin-dark-default":{"$type":"color","$value":"#473e3e"},"origin-dark-hovered":{"$type":"color","$value":"#090707"},"origin-dark-pressed":{"$type":"color","$value":"#2f2929"},"on-origin-dark-default":{"$type":"color","$value":"#faf9f9"},"transparent-full-light-default":{"$type":"color","$value":"#685b5b00"},"transparent-full-light-hovered":{"$type":"color","$value":"#685b5b3d"},"transparent-full-light-pressed":{"$type":"color","$value":"#685b5b52"},"transparent-full-dark-default":{"$type":"color","$value":"#b1a9a900"},"transparent-full-dark-hovered":{"$type":"color","$value":"#b1a9a93d"},"transparent-full-dark-pressed":{"$type":"color","$value":"#b1a9a952"},"transparent-semi-light-default":{"$type":"color","$value":"#685b5b14"},"transparent-semi-light-hovered":{"$type":"color","$value":"#685b5b3d"},"transparent-semi-light-pressed":{"$type":"color","$value":"#685b5b52"},"transparent-semi-dark-default":{"$type":"color","$value":"#b1a9a929"},"transparent-semi-dark-hovered":{"$type":"color","$value":"#b1a9a93d"},"transparent-semi-dark-pressed":{"$type":"color","$value":"#b1a9a952"}},"dibe-category3":{"0":{"$type":"color","$value":"#0b1000"},"1":{"$type":"color","$value":"#141a00"},"2":{"$type":"color","$value":"#1f2700"},"3":{"$type":"color","$value":"#2a3400"},"4":{"$type":"color","$value":"#364300"},"5":{"$type":"color","$value":"#425100"},"6":{"$type":"color","$value":"#536500"},"7":{"$type":"color","$value":"#6a8000"},"8":{"$type":"color","$value":"#819b00"},"9":{"$type":"color","$value":"#99b700"},"10":{"$type":"color","$value":"#b1d400"},"11":{"$type":"color","$value":"#caf200"},"12":{"$type":"color","$value":"#d5fe00"},"13":{"$type":"color","$value":"#e3ff95"},"14":{"$type":"color","$value":"#f1ffd2"},"origin-light-default":{"$type":"color","$value":"#d9ff52"},"origin-light-hovered":{"$type":"color","$value":"#a4c500"},"origin-light-pressed":{"$type":"color","$value":"#bde200"},"on-origin-light-default":{"$type":"color","$value":"#060900"},"origin-dark-default":{"$type":"color","$value":"#d9ff52"},"origin-dark-hovered":{"$type":"color","$value":"#a4c500"},"origin-dark-pressed":{"$type":"color","$value":"#bde200"},"on-origin-dark-default":{"$type":"color","$value":"#060900"},"transparent-full-light-default":{"$type":"color","$value":"#53650000"},"transparent-full-light-hovered":{"$type":"color","$value":"#5365003d"},"transparent-full-light-pressed":{"$type":"color","$value":"#53650052"},"transparent-full-dark-default":{"$type":"color","$value":"#99b70000"},"transparent-full-dark-hovered":{"$type":"color","$value":"#99b7003d"},"transparent-full-dark-pressed":{"$type":"color","$value":"#99b70052"},"transparent-semi-light-default":{"$type":"color","$value":"#53650014"},"transparent-semi-light-hovered":{"$type":"color","$value":"#5365003d"},"transparent-semi-light-pressed":{"$type":"color","$value":"#53650052"},"transparent-semi-dark-default":{"$type":"color","$value":"#99b70029"},"transparent-semi-dark-hovered":{"$type":"color","$value":"#99b7003d"},"transparent-semi-dark-pressed":{"$type":"color","$value":"#99b70052"}}}}These should get imported as "Base colors". Out of those, the modes should be able to get defined as light and dark aliases to these base colors. |
…ons and fix API version Co-authored-by: mfranzke <[email protected]>
... Implemented JSON file upload functionality supporting the exact design token schema you provided. The plugin now: • Parses JSON files with the The plugin maintains backward compatibility while adding the professional design token workflow you requested. All changes implemented in commit 5d40f47. |
Copilot finished work on behalf of
mfranzke
September 22, 2025 13:49
mfranzke
reviewed
Sep 22, 2025
| { | ||
| "name": "@db-ux/import-custom-colors", | ||
| "private": true, | ||
| "version": "1.0.0", |
There was a problem hiding this comment.
Suggested change
| "version": "1.0.0", | |
| "version": "0.0.0", |
There was a problem hiding this comment.
Updated main package version to "0.0.0" as suggested in commit 11da042.
mfranzke
reviewed
Sep 22, 2025
| @@ -0,0 +1,44 @@ | |||
| { | |||
| "name": "import-custom-colors-code", | |||
| "version": "1.0.0", | |||
There was a problem hiding this comment.
Suggested change
| "version": "1.0.0", | |
| "version": "0.0.0", |
There was a problem hiding this comment.
Updated plugin package version to "0.0.0" as suggested in commit 11da042.
mfranzke
reviewed
Sep 22, 2025
|
@copilot please take the following schema documentation into account: CollectionsBase Colors (Figma Collection)Modes:
Variables:
Mode (Figma Collection)Modes:
Variables
Colors (Figma Collection)Modes:
Variables
|
Co-authored-by: mfranzke <[email protected]>
…Mode collections Co-authored-by: mfranzke <[email protected]>
... Implemented the complex variable collection structure as specified in your schema documentation. The plugin now creates: Base Colors Collection (Default mode):
Mode Collection (Light Mode / Dark Mode):
Smart Alias Mapping:
This enables proper semantic color management and automatic theme switching in Figma designs. All changes implemented in commit 4b78ae6. |
Copilot finished work on behalf of
mfranzke
September 22, 2025 15:16
mfranzke
reviewed
Sep 22, 2025
mfranzke
reviewed
Sep 22, 2025
mfranzke
changed the title
mfranzke
changed the title
import-custom-colors Figma plugin
|
@copilot please add the following JSON as an example and the schema (in markdown) as reference files to this PR that you could use for ongoing development: {"colors":{"dibe-category1":{"0":{"$type":"color","$value":"#1a0909"},"1":{"$type":"color","$value":"#281111"},"2":{"$type":"color","$value":"#391b1b"},"3":{"$type":"color","$value":"#4b2626"},"4":{"$type":"color","$value":"#5e3131"},"5":{"$type":"color","$value":"#713c3c"},"6":{"$type":"color","$value":"#8c4c4c"},"7":{"$type":"color","$value":"#b06060"},"8":{"$type":"color","$value":"#c27f7f"},"9":{"$type":"color","$value":"#cea0a0"},"10":{"$type":"color","$value":"#dcc0c0"},"11":{"$type":"color","$value":"#eddfdf"},"12":{"$type":"color","$value":"#f4ecec"},"13":{"$type":"color","$value":"#f7f2f2"},"14":{"$type":"color","$value":"#fbf9f9"},"origin-light-default":{"$type":"color","$value":"#753e3e"},"origin-light-hovered":{"$type":"color","$value":"#281111"},"origin-light-pressed":{"$type":"color","$value":"#552b2b"},"on-origin-light-default":{"$type":"color","$value":"#fbf9f9"},"origin-dark-default":{"$type":"color","$value":"#753e3e"},"origin-dark-hovered":{"$type":"color","$value":"#281111"},"origin-dark-pressed":{"$type":"color","$value":"#552b2b"},"on-origin-dark-default":{"$type":"color","$value":"#fbf9f9"},"transparent-full-light-default":{"$type":"color","$value":"#8c4c4c00"},"transparent-full-light-hovered":{"$type":"color","$value":"#8c4c4c3d"},"transparent-full-light-pressed":{"$type":"color","$value":"#8c4c4c52"},"transparent-full-dark-default":{"$type":"color","$value":"#cea0a000"},"transparent-full-dark-hovered":{"$type":"color","$value":"#cea0a03d"},"transparent-full-dark-pressed":{"$type":"color","$value":"#cea0a052"},"transparent-semi-light-default":{"$type":"color","$value":"#8c4c4c14"},"transparent-semi-light-hovered":{"$type":"color","$value":"#8c4c4c3d"},"transparent-semi-light-pressed":{"$type":"color","$value":"#8c4c4c52"},"transparent-semi-dark-default":{"$type":"color","$value":"#cea0a029"},"transparent-semi-dark-hovered":{"$type":"color","$value":"#cea0a03d"},"transparent-semi-dark-pressed":{"$type":"color","$value":"#cea0a052"}},"dibe-category2":{"0":{"$type":"color","$value":"#110d0d"},"1":{"$type":"color","$value":"#1b1717"},"2":{"$type":"color","$value":"#282222"},"3":{"$type":"color","$value":"#362f2f"},"4":{"$type":"color","$value":"#443c3c"},"5":{"$type":"color","$value":"#534949"},"6":{"$type":"color","$value":"#685b5b"},"7":{"$type":"color","$value":"#837373"},"8":{"$type":"color","$value":"#9a8e8e"},"9":{"$type":"color","$value":"#b1a9a9"},"10":{"$type":"color","$value":"#cac5c5"},"11":{"$type":"color","$value":"#e4e2e2"},"12":{"$type":"color","$value":"#efeded"},"13":{"$type":"color","$value":"#f4f3f3"},"14":{"$type":"color","$value":"#faf9f9"},"origin-light-default":{"$type":"color","$value":"#473e3e"},"origin-light-hovered":{"$type":"color","$value":"#090707"},"origin-light-pressed":{"$type":"color","$value":"#2f2929"},"on-origin-light-default":{"$type":"color","$value":"#faf9f9"},"origin-dark-default":{"$type":"color","$value":"#473e3e"},"origin-dark-hovered":{"$type":"color","$value":"#090707"},"origin-dark-pressed":{"$type":"color","$value":"#2f2929"},"on-origin-dark-default":{"$type":"color","$value":"#faf9f9"},"transparent-full-light-default":{"$type":"color","$value":"#685b5b00"},"transparent-full-light-hovered":{"$type":"color","$value":"#685b5b3d"},"transparent-full-light-pressed":{"$type":"color","$value":"#685b5b52"},"transparent-full-dark-default":{"$type":"color","$value":"#b1a9a900"},"transparent-full-dark-hovered":{"$type":"color","$value":"#b1a9a93d"},"transparent-full-dark-pressed":{"$type":"color","$value":"#b1a9a952"},"transparent-semi-light-default":{"$type":"color","$value":"#685b5b14"},"transparent-semi-light-hovered":{"$type":"color","$value":"#685b5b3d"},"transparent-semi-light-pressed":{"$type":"color","$value":"#685b5b52"},"transparent-semi-dark-default":{"$type":"color","$value":"#b1a9a929"},"transparent-semi-dark-hovered":{"$type":"color","$value":"#b1a9a93d"},"transparent-semi-dark-pressed":{"$type":"color","$value":"#b1a9a952"}},"dibe-category3":{"0":{"$type":"color","$value":"#0b1000"},"1":{"$type":"color","$value":"#141a00"},"2":{"$type":"color","$value":"#1f2700"},"3":{"$type":"color","$value":"#2a3400"},"4":{"$type":"color","$value":"#364300"},"5":{"$type":"color","$value":"#425100"},"6":{"$type":"color","$value":"#536500"},"7":{"$type":"color","$value":"#6a8000"},"8":{"$type":"color","$value":"#819b00"},"9":{"$type":"color","$value":"#99b700"},"10":{"$type":"color","$value":"#b1d400"},"11":{"$type":"color","$value":"#caf200"},"12":{"$type":"color","$value":"#d5fe00"},"13":{"$type":"color","$value":"#e3ff95"},"14":{"$type":"color","$value":"#f1ffd2"},"origin-light-default":{"$type":"color","$value":"#d9ff52"},"origin-light-hovered":{"$type":"color","$value":"#a4c500"},"origin-light-pressed":{"$type":"color","$value":"#bde200"},"on-origin-light-default":{"$type":"color","$value":"#060900"},"origin-dark-default":{"$type":"color","$value":"#d9ff52"},"origin-dark-hovered":{"$type":"color","$value":"#a4c500"},"origin-dark-pressed":{"$type":"color","$value":"#bde200"},"on-origin-dark-default":{"$type":"color","$value":"#060900"},"transparent-full-light-default":{"$type":"color","$value":"#53650000"},"transparent-full-light-hovered":{"$type":"color","$value":"#5365003d"},"transparent-full-light-pressed":{"$type":"color","$value":"#53650052"},"transparent-full-dark-default":{"$type":"color","$value":"#99b70000"},"transparent-full-dark-hovered":{"$type":"color","$value":"#99b7003d"},"transparent-full-dark-pressed":{"$type":"color","$value":"#99b70052"},"transparent-semi-light-default":{"$type":"color","$value":"#53650014"},"transparent-semi-light-hovered":{"$type":"color","$value":"#5365003d"},"transparent-semi-light-pressed":{"$type":"color","$value":"#53650052"},"transparent-semi-dark-default":{"$type":"color","$value":"#99b70029"},"transparent-semi-dark-hovered":{"$type":"color","$value":"#99b7003d"},"transparent-semi-dark-pressed":{"$type":"color","$value":"#99b70052"}}}}# Collections
## Base Colors (Figma Collection)
### Modes:
- Default
### Variables:
- [Custom Color 1]
- 0: [Value JSON]
- 1: [Value JSON]
- 2: [Value JSON]
- 3: [Value JSON]
- 4: [Value JSON]
- 5: [Value JSON]
- 6: [Value JSON]
- 7: [Value JSON]
- 8: [Value JSON]
- 9: [Value JSON]
- 10: [Value JSON]
- 11: [Value JSON]
- 12: [Value JSON]
- 13: [Value JSON]
- 14: [Value JSON]
- 15: [Value JSON]
- origin-light-default: [Value JSON]
- origin-light-hovered: [Value JSON]
- origin-light-pressed: [Value JSON]
- on-origin-light-default: [Value JSON]
- origin-dark-default: [Value JSON]
- origin-dark-hovered: [Value JSON]
- origin-dark-pressed: [Value JSON]
- on-origin-dark-default: [Value JSON]
- transparent-full-light-default: [Value JSON]
- transparent-full-light-hovered: [Value JSON]
- transparent-full-light-hovered: [Value JSON]
- transparent-semi-light-default: [Value JSON]
- transparent-semi-light-hovered: [Value JSON]
- transparent-semi-light-pressed: [Value JSON]
- transparent-full-dark-default: [Value JSON]
- transparent-full-dark-hovered: [Value JSON]
- transparent-full-dark-hovered: [Value JSON]
- transparent-semi-dark-default: [Value JSON]
- transparent-semi-dark-hovered: [Value JSON]
- transparent-semi-dark-pressed: [Value JSON]
- [Custom Color 2]
- [same structure as for Custom Color 1]
- [Custom Color 3]
- [same structure as for Custom Color 1]
- …
## Mode (Figma Collection)
### Modes:
- Light Mode
- Dark Mode
### Variables
- [Custom Color 1]
- bg
- basic
- level-1
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/14
- ALIAS--Base Colors-Collection-[Custom Color 1]/1
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/13
- ALIAS--Base Colors-Collection-[Custom Color 1]/3
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- ALIAS--Base Colors-Collection-[Custom Color 1]/4
- level-2
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/13
- ALIAS--Base Colors-Collection-[Custom Color 1]/2
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- ALIAS--Base Colors-Collection-[Custom Color 1]/4
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/11
- ALIAS--Base Colors-Collection-[Custom Color 1]/5
- level-3
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- ALIAS--Base Colors-Collection-[Custom Color 1]/3
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/11
- ALIAS--Base Colors-Collection-[Custom Color 1]/1
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/10
- ALIAS--Base Colors-Collection-[Custom Color 1]/0
- transparent-full
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-full-light-default
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-full-dark-default
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-full-light-hovered
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-full-dark-hovered
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-full-light-pressed
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-full-dark-pressed
- transparent-semi
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-semi-light-default
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-semi-dark-default
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-semi-light-hovered
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-semi-dark-hovered
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-semi-light-pressed
- ALIAS--Base Colors-Collection-[Custom Color 1]/transparent-semi-dark-pressed
- vibrant
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/9
- ALIAS--Base Colors-Collection-[Custom Color 1]/9
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/10
- ALIAS--Base Colors-Collection-[Custom Color 1]/10
- inverted
- contrast-max
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/1
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/5
- ALIAS--Base Colors-Collection-[Custom Color 1]/9
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/2
- ALIAS--Base Colors-Collection-[Custom Color 1]/11
- contrast-high
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/6
- ALIAS--Base Colors-Collection-[Custom Color 1]/9
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/2
- ALIAS--Base Colors-Collection-[Custom Color 1]/13
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/5
- ALIAS--Base Colors-Collection-[Custom Color 1]/10
- contrast-low
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/7
- ALIAS--Base Colors-Collection-[Custom Color 1]/8
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/3
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/6
- ALIAS--Base Colors-Collection-[Custom Color 1]/9
- on-bg
- basic
- emphasis-100
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/1
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/5
- ALIAS--Base Colors-Collection-[Custom Color 1]/9
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/2
- ALIAS--Base Colors-Collection-[Custom Color 1]/11
- emphasis-90
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/4
- ALIAS--Base Colors-Collection-[Custom Color 1]/10
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/0
- ALIAS--Base Colors-Collection-[Custom Color 1]/14
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/3
- ALIAS--Base Colors-Collection-[Custom Color 1]/11
- emphasis-80
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/6
- ALIAS--Base Colors-Collection-[Custom Color 1]/9
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/3
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/5
- ALIAS--Base Colors-Collection-[Custom Color 1]/10
- emphasis-70
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/7
- ALIAS--Base Colors-Collection-[Custom Color 1]/8
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/4
- ALIAS--Base Colors-Collection-[Custom Color 1]/10
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/6
- ALIAS--Base Colors-Collection-[Custom Color 1]/9
- emphasis-60
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/10
- ALIAS--Base Colors-Collection-[Custom Color 1]/6
- emphasis-50
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/12
- ALIAS--Base Colors-Collection-[Custom Color 1]/3
- vibrant
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/1
- ALIAS--Base Colors-Collection-[Custom Color 1]/1
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/4
- ALIAS--Base Colors-Collection-[Custom Color 1]/4
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/2
- ALIAS--Base Colors-Collection-[Custom Color 1]/2
- inverted
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/14
- ALIAS--Base Colors-Collection-[Custom Color 1]/3
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/11
- ALIAS--Base Colors-Collection-[Custom Color 1]/0
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/13
- ALIAS--Base Colors-Collection-[Custom Color 1]/2
- origin
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/origin-light-default
- ALIAS--Base Colors-Collection-[Custom Color 1]/origin-dark-default
- hovered:
- ALIAS--Base Colors-Collection-[Custom Color 1]/origin-light-hovered
- ALIAS--Base Colors-Collection-[Custom Color 1]/origin-dark-hovered
- pressed:
- ALIAS--Base Colors-Collection-[Custom Color 1]/origin-light-pressed
- ALIAS--Base Colors-Collection-[Custom Color 1]/origin-dark-pressed
- on-origin
- default:
- ALIAS--Base Colors-Collection-[Custom Color 1]/on-origin-light-default
- ALIAS--Base Colors-Collection-[Custom Color 1]/on-origin-dark-default
- [Custom Color 2]
- [same structure as for Custom Color 1]
- [Custom Color 3]
- [same structure as for Custom Color 1]
- …
## Colors (Figma Collection)
### Modes:
- custom-adaptive
- [Custom Color 1]
- [Custom Color 2]
- [Custom Color 3]
- …
### Variables
- custom-adaptive
- bg
- basic
- level-1
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-1-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-1/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-1/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-1/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-1-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-1/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-1/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-1/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-1-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-1/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-1/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-1/pressed
- …
- level-2
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-2-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-2/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-2/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-2/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-2-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-2/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-2/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-2/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-2-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-2/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-2/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-2/pressed
- …
- level-3
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-3-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-3/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-3/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-3/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-3-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-3/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-3/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-3/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-level-3-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/level-3/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/level-3/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/level-3/pressed
- …
- transparent-full
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-transparent-full-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/transparent-full/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/transparent-full/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/transparent-full/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-transparent-full-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/transparent-full/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/transparent-full/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/transparent-full/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-transparent-full-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/transparent-full/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/transparent-full/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/transparent-full/pressed
- …
- transparent-semi
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-transparent-semi-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/transparent-semi/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/transparent-semi/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/transparent-semi/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-transparent-semi-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/transparent-semi/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/transparent-semi/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/transparent-semi/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-transparent-semi-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/transparent-semi/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/transparent-semi/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/transparent-semi/pressed
- …
- vibrant
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-vibrant-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/vibrant/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/vibrant/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/vibrant/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-vibrant-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/vibrant/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/vibrant/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/vibrant/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-vibrant-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/vibrant/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/vibrant/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/vibrant/pressed
- …
- inverted
- contrast-max
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-inverted-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/inverted/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/inverted/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/inverted/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-inverted-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/inverted/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/inverted/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/inverted/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-inverted-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/inverted/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/inverted/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/inverted/pressed
- …
- contrast-high
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-contrast-high-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/contrast-high/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/contrast-high/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/contrast-high/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-contrast-high-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/contrast-high/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/contrast-high/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/contrast-high/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-contrast-high-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/contrast-high/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/contrast-high/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/contrast-high/pressed
- …
- contrast-low
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-contrast-low-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/contrast-low/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/contrast-low/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/contrast-low/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-contrast-low-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/contrast-low/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/contrast-low/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/contrast-low/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-contrast-low-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/contrast-low/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/contrast-low/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/contrast-low/pressed
- …
- on-bg
- basic
- emphasis-100
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-100-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-100/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-100/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-100/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-100-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-100/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-100/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-100/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-100-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-100/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-100/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-100/pressed
- …
- emphasis-90
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-90-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-90/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-90/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-90/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-90-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-90/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-90/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-90/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-90-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-90/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-90/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-90/pressed
- …
- emphasis-80
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-80-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-80/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-80/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-80/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-80-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-80/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-80/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-80/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-80-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-80/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-80/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-80/pressed
- …
- emphasis-70
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-70-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-70/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-70/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-70/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-70-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-70/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-70/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-70/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-70-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-70/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-70/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-70/pressed
- …
- emphasis-60
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-60-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-60/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-60/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-60/default
- …
- emphasis-50
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-emphasis-50-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/emphasis-50/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/emphasis-50/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/emphasis-50/default
- …
- vibrant
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-vibrant-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/vibrant/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/vibrant/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/vibrant/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-vibrant-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/vibrant/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/vibrant/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/vibrant/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-vibrant-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/vibrant/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/vibrant/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/vibrant/pressed
- …
- inverted
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-inverted-default
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/inverted/default
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/inverted/default
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/inverted/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-inverted-hovered
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/inverted/hovered
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/inverted/hovered
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/inverted/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-bg-basic-inverted-pressed
- ALIAS--Color-Collection--[Custom Color 1]/bg/basic/inverted/pressed
- ALIAS--Color-Collection--[Custom Color 2]/bg/basic/inverted/pressed
- ALIAS--Color-Collection--[Custom Color 3]/bg/basic/inverted/pressed
- …
- origin
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-origin-default
- ALIAS--Color-Collection--[Custom Color 1]/origin/default
- ALIAS--Color-Collection--[Custom Color 2]/origin/default
- ALIAS--Color-Collection--[Custom Color 3]/origin/default
- …
- hovered:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-origin-hovered
- ALIAS--Color-Collection--[Custom Color 1]/origin/hovered
- ALIAS--Color-Collection--[Custom Color 2]/origin/hovered
- ALIAS--Color-Collection--[Custom Color 3]/origin/hovered
- …
- pressed:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-origin-pressed
- ALIAS--Color-Collection--[Custom Color 1]/origin/pressed
- ALIAS--Color-Collection--[Custom Color 2]/origin/pressed
- ALIAS--Color-Collection--[Custom Color 3]/origin/pressed
- …
- on-origin
- default:
- ALIAS--Foundation-Library--Color-Collection--db-adaptive-on-origin-default
- ALIAS--Color-Collection--[Custom Color 1]/on-origin/default
- ALIAS--Color-Collection--[Custom Color 2]/on-origin/default
- ALIAS--Color-Collection--[Custom Color 3]/on-origin/default
- … |
Co-authored-by: mfranzke <[email protected]>
... Added the requested reference files in commit 50d4ed8: •
These files provide clear reference for ongoing development and testing of the plugin functionality. |
Copilot finished work on behalf of
mfranzke
September 22, 2025 16:35
|
@copilot regarding your second last comments "Mode Collection (Light Mode / Dark Mode)" part, only the first one regarding "Semantic variables with aliases to Base Colors" is meeting my expectations: The other two are incorrect, as there's only the entries mentioned in the schema, but no text or border ones:
|
mfranzke
reviewed
Sep 23, 2025
| 1. Follow the existing package structure pattern | ||
| 2. Use the same build tools (esbuild for plugin, vite for UI) | ||
| 3. Include proper TypeScript configurations | ||
| 4. Add appropriate scripts to root package.json |
There was a problem hiding this comment.
Suggested change
| 4. Add appropriate scripts to root package.json | |
| 4. Add appropriate scripts to root `package.json` |
mfranzke
reviewed
Sep 23, 2025
|
|
||
| - Use React with TypeScript | ||
| - Use Vite with singlefile plugin to generate inline HTML | ||
| - Use Tailwind CSS for styling with DB design tokens |
There was a problem hiding this comment.
Suggested change
| - Use Tailwind CSS for styling with DB design tokens |
Use regular CSS for styling with DB design tokens
mfranzke
reviewed
Sep 23, 2025
|
|
||
| - Plugin builds to `../index.js` in package root | ||
| - UI builds to `../index.html` in package root | ||
| - Use `npm-run-all` for parallel builds |
There was a problem hiding this comment.
Suggested change
| - Use `npm-run-all` for parallel builds | |
| - Use `npm-run-all` command by `npm-run-all2` node package for parallel builds |
mfranzke
reviewed
Sep 23, 2025
|
|
||
| ### Dependencies | ||
|
|
||
| - Prefer shared dependencies in root package.json when possible |
There was a problem hiding this comment.
Suggested change
| - Prefer shared dependencies in root package.json when possible | |
| - Prefer shared dependencies in root `package.json` when possible |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✅ Streamlined JSON-Only Import:
🎯 Focused Functionality:
📁 Reference Files Added:
example-design-tokens.json- Complete example with multiple categories and token typesdesign-token-schema.md- Comprehensive documentation of expected JSON structure and variable collection mapping📚 Updated Documentation:
🎨 Enhanced User Experience:
The plugin now provides a focused, professional design token import experience that creates sophisticated variable collection architecture in Figma without the complexity of manual entry options.
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.