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} |
|
Semantic Token |
Primitive Token (Reference) |
Color Preview |
Checkbox.border.default |
{Border.primary} |
|
Checkbox.border.disable |
{Border.secondary} |
|
Checkbox.border.negative |
{Border.negative} |
|
Checkbox.border.select |
{Border.accent} |
|
Checkbox.icon.default |
{Surface.Neutral.Light} |
|
Checkbox.surface.default |
{Surface.Secondary.50} |
|
Checkbox.surface.disable |
{Color.Gray.200} |
|
Checkbox.surface.select |
{Surface.Primary.400} |
|
Checkbox.text.default |
{Text.Body.primary} |
|
Checkbox.text.disabled |
{Text.Status.Negative} |
|
Checkbox.text.negative |
{Text.Body.tertiary} |
|
Updated about 1 month ago