style-dictionary
There are 1 repository under style-dictionary topic.
lukasoppermann / design-tokens
🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
Language:TypeScript 942didoo / style-dictionary-demo
A demonstration of a setup of Style Dictionary to be used for the generation of design tokens
Language:JavaScript 167A package of transforms, formats, filters, etc. to use in your style dictionary config to transform your design tokens
Language:TypeScript 153- style-dictionary-tailwindcss-transformer
nado1001 / style-dictionary-tailwindcss-transformer
This is a plugin to generate the config of Tailwind CSS using Style Dictionary
Language:TypeScript 114 Specifyapp / parsers
Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.
Language:TypeScript 112- themekitLanguage:TypeScript 73
infor-design / design-system
Design Tokens, Assets, and Planning for the Infor Design System
Language:CSS 69- handoff-app
Convertiv / handoff-app
A toolchain for Figma design tokens, enabling designers and developers to extract, transform, and distribute design decisions as code
Language:TypeScript 51 - Language:TypeScript 43
robinweser / elodin
The Elodin Styling Language
Language:JavaScript 30chanzuckerberg / edu-design-system
Design system for Education Projects
Language:TypeScript 28theemo-tokens / theemo
Design Token Automations
Language:TypeScript 26StefanKandlbinder / styledictionarytailwindbridge
A Design System based on Style Dictionary Tokens, converted into TailwindCSS Objects, which are then imported into the tailwind.config.js.
Language:JavaScript 25- fractal
snowball-tech / fractal
The open-source mono-repository for the design reference, components libraries and documentations of Fractal, Snowball's design system.
Language:TypeScript 23 josephnle / figma-style-dictionary-variables
Figma plugin for importing Style Dictionary JSON as variables
Language:TypeScript 21michaelmang / style-dictionary
A package for receiving generated design tokens and exporting platform deliverables using Style Dictionary. This is part of a series of tutorials for my design tokens ebook that is in the works.
- product-kit_core
mercedes-benz / product-kit_core
Product Kit Core provides design tokens for the Mercedes-Benz Tech Innovation styleguide.
Language:JavaScript 17 mirahi-io / figma-tokens-example-tailwindcss-using-css-variables-reference
Export your Design System Tokens to css-variables reference and use them with TailwindCSS
Language:JavaScript 10- Language:TypeScript 9
nyan-matt / token-demo-src
This repo demonstrates a simple design automation workflow that handles design tokens, their transformation to css vars, and pushing updated css files to another project repo.
Language:CSS 9jakobw / style-dictionary-format-json-schema
Generate JSON schemas for style-dictionary files to improve text editor support
Language:JavaScript 8- Language:JavaScript 7
Supernova-Studio / exporter-style-dictionary
Supernova Style Dictionary exporter allows conversion of design system data and elements into valid, production-ready style dictionary JSON definitions
Language:TypeScript 7gsoft-inc / ov-igloo-tokens
Design tokens are all the values needed to construct and maintain a design system — spacing, color, fonts, opacity, etc..
Language:JavaScript 6- Language:TypeScript 6
putchom / style-dictionary-example
『デザイントークンのつくりかた』5 章「ビルドシステムをつくる」のサポートコンテンツです。
Language:JavaScript 6sergei-maertens / design-token-editor
React component to view/edit design tokens via style-dictionary
Language:TypeScript 5adevinta / spark-tokens
A tool for synchronizing Spark design tokens between Figma and our three platforms (web, Android, iOS).
Language:JavaScript 4elementsinteractive / design-tokens
Design Tokens generation library
Language:TypeScript 4lsst-sqre / rubin-style-dictionary
A style dictionary that encodes design tokens from the Rubin Visual Identity.
Language:JavaScript 4samuelematias / chicken_box_time
Find information about the next movie you're going to watch in the company of a nice Chicken Box 🍗🎬
Language:Dart 4jordangeizer / style-dictionary-radix-starter
Starter file for Style Dictionary, using Radix UI colors with custom output formats for Figma Tokens plugin and JS.
Language:JavaScript 3sbb-design-systems / lyne-design-tokens
🧪 Manages and publishes Design Tokens for Lyne Design System
Language:TypeScript 3- Language:JavaScript 2
cds-snc / gcds-tokens
GC Design System Tokens are the smallest building blocks of GC Design System, represent design decisions for basic elements like colour, typography, and spacing. | Les jetons Système de design GC sont les plus petits blocs de construction du système et représentent les choix de design pour les éléments de base (couleur, typographie, espacement…).
Language:CSS 2mryechkin / style-dictionary-tokens
Sample project showing usage of W3C Design Tokens in Style Dictionary
Language:JavaScript 2
