Questions tagged [style-dictionary]
14 questions
5
votes
1 answer
How to convert design token object to SCSS property using style dictionary?
I have the exact same issue as this thread: get scss from design tokens json file using style dictionary. The answer mentioned in this thread is great, but is there a way to specify some setting so that the style-dictionary automatically converts…
U. Watt
- 533
- 1
- 5
- 27
2
votes
1 answer
How to modify the style dictionary configuration file to output the typography tokens as SCSS Variables
I am all new to design tokens and design system. I am trying to convert my design tokens as SCSS variables using the style dictionary it looks like everything working fine except the typography tokens are resulting as [object object] in the variable…
Benjamin
- 2,612
- 2
- 20
- 32
2
votes
1 answer
How do I transform the convention of my Style Dictionary variables.js after being compiled. To ignore they parent style folder
This is my transform-token.js file:
const StyleDictionary = require('style-dictionary');
const baseConfig = require('./style-dictionary.config.json');
StyleDictionary.registerTransform({
name: 'size/px',
type: 'value',
matcher: token => {
…
Antonio
- 21
- 1
2
votes
1 answer
get scss from design tokens json file using style dictionary
I want to get the scss rules for design tokens from a json file provided by the design team.
I used style dictionary and managed to get the base design tokens, but there are few tokens that use entire objects as value.
This is an example of design…
Alex Dorosin
- 23
- 5
1
vote
1 answer
Transform json into scss class with style-dictionary
I’m trying to define a custom format in style-dictionary that would output scss classes for every typography. But I am getting [object, object] instead of a scss class.
base.json with my tokens
{
"fontFamilies": {
"default": {
"value":…
designArg
- 97
- 5
1
vote
1 answer
How to transform a json into a css class in style-dictionary?
I have the following button.json
{
"component": {
"button": {
"padding": { "value": "{size.padding.medium.value}" },
"font-size": { "value": 2 },
"text-align": { "value": "center" },
"primary": {
"background-color": {…
Sri
- 1,205
- 2
- 21
- 52
0
votes
0 answers
How to improve Style Dictionary configuration to generate a proper android file output?
I am using Figma Design Token plugin for generating android code in output with all design tokens.
The current config.json file of Style Dictionary seems not to work as expected.
Config.json file:
{
"source": [
"tokens/**/*.json"
],
…
Prajwal R
- 117
- 1
- 1
- 8
0
votes
2 answers
Transitive transforms appear to be happening out of order
I'm working on a refactor of our style-dictionary implementation. I'm working on applying alpha values through a transform rather than predefining values with alpha values.
It looks something like this:
In color.json
{
color: {
text: {
…
Kenji Crosland
- 2,914
- 6
- 31
- 40
0
votes
1 answer
Generate multiple output tokens from a single input token in Amazon Style Dictionary
I am using Amazon Style Dictionary to generate SCSS variables from JS definition files. Given the following input:
module.exports = {
color: {
border: {
focus: { value: '#0071ff' }
}
}
}
I would like to generate not one output…
Fynn
- 4,753
- 3
- 32
- 69
0
votes
1 answer
Is there a way to overwrite some data from the extended json config file in StyleDictionary?
Question is simple:
I've a javascript file
const StyleDictionary = require('style-dictionary').extend('color-config.json');
and a json config file
{
"source": ["tokens/color.json"],
"platforms": {
"css": {
"transforms":…
axel
- 3,778
- 4
- 45
- 72
0
votes
1 answer
How to access the full dictionary in registerTransform method in StyleDictionary?
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…
axel
- 3,778
- 4
- 45
- 72
0
votes
1 answer
Write custom transform file for design tokens from Figma in Style Dictionary for Flutter
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
{
"borderWidth": {
"100": {
"value": "1.5",
…
Preckrasno
- 2,435
- 1
- 10
- 20
0
votes
1 answer
Import style dictionary into styled components
I'm currently deciding which technologies to use in a project. I always liked sass, and the main reasons are the nesting of css and the possibility of creating dicionaty classes to hold all design information, such as pallet, margins, etc. Such as…
Pelicer
- 1,348
- 4
- 23
- 54
0
votes
1 answer
Sharing Variables Across Multiple Projects Using Style Dictionary
I have a React project using Style Dictionary, which produces a _variables.scss file that I can leverage within the project. This works great but is there a way to programatically share across multiple Projects? For instance, If I update Style…
Eric Nguyen
- 926
- 3
- 15
- 37