style-dictionary | A build system for creating cross-platform styles | Frontend Utils library
kandi X-RAY | style-dictionary Summary
kandi X-RAY | style-dictionary Summary
Style once, use everywhere. A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language. It provides a single place to create and edit your styles, and exports these tokens to all the places you need - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality. When you are managing user experiences, it can be quite challenging to keep styles consistent and synchronized across multiple development platforms and devices. At the same time, designers, developers, PMs and others must be able to have consistent and up-to-date style documentation to enable effective work and communication. Even then, mistakes inevitably happen and the design may not be implemented accurately. Style Dictionary solves this by automatically generating style definitions across all platforms from a single source - removing roadblocks, errors, and inefficiencies across your workflow. For detailed usage head to
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Transform a config object into an array of transformations .
- Builds a translation file
- Create a property formatter .
- Exports a property to the set of props .
- Compiles a reference .
- Transform an object into its path
- Extend include tokens
- Recursive function .
- Combines JSON files
- Sort map by reference
style-dictionary Key Features
style-dictionary Examples and Code Snippets
Community Discussions
Trending Discussions on style-dictionary
QUESTION
Question is simple:
I've a javascript file
...ANSWER
Answered 2022-Jan-10 at 08:04Here is the answer, extend can be reworked multiple times, and returns the new updated object handler of Style Dictionary.
QUESTION
I have barebone Flutter 2.5 project and Figma design tokens which were exported via Figma Tokens. Those design tokens look like this:
project\style_dictionary\properties\tokens.json
...ANSWER
Answered 2021-Sep-22 at 14:28- Create a project\build.js as a custom Transforms file. Logic of creation was used from default Flutter color transforms and Documentation
QUESTION
Pretty simple question, I'm registering a transformation and the transformer need one item, actually one design token, that lives in the same file I'm applying this transformation.
So I would need to access the dictionary.properties to retrieve this element via its name, used to transform all the others.
ANSWER
Answered 2021-Sep-23 at 06:26I found out this approach, since there is the prop.filePath information, I read it directly from file system and parse it as an object.
It works, I don't see substantial decrease of performances (because this access is done in a loop), but it works:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install style-dictionary
The style dictionary framework comes with some example code to get you stared. Install the node module globally, create a directory and cd into it.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
