Component

Semantic Token	Primitive Token (Reference)	Color Preview
Button.Primary.Border.default	{Color.Blue.500}
Button.Primary.Border.disabled	{Color.Gray.100}
Button.Primary.Border.hover	{Color.Blue.400}
Button.Primary.Border.pressed	{Color.Blue.600}
Button.Primary.Surface.default	{Surface.Primary.500}
Button.Primary.Surface.disabled	{Surface.Secondary.100}
Button.Primary.Surface.hover	{Surface.Primary.400}
Button.Primary.Surface.pressed	{Surface.Primary.600}
Button.Primary.Text.default	{Text.Body.invert}
Button.Primary.Text.disabled	{Text.Body.tertiary}
Button.Secondary.Border.default	{Color.Blue.500}
Button.Secondary.Border.disabled	{Color.Gray.100}
Button.Secondary.Border.hover	{Color.Blue.400}
Button.Secondary.Border.pressed	{Color.Blue.600}
Button.Secondary.Surface.disabled	{Color.Gray.200}
Button.Secondary.Surface.hover	{Surface.Primary.50}
Button.Secondary.Surface.pressed	{Color.Blue.600}
Button.Secondary.Surface.primary	{Surface.Neutral.Light}
Button.Secondary.Text.default	{Text.Brand.Accent}
Button.Secondary.Text.disabled	{Text.Body.secondary}

Semantic Token	Primitive Token (Reference)	Color Preview
Input.border.active	{Border.accent}
Input.border.default	{Border.primary}
Input.border.disabled	{Border.primary}
Input.border.negative	{Border.negative}
Input.icon.default	{Surface.Secondary.300}
Input.icon.negative	{Surface.Status.Negative}
Input.icon.positive	{Surface.Status.Positive}
Input.icon.warning	{Surface.Status.Warning}
Input.surface.active	{Surface.Secondary.50}
Input.surface.default	{Surface.Secondary.50}
Input.surface.disable	{Surface.Secondary.100}
Input.surface.negative	{Surface.Secondary.50}
Input.text.field.default	{Text.Body.primary}
Input.text.field.disabled	{Text.Body.tertiary}
Input.text.field.placeholder	{Text.Body.tertiary}
Input.text.helper.default	{Text.Body.secondary}
Input.text.helper.disabled	{Text.Body.tertiary}
Input.text.helper.negative	{Text.Status.Negative}
Input.text.label.default	{Text.Body.primary}
Input.text.label.disabled	{Text.Body.tertiary}

Button