JavaScript design-tokens

Open-source JavaScript projects categorized as design-tokens

Top 5 JavaScript design-token Projects

design-tokens
  • style-dictionary

    A build system for creating cross-platform styles.

    Project mention: Syncing Figma Variables and StyleDictionary with GitHub Actions | dev.to | 2023-08-03

    function getStyleDictionaryConfig(brand) { return { source: [`tokens/brands/${brand}/*.json`, 'tokens/globals/**/*.json'], platforms: { /** * Available platforms: https://amzn.github.io/style-dictionary/#/config?id=platform */ web: { transformGroup: 'web', buildPath: `build/web/${brand}/`, files: [ { destination: 'tokens.scss', format: 'scss/variables', }, ], }, }, } } /** * Build the tokens for each brand. * {@see - Example based on https://github.com/amzn/style-dictionary/tree/main/examples/advanced/multi-brand-multi-platform} */ ['microsoft', 'xbox'].map(function (brand) { ['web'].map(function (platform) { const StyleDictionary = StyleDictionaryPackage.extend( getStyleDictionaryConfig(brand), ) StyleDictionary.buildPlatform(platform) }) })

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • theo

    Theo is a an abstraction for transforming and formatting Design Tokens

    Project mention: Eleventy Style Guide Generator with WebC Component Support | dev.to | 2023-08-04

    There are some great well established tools out there that do this, such as Theo and Style Dictionary but for this I turned to the sage advice of Andy Bell via buildexcellentwebsit.es and used Tailwind to run through the token JSON files and generate the CSS variables I can use in my styling.

  • a11y-color-tokens

    Generate accessible UI colors from your base color tokens.

  • ui

    Talend's unified web UI repository. (by Talend)

  • design-tokens

    A place where OpenTable engineers and designers openly work together (by opentable)

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020).

JavaScript design-tokens discussion

Log in or Post with

JavaScript design-tokens related posts

  • Eleventy Style Guide Generator with WebC Component Support

    5 projects | dev.to | 4 Aug 2023
  • Specify VS Style Dictionary

    2 projects | dev.to | 25 Oct 2022
  • Why does Youtube make such excessive use of CSS variables?

    2 projects | /r/css | 15 Sep 2021
  • Generate Accessible UI Colors with a11y-color-tokens

    1 project | dev.to | 9 Feb 2021

Index

What are some of the best open-source design-token projects in JavaScript? This list will help you:

Project Stars
1 style-dictionary 3,715
2 theo 1,936
3 a11y-color-tokens 158
4 ui 149
5 design-tokens 80

Sponsored
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io

Did you konow that JavaScript is
the 3rd most popular programming language
based on number of metions?