Tokens and Slots

button.scss

.ms-Button.ms-Button--primary {
  background-color: $ms-colorBackgroundButtonPrimary;
   color: $ms-colorTextButtonPrimary;

  &:hover {
    background-color: $ms-colorBackgroundButtonPrimaryHover;
  }
}

buttonSlots.yml

Title: Button Slots
---
colorBackgroundButtonPrimary:      interactive-background
colorTextButtonPrimary:            interactive-text
colorBackgroundButtonPrimaryHover: interactive-background-hover

tokens.yml

Title: Tokens
---
interactive-background:       #0078d7
interactive-text:             #ffffff
interactive-background-hover: #005a9e
modal-background-reversed:    #0078d7
modal-text-reversed:          #ffffff