Button scheme

Placeholder JSON for button styles and button component — update later. Tabs for styles vs component.

Button scheme

Placeholder JSON for now — replace with final styles and component later.
StylesToken Commander. ComponentComponent Builder.

Intended flow: run styles (and any variables they reference) first, then the component JSON so the button binds to those styles.

Draft

Values below are random placeholders for structure only. Paths and numbers will be updated.

Paste into Token Commander (styles). Placeholder only.

{
  "textStyles": {
    "Button/Label/Primary": {
      "type": "text",
      "description": "PLACEHOLDER — primary button label",
      "value": {
        "fontFamily": "Type/Font Family/Primary",
        "fontWeight": "Type/Font Weight/Medium",
        "fontSize": "Type/Font Size/Body",
        "lineHeight": "Type/Line Height/Body"
      }
    }
  },
  "variables": {
    "Button/Padding/X": {
      "type": "number",
      "value": 16,
      "description": "PLACEHOLDER horizontal padding"
    },
    "Button/Padding/Y": {
      "type": "number",
      "value": 10,
      "description": "PLACEHOLDER vertical padding"
    },
    "Button/Radius": {
      "type": "number",
      "value": 8,
      "description": "PLACEHOLDER corner radius"
    }
  }
}

Related

Written by Narek Ch