Tokens Name Conventions and CSS

[aaronreed708]

Below is sample snippet of JSON code for a "Button" component generated by Theme Builder, which will be pushed to GitHub. The a GitHub PR can trigger GitHub actions that auto generated css from the JSON. The JSON will pushed to Figma Tokens.

The hope is that the JSON passed along to Figma Tokens can be utilized by Anima to update the naming conventions used to the auto generated it's Ai generated React and CSS code.

If the naming taxomony is the same, a user could theroretically use the code which comes out of Anima for any new components styled in Figma and maintain the dynamic logic provided by theme builder.

JSON

"Button": {
    "Default": {
        "value": {
            "minWidth": "{sizing.min-target}",
            "minHeight": "{sizing.min-target}",
            "text": "component name = \"MuiButton\""
    },
        "type": "clickable"
    },
    "Type": {
        "Text-Only": {
            "value": {
                "horizontalPadding": "{spacing.button-padding}"
            },
    "        type": "composition"
        },
        "Number": {
            "value": {
                "horizontalPadding": "{spacing.spacing-half}"
                },
            "type": "composition"
        },
        "Icon-Only": {
            "value": {
                "horizontalPadding": "0"
            },
            "type": "composition"
        },
        "Icon-Left": {
            "value": {
                "paddingRight": "{spacing.button-padding}",
                "paddingLeft": "({spacing.button-padding} - {spacing.spacing-half})"
            },
            "type": "composition"
        },
        "Icon-Right": {
            "value": {
                "paddingRight": "({spacing.button-padding} - {spacing.spacing-half})",
                "paddingLeft": "{spacing.button-padding}"
            },
            "type": "composition"
        },
    },
    "Size": {
        "Standard": {
            "value": {
                "minHeight": "{sizing.button-height}",
                "minWidth": "{sizing.button-height}"
            },
            "type": "composition"
        },
        "Small": {
            "value": {
                "minHeight": "{sizing.sm-button-height}",
                "minWidth": "{sizing.button-height}"
            },
            "type": "composition"
        }
    },
    "Style": {
        "Solid": {
            "Default": {
                "value": {
                    "fill": "{background-button}",
                    "borderColor": "{background-button}",
                    "borderWidth": "{border-width.button}",
                    "borderRadius": "{radius.button-radius}",
                    "horizontalPadding": "{spacing.button-padding}"
                },
                "type": "composition"
            },
            "On-Color": {
                "value": {
                    "fill": "{background-on-color}",
                    "borderColor": "{background-on-color}",
                    "borderWidth": "{border-width.button}",
                    "borderRadius": "{radius.button-radius}",
                    "horizontalPadding": "{spacing.button-padding}"
                },
                "type": "composition"
            }
        },
        "Outlined": {
            "Default": {
                "value": {
                    "fill": "{color}",
                    "borderColor": "{background-button}",
                    "borderWidth": "{border-width.button}",
                    "borderRadius": "{radius.button-radius}"
                },
                "type": "composition"
            },
            "On-Color": {
                "value": {
                    "fill": "{color}",
                    "borderColor": "{background-on-color}",
                    "borderWidth": "{border-width.button}",
                    "borderRadius": "{radius.button-radius}"
                },
                "type": "composition"
            }
        },
        "Text": {
            "value": {
                "fill": "{color}",
                "borderColor": "{color}",
                "borderWidth": "{border-width.button}",
                "borderRadius": "{radius.button-radius}"
            },
            "type": "composition"
        }
    },
    "State": {
        "Default": {
            "value": {
                "x": "0 - {focus-border} - {sizing.animation-distance}",
                "y": "0 - {focus-border} - {sizing.animation-distance}",
                "number": "{animation.speed}",
                "borderWidth": "{focus-border}",
                "borderColor": "transparent",
                "borderRadius": "( {radius.button-radius} + 3)"
            },
            "type": "composition"
        },
        "Hover": {
            "value": {
                "x": "0 - {focus-border}",
                "y": "0 - {focus-border}",
                "number": "{animation.speed}",
                "borderWidth": "{focus-border}",
                "borderColor": "{background-button-half}",
                "borderRadius": "( {radius.button-radius} + 3)"
            },
            "type": "composition"
        },
        "Focus": {
            "value": {
                "x": "0 - {focus-border}",
                "y": "0 - {focus-border}",
                "number": "{animation.speed}",
                "borderWidth": "{focus-border}",
                "borderColor": "{background-button}",
                "borderRadius": "( {radius.button-radius} + 3)"
            },
            "type": "composition"
        }
    }
}

CSS

The Desired CSS output from the above JSON, transformed by Style Dictionary, should be:

