1 of 14

Parsers

Parsers are functions allowing you to transform design tokens and assets coming from Specify to fit your needs and company standards.

Not familiar with parsers? Head over to the existing parsers documentation and learn more about why you need them and how to use them.

We're currently working on making our existing parsers compatible with the SDTF. We'll update this page accordingly.

General properties

You must set a name and your desired output for each parser:

The name is the name of the parser
The output property indicates which type of output you want the parser to produce

Output types

Parsers support none, some or more output types, please refer to dedicated parser pages for details.

File

Use case: the parser is expected to produce exactly one file.

type FileOutput = {
  type: 'file';
  filePath: string;
}

Directory

Use case: the parser is expected to produce 0 to N files, all placed in the given directoryPath.

type DirectoryOutput = {
  type: 'directory';
  directoryPath: string;
}

Example with the to-css-custom-properties parser:

"parsers": [
  {
    "name": "to-css-custom-properties",
    "output": {
      "type": "file",
      "filePath": "style.css"
    }
  }
  // ...
]

Available parsers

to-css-custom-properties

This parser helps you transform design tokens into CSS Custom Properties.

Interface

interface parser {
  name: 'to-css-custom-properties';
  output: {
    type: 'file';
    filePath: string;
  };
  options?: {
    tokenNameTemplate?: string;
    selectorTemplate?: string;
    includeCoreTokensInScopes?: boolean;
  };
}

Options

Parameter

Required

Type

Default

Description

Basic usage

A design token can have modes, be nested in groups and be part of a collection. The following use case will generate a single CSS file containing core tokens and semantic tokens.

{
  "colors": {
    "$collection": { "$modes": ["Light", "Dark"] },
    "core": {
      "blue-100": {
        "$type": "color",
        "$description": "token 1 aliased with n modes within collection within n groups",
        "$value": {
          "Light": {
            "red": 219,
            "blue": 254,
            "alpha": 1,
            "green": 236,
            "model": "rgb"
          },
          "Dark": {
            "red": 41,
            "blue": 67,
            "alpha": 1,
            "green": 52,
            "model": "rgb"
          }
        }
      },
      "blue-700": {
        "$type": "color",
        "$description": "token 2 aliased with n modes within collection within n groups",
        "$value": {
          "Light": {
            "red": 17,
            "blue": 249,
            "alpha": 1,
            "green": 125,
            "model": "rgb"
          },
          "Dark": {
            "red": 96,
            "blue": 250,
            "alpha": 1,
            "green": 168,
            "model": "rgb"
          }
        }
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$description": "alias token with n modes within collection within n groups",
              "$value": {
                "Dark": {
                  "$mode": "Dark",
                  "$alias": "colors.core.blue-100"
                },
                "Light": {
                  "$mode": "Light",
                  "$alias": "colors.core.blue-700"
                }
              }
            }
          }
        }
      }
    }  
  }
}

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens as CSS Custom Properties",
      "parsers": [
        {
          "name": "to-css-custom-properties",
          "output": {
            "type": "file",
            "filePath": "tokens.css"
          },
          "options": {
            "tokenNameTemplate": "--{{groups}}-{{token}}",
            "selectorTemplate": "[data-theme=\"{{mode}}\"]",
            "includeCoreTokensInScopes": true
          }
        }
      ]
    }
  ]
}

tokens.css

[data-theme="dark"] {
  --core-blue-100: rgb(41, 52, 67);
  --core-blue-700: rgb(96, 168, 250);
  --semantic-background-button-primary-hover: var(--core-blue-100);
}
[data-theme="light"] {
  --core-blue-100: rgb(219, 236, 254);
  --core-blue-700: rgb(17, 125, 249);
  --semantic-background-button-primary-hover: var(--core-blue-700);
}

Head towards our templates section to see how you can use this parser with others to suit a common use case when working with CSS.

to-style-dictionary

This parser helps you generate Style Dictionary raw token files for all your design tokens coming from Specify.

Unlike the existing to-style-dictionary parser, this one doesn't have any options yet.

Interface

interface parser {
  name: 'to-style-dictionary';
  output: {
    type: 'directory';
    directoryPath: string;
  };
}

General output rules

