Item logo image for token2variablizer

token2variablizer

Item media 1 (screenshot) for token2variablizer

Overview

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

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.

0 out of 5No ratings

Google doesn't verify reviews. Learn more about results and reviews.

Details

  • Version
    1.0.0
  • Updated
    February 2, 2025
  • Size
    10.13KiB
  • Languages
    English
  • Developer
    Email
    cestj2000@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Cite Creator

4.5(29)

Constructs debate cites from html tags or page info and copies to clipboard.

SnipCSS

3.9(34)

Extract the CSS/HTML for any element on any page, only take the styles you want

CopyTabTitleUrl

4.7(21)

Copy the title and URL to the clipboard.

cocopy

4.9(7)

a chrome extension to copy text by your code.

DivMagic - Copy Style from any website

3.6(73)

Copy elements from any webpage as reusable web components. Get HTML, CSS, React, JSX or Tailwind CSS code.

Squarestylist Selector Helper

5.0(7)

Easily find and copy Squarespace CSS selectors to help customize your website

CSS To Tailwind

3.6(22)

Convert a website's styles to Tailwind CSS classes

Website Cloner

1.0(1)

Convert websites or components to clean HTML with Tailwind CSS for development, migration, or AI integration

Customizer

5.0(1)

Add custom CSS to one or many sites

Select & Copy HTML Text

2.6(7)

Select part of an HTML document and copy the underlying text to the clipboard!

Amino: Live CSS Editor

4.3(456)

Customize any website with your own CSS and see your changes instantly with Amino!

Canva Automation - Auto Canva Maker

4.3(7)

Automate your Canva designs with variables, generate multiple variants in batches, download them automatically at canva.com.

Cite Creator

4.5(29)

Constructs debate cites from html tags or page info and copies to clipboard.

SnipCSS

3.9(34)

Extract the CSS/HTML for any element on any page, only take the styles you want

CopyTabTitleUrl

4.7(21)

Copy the title and URL to the clipboard.

cocopy

4.9(7)

a chrome extension to copy text by your code.

DivMagic - Copy Style from any website

3.6(73)

Copy elements from any webpage as reusable web components. Get HTML, CSS, React, JSX or Tailwind CSS code.

Squarestylist Selector Helper

5.0(7)

Easily find and copy Squarespace CSS selectors to help customize your website

CSS To Tailwind

3.6(22)

Convert a website's styles to Tailwind CSS classes

Website Cloner

1.0(1)

Convert websites or components to clean HTML with Tailwind CSS for development, migration, or AI integration

Google apps