@n8d/htwoo-patterns/_patterns/design-tokens/primary-button-colors.json

hTWOo Patterns to setup custom style guide

{
    "items": [
        {
            "msftName": "primaryButtonBackground",
            "msftNameLong": "Primary Button Background",
            "colorValue": "var(--primaryButtonBackground)",
            "designToken": "theme-600",
            "SASSVariable": "$theme-600"
        },
        {
            "msftName": "primaryButtonBackgroundDisabled",
            "msftNameLong": "Primary Button Background Disabled",
            "colorValue": "var(--primaryButtonBackgroundDisabled)",
            "designToken": "neutral-100",
            "SASSVariable": "$neutral-100"
        },
        {
            "msftName": "primaryButtonBackgroundHovered",
            "msftNameLong": "Primary Button Background Hovered",
            "colorValue": "var(--primaryButtonBackgroundHovered)",
            "designToken": "theme-700",
            "SASSVariable": "$theme-700"
        },
        {
            "msftName": "primaryButtonBackgroundPressed",
            "mstfNameLong": "Primary Button Background Pressed",
            "colorValue": "var(--primaryButtonBackgroundPressed)",
            "designToken": "theme-800",
            "SASSVariable": "$theme-800"
        },
        {
            "msftName": "primaryButtonBorder",
            "msftNameLong": "Primary Button Border",
            "colorValue": "transparent",
            "designToken": "transparent",
            "SASSVariable": ""
        },
        {
            "msftName": "primaryButtonText",
            "msftNameLong": "Primary Button Text",
            "colorValue": "var(--primaryButtonText)",
            "designToken": "neutral-000",
            "SASSVariable": "$neutral-000"
        },
        {
            "msftName": "primaryButtonTextDisabled",
            "msftNameLong": "Primary Button Text Disabled",
            "colorValue": "var(--primaryButtonTextDisabled)",
            "designToken": "neutral-300",
            "SASSVariable": "$neutral-300"
        },
        {
            "msftName": "primaryButtonTextHovered",
            "msftNameLong": "Primary Button Text Hovered",
            "colorValue": "var(--primaryButtonTextHovered)",
            "designToken": "neutral-000",
            "SASSVariable": "$neutral-000"
        },
        {
            "msftName": "primaryButtonTextPressed",
            "msftNameLong": "Primary Button Text Pressed",
            "colorValue": "var(--primaryButtonTextPressed)",
            "designToken": "neutral-000",
            "SASSVariable": "$neutral-000"
        }
    ],
    "meta": {
        "description": "To add to these items, use Sass variables that start with <code>$color-brand-</code> in <code>./source/css/scss/abstracts/_variables.scss</code>"
    }
}