A collection will generate a folder at the top level
1. The default level refers to the SDTF Token Type associated SD Category → {collectionName?}/{SDCategory}
2. The next folder level is the name of the potential first group containing the token → {collectionName?}/{SDCategory}/{1stLevelGroupName?}
3. The default filename is the name of the first group, or the name of the each mode the token might have, or base.json → {collectionName?}/{SDCategory}/{ mode? | 1stLevelGroupName? | base}.json (priority order for filename: groupName > mode > base)
The token path inside the file must match the token file path with the following priority order: collection > SDCategoryType > Mode > Groups
- {collectionName?}/{SDCategory}/{1stLevelGroupName? | mode? | base}.json → { collection: {type: {mode: { groupName: { tokenName: ... }}}}

Basic usage

{
  "colors": {
    "$collection": { "$modes": ["light", "dark"] },
    "core": {
      "blue-100": {
        "$type": "color",
        "$description": "token 1 aliased with n modes within collection within n groups",
        "$value": {
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 255,
            "model": "rgb"
          },
          "dark": {
            "red": 229,
            "blue": 29,
            "alpha": 1,
            "green": 29,
            "model": "rgb"
          }
        }
      },
      "blue-700": {
        "$type": "color",
        "$description": "token 2 aliased with n modes within collection within n groups",
        "$value": {
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 200,
            "model": "rgb"
          },
          "dark": {
            "red": 229,
            "blue": 0,
            "alpha": 1,
            "green": 0,
            "model": "rgb"
          }
        }
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$description": "alias token with n modes within collection within n groups",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.core.blue-700"
                }
              }
            }
          }
        }
      }
    }  
  }
}

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate Style Dictionary raw token files",
      "parsers": [
        {
          "name": "to-style-dictionary",
          "output": {
            "type": "directory",
            "directoryPath": "output/tokens/"
          }
        }
      ]
    }
  ]
}

color/light/core.json

{
  "colors": {
    "color": {
      "light": {
        "core": {
          "blue-100": {
            "value": "rgb(255, 255, 255)",
            "type": "color",
            "description": "token 1 aliased with n modes within collection within n groups"
          },
          "blue-700": {
            "value": "rgb(255, 200, 255)",
            "type": "color",
            "description": "token 2 aliased with n modes within collection within n groups"
          }
        }
      }
    }
  }
}

color/dark/core.json

{
  "colors": {
    "color": {
      "dark": {
        "core": {
          "blue-100": {
            "value": "rgb(229, 29, 29)",
            "type": "color",
            "description": "token 1 aliased with n modes within collection within n groups"
          },
          "blue-700": {
            "value": "rgb(229, 0, 0)",
            "type": "color",
            "description": "token 2 aliased with n modes within collection within n groups"
          }
        }
      }
    }
  }
}

color/light/semantic.json

{
  "colors": {
    "color": {
      "light": {
        "semantic": {
          "background": {
            "button": {
              "primary": {
                "hover": {
                  "value": "{colors.color.light.core.blue-700}",
                  "type": "color",
                  "description": "alias token with n modes within collection within n groups"
                }
              }
            }
          }
        }
      }
    }
  }
}

to-tailwind

This parser helps you generate a Tailwind theme from all your design tokens coming from Specify.

Interface

Basic usage

Advanced usage - token values as CSS variables

to-sdtf

This parser helps you get your design tokens as a SDTF graph in JSON.

Interface

interface parser {
  name: 'to-sdtf';
  output:
    | { type: 'directory'; directoryPath: string }
    | { type: 'file'; filePath: string }
    | { type: 'SDTF' }
    | { type: 'text' }
    | { type: 'JSON'; filePath: string };
}

Basic usage

{
  "colors": {
    "$collection": {
      "$modes": [
        "light",
        "dark"
      ]
    },
    "Core": {
      "blue-100": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 29,
            "alpha": 1,
            "green": 29,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 255,
            "model": "rgb"
          }
        },
        "$description": "token 1 aliased with n modes within collection within n groups"
      },
      "blue-700": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 0,
            "alpha": 1,
            "green": 0,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 200,
            "model": "rgb"
          }
        },
        "$description": "token 2 aliased with n modes within collection within n groups"
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.Core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.Core.blue-700"
                }
              },
              "$description": "alias token with n modes within collection within n groups"
            }
          }
        }
      }
    }
  }
}

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens in JSON",
      "parsers": [
        {
          "name": "to-sdtf",
          "output": {
            "type": "file",
            "filePath": "output/tokens.json"
          }
        }
      ]
    }
  ]
}

tokens.json

{
  "colors": {
    "$collection": {
      "$modes": [
        "light",
        "dark"
      ]
    },
    "Core": {
      "blue-100": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 29,
            "alpha": 1,
            "green": 29,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 255,
            "model": "rgb"
          }
        },
        "$description": "token 1 aliased with n modes within collection within n groups"
      },
      "blue-700": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 0,
            "alpha": 1,
            "green": 0,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 200,
            "model": "rgb"
          }
        },
        "$description": "token 2 aliased with n modes within collection within n groups"
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.Core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.Core.blue-700"
                }
              },
              "$description": "alias token with n modes within collection within n groups"
            }
          }
        }
      }
    }
  }
}

