style-dictionary VS Awesome-Design-Tokens

Compare style-dictionary vs Awesome-Design-Tokens and see what are their differences.

style-dictionary

A build system for creating cross-platform styles. (by amzn)
Style Styleguide design-systems Cross-Platform design-tools Build system Build Tool design-tokens style-tokens
Source Code
amzn.github.io
Suggest alternative
Edit details

Awesome-Design-Tokens

A list of resources on all things to do with Design Tokens (by sturobson)
design-tokens design-system design-systems
Source Code
Suggest alternative
Edit details
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.io
featured
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.
www.influxdata.com
featured
style-dictionary Awesome-Design-Tokens
5 1
3,650 1,124
1.4% -
6.3 5.3
5 days ago about 2 months ago
JavaScript
Apache License 2.0 The Unlicense
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

style-dictionary

Posts with mentions or reviews of style-dictionary. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-08-03.
  • Syncing Figma Variables and StyleDictionary with GitHub Actions
    2 projects | dev.to | 3 Aug 2023
    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) }) })
  • Specify VS Style Dictionary
    2 projects | dev.to | 25 Oct 2022
    Check out the official examples projects provided by Style Dictionary. In our case, we just used the basic example 👍
  • Any wait to generate a full JSON of tailwind?
    1 project | /r/tailwindcss | 18 May 2022
    Did you know about Style Dictionary https://github.com/amzn/style-dictionary Its a tool that creates Design Tokens for different platforms using a JSON file. Sounds similar to what you are trying to achieve.
  • This is my favorite Github issue 🦎
    1 project | /r/webdev | 17 Mar 2022
  • Introduction to Variabless
    2 projects | /r/css | 2 Aug 2021
    Cool. Can you compare this to https://github.com/amzn/style-dictionary?

Awesome-Design-Tokens

Posts with mentions or reviews of Awesome-Design-Tokens. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-09-15.

What are some alternatives?

When comparing style-dictionary and Awesome-Design-Tokens you can also consider the following projects:

theo - Theo is a an abstraction for transforming and formatting Design Tokens

a11y-color-tokens - Generate accessible UI colors from your base color tokens.

community-group - This is the official DTCG repository for the design tokens specification.

storybook-design-token - Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.

Awesome-Design-Tools - The best design tools and plugins for everything 👉

polaris - Shopify’s design system to help us work together to build a great experience for all of our merchants.

variabless - JS & CSS - A Match Made in Heaven 💎

awesome-design-systems - 📒 A curated list of bookmarks, resources and articles about design systems focused on developers.

cmake-js - CMake.js - a Node.js native addon build tool

What-is-Entry-Webpack-5 - What is Entry - Webpack 5

style-dictionary vs theo Awesome-Design-Tokens vs theo style-dictionary vs a11y-color-tokens Awesome-Design-Tokens vs community-group style-dictionary vs community-group Awesome-Design-Tokens vs storybook-design-token style-dictionary vs Awesome-Design-Tools Awesome-Design-Tokens vs polaris style-dictionary vs variabless Awesome-Design-Tokens vs awesome-design-systems style-dictionary vs cmake-js style-dictionary vs What-is-Entry-Webpack-5