to-scss-map
This parser helps you generate .scss files for each token type containing SCSS map and function / mixin to access the values of the tokens.
Interface
interface parser {
name: 'to-scss-map';
output: {
type: 'directory';
directoryPath: string;
};
options?: {
tokenNameTemplate?: string;
};
}
Options
Parameter
Required
Type
Default
Description
tokenNameTemplate
false
string
{{path}}-{{token}}-{{mode}}
The template the parser follows to name your tokens.
You can use the path
of your tokens, their token
name, and their respective mode
.
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": 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",
"personalAccessToken": "<your-personal-access-token>",
"rules": [
{
"name": "Generate tokens",
"parsers": [
{
"name": "to-scss-map",
"output": {
"type": "directory",
"directoryPath": "public"
},
"options": {}
}
]
}
]
}
public/_colors.scss
@use "sass:map";
$color: (
colors-core-blue-100-dark: rgb(41, 52, 67),
colors-core-blue-100-light: rgb(219, 236, 254),
colors-core-blue-700-dark: rgb(96, 168, 250),
colors-core-blue-700-light: rgb(17, 125, 249),
colors-semantic-background-button-primary-hover-dark: rgb(41, 52, 67),
colors-semantic-background-button-primary-hover-light: rgb(17, 125, 249),
);
@mixin get-color($levels...) {
$fetched: $color;
@each $level in $levels {
@if map-has-key($fetched, $level) {
$fetched: map-get($fetched, $level);
} @else {
@error "There is no `#{$level}` in the `#{$color}` map";
}
}
@if type-of($fetched) != map {
@error "Non usable value. Got `#{$color}`";
}
@each $prop, $value in $fetched {
#{$prop}: $value;
}
}
Last updated