to-javascript

This parser helps you pull design tokens as JavaScript objects for all token types and their respective helper functions.

Interface

interface parser {
  name: 'to-javascript';
  output: {
    type: 'file';
    filePath: string;
  };
  options?: {
    typescript?: boolean;
    moduleExport?: 'es6' | 'commonjs';
  };
}

Basic usage

{
  "colors": {
    "$collection": {
      "$modes": [
        "light",
        "dark"
      ]
    },
    "Core": {
      "blue-100": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 29,
            "alpha": 1,
            "green": 29,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 255,
            "model": "rgb"
          }
        },
        "$description": "token 1 aliased with n modes within collection within n groups"
      },
      "blue-700": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 0,
            "alpha": 1,
            "green": 0,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 200,
            "model": "rgb"
          }
        },
        "$description": "token 2 aliased with n modes within collection within n groups"
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.Core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.Core.blue-700"
                }
              },
              "$description": "alias token with n modes within collection within n groups"
            }
          }
        }
      }
    }
  }
}

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "To JavaScript",
      "parsers": [
        {
          "name": "to-javascript",
          "output": {
            "type": "file",
            "filePath": "tokens.js"
          }
        }
      ]
    }
  ]
}

tokens.js

/** 
* @enum {string} All the valid paths for the collection colors.
* Use it when calling `getColorsTokenByMode`
*/
export const colorsColorPath = {
  'colors.Core.blue-100': 'colors.Core.blue-100',
  'colors.Core.blue-700': 'colors.Core.blue-700',
  'colors.semantic.background.button.primary.hover': 'colors.semantic.background.button.primary.hover'
};

/**
* All the modes of the collection colors.
* Use it when calling `getColorsTokenByMode`
*/
export const colorsModes = [ 'light', 'dark' ];

/** 
* All the tokens of the collection colors.
* Use `getColorsTokenByMode` to retrieve the tokens
*/
export const colors = {
  'colors.Core.blue-100': { dark: 'rgb(229, 29, 29)', light: 'rgb(255, 255, 255)' },
  'colors.Core.blue-700': { dark: 'rgb(229, 0, 0)', light: 'rgb(255, 200, 255)' },
  'colors.semantic.background.button.primary.hover': { dark: 'rgb(229, 29, 29)', light: 'rgb(255, 200, 255)' }
};

/**
* Retrieve a token for the collection 'colors'.
* @param {keyof typeof colorsPath} path - The path to the token
* @param {'light' | 'dark'} mode - The mode of the token you want to retrieve 
* @returns {number | string} The value of a token for a given mode
*/
export function getColorsTokenByMode(path, mode) {
  if (!colors[path]) {
    throw new Error("Path: '" + path + "' doesn't exist for collection 'colors'. Here are all the valid paths for each type:" + `
- color:
    - colors.Core.blue-100
    - colors.Core.blue-700
    - colors.semantic.background.button.primary.hover`)
  }

  if (!colors[path][mode]) {
    throw new Error("Invalid mode '" + mode.toString() + "' for collection 'colors' at path '" + path + "', here are all the valid modes:\n- " + Object.keys(colors[path]).join('\n- '))
  }

  return colors[path][mode]
}

to-react-native

This parser helps you pull design tokens as a theme compatible with React Native and their respective helper functions.

Interface

Basic usage

to-json

This parser helps you pull design tokens in JSON with token values in JSON or CSS.

Interface

interface parser {
  name: 'to-json';
  output: {
    type: 'file';
    filePath: string;
  };
  options?: {
    output?: 'raw' | 'css';
  };
}

Basic usage - JSON token values

{
  "colors": {
    "$collection": {
      "$modes": [
        "light",
        "dark"
      ]
    },
    "Core": {
      "blue-100": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 29,
            "alpha": 1,
            "green": 29,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 255,
            "model": "rgb"
          }
        },
        "$description": "token 1 aliased with n modes within collection within n groups"
      },
      "blue-700": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 0,
            "alpha": 1,
            "green": 0,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 200,
            "model": "rgb"
          }
        },
        "$description": "token 2 aliased with n modes within collection within n groups"
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.Core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.Core.blue-700"
                }
              },
              "$description": "alias token with n modes within collection within n groups"
            }
          }
        }
      }
    }
  }
}

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "To JSON",
      "parsers": [
        {
          "name": "to-json",
          "output": {
            "type": "file",
            "filePath": "tokens.json"
          }
        }
      ]
    }
  ]
}

