Convert design tokens into CSS variables and copy them to your clipboard.

Latest Version

Version
1.0.0
Update
February 2, 2025
Size
10.13KiB
Developer
Category
Users
0
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ClipboardWrite
See more

token2variablizer Extension

In some use cases, nomenclature from a singular design token linked to a CSS variable can vary slightly. In this specific one, design tokens formatted as \"i.am.a.token\" are associated with CSS variables formatted as \"--I-AM-A-TOKEN\".

This discrepancy can slow down the workflow during the handoff from the design team, which uses one format, to the development team, which uses another. Whether there is one design token to translate or twenty, developers must manually change the format of each design token to locate it in the code.

This extension streamlines the process. Developers can paste the design token into the extension and click the \"COPY-VARIABLE\" button. This action copies the correctly formatted CSS variable to their clipboard, significantly speeding up the workflow.
Read more

Source Manifest.json

" {"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "token2variablizer", "version": "1.0.0", "description": "Convert design tokens into CSS variables and copy them to your clipboard.", "permissions": ["clipboardWrite"], "action": { "default_popup": "popup.html", "default_icon": { "16": "icon.png", "48": "icon.png", "128": "icon.png" } } }
Read more

Similar Extensions

icon

DivMagic - Copy Style from any website Extension · Developer Tools 0 55 ★ 1.3MiB

icon

Click to Copy Extension · Productivity 0 4 ★ 134KiB

icon

Squarestylist Selector Helper Extension · Developer Tools 0 0 ★ 35.68KiB

icon

Scan CSS Extension · Productivity 0 7 ★ 115KiB

icon

UI Inspector - Live Style Editor Extension · Developer Tools 0 2 ★ 90.41KiB

icon

Copy Title and Url as Markdown Style Extension · Accessibility 0 40 ★ 7.09MiB

icon

CopyCss - Copy css scan from any website. Extension · Developer Tools 0 10 ★ 246KiB

icon

Select & Copy HTML Text Extension · Productivity 0 3 ★ 26.02KiB

icon

Canva Automation - Auto Canva Maker Extension · Productivity 0 7 ★ 1.36MiB

icon

Website Extractor Extension · Developer Tools 0 0 ★ 13.59KiB

icon

Cite Creator Extension · Productivity 0 29 ★ 70.03KiB

icon

SnipCSS Extension · Developer Tools 0 32 ★ 13.12MiB

icon

CopyTabTitleUrl Extension · Accessibility 0 20 ★ 66.61KiB

icon

HTML to Markdown Extension · Developer Tools 0 0 ★ 869KiB

icon

CSS Scan Extension · Developer Tools 0 84 ★ 1.41MiB

icon

CSS Used Extension · Developer Tools 0 184 ★ 164KiB

icon

Simple Web Scraper (Free) Extension · Productivity 0 1 ★ 1.37MiB

icon

Customizer Extension · Productivity 0 1 ★ 168KiB

icon

cocopy Extension · Productivity 0 7 ★ 2.14MiB

icon

Super CSS Inject Extension · Developer Tools 0 11 ★ 124KiB

icon

Format Link Extension · Productivity 0 12 ★ 53.32KiB

icon

Hnspector - Inspect headings Extension · Developer Tools 0 1 ★ 515KiB

icon

CSS Formatter Extension · Developer Tools 0 4 ★ 249KiB

icon

Bookmarks Converter Extension · Developer Tools 0 0 ★ 1.22MiB