.button {
    min-width: var(--min-target);
    min-height: var(--min-target);
}
.button.styles.text-only {
    horizontal-padding: var(--button-padding);
}
.button.styles.number {
    horizontal-padding: var(--spacing-half);
}
.button.styles.icon-only {
    horizontal-padding: 0;
}
.button.styles.icon-left: {
    padding-right: var(--button-padding);
    padding-left: calc(var(--button-padding) - var(--spacing-half));
}
.button.syles.icon-right: {
    padding-right: calc(var(--button-padding) - var(--spacing-half));
    padding-left: var(--button-padding);
}
.button.styles.default {
    min-height: var(--button-height);
    min-width: var(--button-height);
}
.button.styles.small { 
    min-height: var(--sm-button-height);
    min-width: var(--button-height);
}
.button.styles.solid {
    fill: var(--background-button);
    border-style: solid;
    border-color: var(--background-button);
    border-width: var(--border-width.button);
    border-radius: var(--button-radius);
    horizonal-padding: var(--button-padding);
}
.button.styles.solid.on-color {
    fill: var(--background-on-color);
    border-color: var(--background-on-color);
    border-width: var(border-width.button);
    border-radius: var(radius.button-radius);,
    horizontal-padding: var(--button-padding);
}
.button.styles.outlined {
    fill: var(--color);
    border-color: var(--background-button);
    border-width: "{border-width.button}",
    border-radius: var(--button-radius);
}
.button.styles.outlined.on-color {
   fill: var(--color);
    "borderColor": var(--background-on-color);
    "borderWidth": "{border-width.button}",
    border-radius: var(--button-radius);
}
.button.styles.text {
    fill: var(--color);
    border-color: var(--color);
    border-width: var()"{border-width.button}",
    border-radius: var(--button-radius);
}
.button.style:after {
    position: absolute;
    content: "";
    top: calc(0 - car(*--focus-border} - var(--animation-distance));
    bottom: calc(0 - car(*--focus-border} - var(--animation-distance));
    left: calc(0 - car(*--focus-border} - var(--animation-distance));
    right: calc(0 - car(*--focus-border} - var(--animation-distance));
    transition: var(animation.speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
    border-style: solid;
    border-width: var(--focus-border);
    border-color: transparent;
    border-radius: calc( var(--button-radius) + 3);
}
.button.styles:after:hover {
   position: absolute;
   content: "";
   top: calc(0 - var(--focus-border));
   bottom: calc(0 - var(--focus-border));
   left: calc(0 - var(--focus-border));
   right: calc(0 - var(--focus-border));
   border-style: solid;
   border-width: var(--focus-border);
   border-color: var(--background-button-half);
   border-radius: calc( var(--button-radius) + 3); 

}
.button.styles:after:focus {
   position: absolute;
   content: "";
   top: calc(0 - var(--focus-border));
   bottom: calc(0 - var(--focus-border));
   left: calc(0 - var(--focus-border));
   right: calc(0 - var(--focus-border));
   border-style: solid;
   border-width: var(--focus-border);
   border-color: var(--background-button);
   border-radius: calc( var(--button-radius) + 3); 
}
     

To achive this the follow rules were followed.

Token path names are converted to lower case css class names. Hence Button becomes .button.

Token variables {} are converted to root variables and loose their prefix. Hence {radius.button-radius} becomes var(--button-radius).

Ignore "type" and "text" properties.

A direct child of a type "clickable" JSON with a the name "Default" renders the listed styles in the parent.

So the JSON styles .Button.Default render in css as:

.button {}

Convert the secondary path name for all JSON with the type "clickable" to "style"

For example a json token with the path Button > Type > Default should be rendered in css as .button.style.default {}.

Tokens values with parentheses, not preceeded by RGB or RGBA, indicate calculations. Hence (0 - {focus-border}) is rendered in css as calc(0 - var(--focus-border)).

For any JSON path with the secondary path of "State" should render the css as pseudo-class and if the child of "State" is named "Default" the corresponding translated class and pseudo-class should be button.style:after.

If he JSON Token is Button > State > Focus then the rendered css would be .button.style:after:focus {}.

Additionally these "State" tokens have the following css added:

position: absolute;
content: "";

JSON styling "x" of "State" tokens is converted to top and bottom varaibles.

Hence "x": "(0 - {focus-border})" is rendered in css as:
top: calc(0 - var(--focus-border)) and bottom: calc(0 - var(--focus-border))

JSON styling "y" of "State" tokens is converted to top and bottom varaibles.

Hence "y": "(0 - {focus-border})" is rendered in css as:
left: calc(0 - var(--focus-border)) and right: calc(0 - var(--focus-border))

JSON styling "number" of "State" tokens is converted to transition so that the css is rendered transition: var(--animation-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) all

React

The react component in would then be coded as such.