tokens.json

{
  "colors": {
    "Core": {
      "blue-100": {
        "dark": {
          "model": "rgb",
          "red": 229,
          "green": 29,
          "blue": 29,
          "alpha": 1
        },
        "light": {
          "model": "rgb",
          "red": 255,
          "green": 255,
          "blue": 255,
          "alpha": 1
        }
      },
      "blue-700": {
        "dark": {
          "model": "rgb",
          "red": 229,
          "green": 0,
          "blue": 0,
          "alpha": 1
        },
        "light": {
          "model": "rgb",
          "red": 255,
          "green": 200,
          "blue": 255,
          "alpha": 1
        }
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "dark": {
                "model": "rgb",
                "red": 229,
                "green": 29,
                "blue": 29,
                "alpha": 1
              },
              "light": {
                "model": "rgb",
                "red": 255,
                "green": 200,
                "blue": 255,
                "alpha": 1
              }
            }
          }
        }
      }
    }
  }
}

Advanced usage - CSS token values

{
  "colors": {
    "$collection": {
      "$modes": [
        "light",
        "dark"
      ]
    },
    "Core": {
      "blue-100": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 29,
            "alpha": 1,
            "green": 29,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 255,
            "model": "rgb"
          }
        },
        "$description": "token 1 aliased with n modes within collection within n groups"
      },
      "blue-700": {
        "$type": "color",
        "$value": {
          "dark": {
            "red": 229,
            "blue": 0,
            "alpha": 1,
            "green": 0,
            "model": "rgb"
          },
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 200,
            "model": "rgb"
          }
        },
        "$description": "token 2 aliased with n modes within collection within n groups"
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.Core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.Core.blue-700"
                }
              },
              "$description": "alias token with n modes within collection within n groups"
            }
          }
        }
      }
    }
  }
}

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "To JSON",
      "parsers": [
        {
          "name": "to-json",
          "output": {
            "type": "file",
            "filePath": "tokens.json"
          },
          "options": {
            "output": "css"
          }
        }
      ]
    }
  ]
}

tokens.json

{
  "colors": {
    "Core": {
      "blue-100": {
        "dark": "rgb(229, 29, 29)",
        "light": "rgb(255, 255, 255)"
      },
      "blue-700": {
        "dark": "rgb(229, 0, 0)",
        "light": "rgb(255, 200, 255)"
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "dark": "rgb(229, 29, 29)",
              "light": "rgb(255, 200, 255)"
            }
          }
        }
      }
    }
  }
}

to-typescript

This parser helps you pull design tokens as TypeScript objects for all token types and their respective helper functions.

Interface

Basic usage

filter

This parser helps you filter a SDTF graph.

Interface

Options

Parameter

Required

Type

Default

Description

Basic usage: select all tokens from a group in a collection

We want to get all tokens in all groups named "info"
We also want to get the parent collection...
... and all children tokens within the "info" group(s)
We eventually generate our transformed SDTF graph in a JSON file thanks to the to-sdtf parser.

select-modes

This parser helps you select design tokens from specific mode(s).

Interface

Options

Parameter

Required

Type

Default

Description

Basic usage: select all tokens from a mode named "light"

We want to get all design tokens from the mode named "light"
We eventually generate our design tokens ass CSS variables in a CSS file thanks to the to-css-custom-properties parser.

change-case

This parser helps you change the case of names or modes over a SDTF graph.

Interface

Options

Basic usage

This example helps you transform in kebabCase the name all collections, groups, tokens and modes. Use this example if you want to generate CSS Custom properties with the to-css-custom-properties parser.

We change the case of the token names and the modes to kebabCase. We applyTo the collection level so we transform in kebabCase:

the collection names
the group names
the token names
the mode names

convert-color

This parser helps you convert color formats of color tokens.

Interface

Options

Basic usage

We convert all colors from our SDTF graph in hsl.

convert-dimension

This parser helps you convert units of dimension tokens.

Interface

Options

Parameter

Required

Type

Default

Description

Basic usage

We convert all colors from our SDTF graph in hsl.

{ "colors": { "$collection": { "$modes": [ "light", "dark" ] }, "aliases": { "border": { "active": { "$type": "color", "$value": { "dark": { "$alias": "colors.core.label.blue-base", "$mode": "dark" }, "light": { "$alias": "colors.core.label.blue-base", "$mode": "light" } } } } }, "core": { "label": { "blue-base": { "$type": "color", "$value": { "dark": { "model": "rgb", "red": 96, "green": 168, "blue": 250, "alpha": 1 }, "light": { "model": "rgb", "red": 17, "green": 125, "blue": 249, "alpha": 1 } } }, "blue-lighter": { "$type": "color", "$value": { "dark": { "model": "rgb", "red": 41, "green": 52, "blue": 67, "alpha": 1 }, "light": { "model": "rgb", "red": 219, "green": 236, "blue": 254, "alpha": 1 } } } } } }, "dimensions": { "$collection": { "$modes": [ "desktop", "mobile" ] }, "base": { "dimension-01": { "$type": "dimension", "$value": { "mobile": { "value": 2, "unit": "px" }, "desktop": { "value": 4, "unit": "px" } } }, "dimension-02": { "$type": "dimension", "$value": { "mobile": { "value": 4, "unit": "px" }, "desktop": { "value": 8, "unit": "px" } } } } } }

to-style-dictionary

This parser helps you generate Style Dictionary raw token files for all your design tokens coming from Specify.

Unlike the existing to-style-dictionary parser, this one doesn't have any options yet.

Interface

interface parser {
  name: 'to-style-dictionary';
  output: {
    type: 'directory';
    directoryPath: string;
  };
}

General output rules

A collection will generate a folder at the top level
1. The default level refers to the SDTF Token Type associated SD Category → {collectionName?}/{SDCategory}
2. The next folder level is the name of the potential first group containing the token → {collectionName?}/{SDCategory}/{1stLevelGroupName?}
3. The default filename is the name of the first group, or the name of the each mode the token might have, or base.json → {collectionName?}/{SDCategory}/{ mode? | 1stLevelGroupName? | base}.json (priority order for filename: groupName > mode > base)
The token path inside the file must match the token file path with the following priority order: collection > SDCategoryType > Mode > Groups
- {collectionName?}/{SDCategory}/{1stLevelGroupName? | mode? | base}.json → { collection: {type: {mode: { groupName: { tokenName: ... }}}}

Basic usage

{
  "colors": {
    "$collection": { "$modes": ["light", "dark"] },
    "core": {
      "blue-100": {
        "$type": "color",
        "$description": "token 1 aliased with n modes within collection within n groups",
        "$value": {
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 255,
            "model": "rgb"
          },
          "dark": {
            "red": 229,
            "blue": 29,
            "alpha": 1,
            "green": 29,
            "model": "rgb"
          }
        }
      },
      "blue-700": {
        "$type": "color",
        "$description": "token 2 aliased with n modes within collection within n groups",
        "$value": {
          "light": {
            "red": 255,
            "blue": 255,
            "alpha": 1,
            "green": 200,
            "model": "rgb"
          },
          "dark": {
            "red": 229,
            "blue": 0,
            "alpha": 1,
            "green": 0,
            "model": "rgb"
          }
        }
      }
    },
    "semantic": {
      "background": {
        "button": {
          "primary": {
            "hover": {
              "$type": "color",
              "$description": "alias token with n modes within collection within n groups",
              "$value": {
                "dark": {
                  "$mode": "dark",
                  "$alias": "colors.core.blue-100"
                },
                "light": {
                  "$mode": "light",
                  "$alias": "colors.core.blue-700"
                }
              }
            }
          }
        }
      }
    }  
  }
}

.specifyrc.json

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate Style Dictionary raw token files",
      "parsers": [
        {
          "name": "to-style-dictionary",
          "output": {
            "type": "directory",
            "directoryPath": "output/tokens/"
          }
        }
      ]
    }
  ]
}

color/light/core.json

{
  "colors": {
    "color": {
      "light": {
        "core": {
          "blue-100": {
            "value": "rgb(255, 255, 255)",
            "type": "color",
            "description": "token 1 aliased with n modes within collection within n groups"
          },
          "blue-700": {
            "value": "rgb(255, 200, 255)",
            "type": "color",
            "description": "token 2 aliased with n modes within collection within n groups"
          }
        }
      }
    }
  }
}

color/dark/core.json

{
  "colors": {
    "color": {
      "dark": {
        "core": {
          "blue-100": {
            "value": "rgb(229, 29, 29)",
            "type": "color",
            "description": "token 1 aliased with n modes within collection within n groups"
          },
          "blue-700": {
            "value": "rgb(229, 0, 0)",
            "type": "color",
            "description": "token 2 aliased with n modes within collection within n groups"
          }
        }
      }
    }
  }
}

color/light/semantic.json

{
  "colors": {
    "color": {
      "light": {
        "semantic": {
          "background": {
            "button": {
              "primary": {
                "hover": {
                  "value": "{colors.color.light.core.blue-700}",
                  "type": "color",
                  "description": "alias token with n modes within collection within n groups"
                }
              }
            }
          }
        }
      }
    }
  }
}