global:
  type: color
  category: text-color
imports:
  - ../aliases/color.yml
  - ../aliases/color-palette.yml
props:
  # body text
  color-text:
    value: "{!palette-gray-100}"
    comment: Body text color
    text_contrast_pairing:
      - color-background
      - color-background-strong
      - color-background-stronger
      - color-background-body
      - color-background-user
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-new
      - color-background-row-striped
      - color-background-primary-weak
      - color-background-primary-weaker
      - color-background-primary-weakest
      - color-background-destructive-weak
      - color-background-destructive-weaker
      - color-background-destructive-weakest
  color-text-weak:
    value: "{!palette-gray-60}"
    comment: Weak body text for visual hierarchy.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-neutral-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-weaker:
    value: "{!palette-gray-40}"
    comment: Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.
  color-text-weakest:
    value: "{!palette-gray-0}"
    comment: Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.
    text_contrast_pairing:
      - color-background-primary-strong
      - color-background-primary-stronger
      - color-background-primary-strongest
      - color-background-destructive-strong
      - color-background-destructive-stronger
      - color-background-destructive-strongest
  color-text-inverse:
    value: "{!palette-gray-0}"
    comment: Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
    text_contrast_pairing:
      - color-background-body-inverse
      - color-background-brand
      - color-background-error
      - color-background-primary
      - color-background-destructive
  color-text-inverse-weak:
    value: "{!palette-gray-30}"
    comment: Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
    text_contrast_pairing:
      - color-background-body-inverse
      - color-background-brand
  color-text-inverse-weaker:
    value: "{!palette-gray-50}"
    comment: Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
  color-text-inverse-weakest:
    value: "{!palette-gray-70}"
    comment: Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
  color-text-brand-inverse:
    value: "{!white}"
    comment: Text color used on any brand color
    text_contrast_pairing:
      - color-background-body-inverse
      - color-background-brand
  color-text-brand:
    value: "{!palette-gray-100}"
    comment: Text color to be used on top of brand accent background colors such as color-background-brand-10 only.
    text_contrast_pairing:
      - color-background-brand-10
      - color-background-brand-20
      - color-background-brand-30
  color-text-brand-highlight:
    value: "{!amaranth}"
    comment: Twilio brand red, accessible on large text only.
    uicontrol_contrast_pairing:
      - color-background-body

  # links
  color-text-link:
    value: "{!palette-blue-60}"
    comment: Link text
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
    uicontrol_contrast_pairing:
      - color-background
      - color-background-strong
      - color-background-body
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-new
      - color-background-row-striped
      - color-background-primary-weaker
      - color-background-primary-weakest
      - color-background-destructive-weaker
      - color-background-destructive-weakest
  color-text-link-weak:
    value: "{!palette-blue-30}"
    comment: Weak shade of link text to be used in interactions
  color-text-link-strong:
    value: "{!palette-blue-80}"
    comment: Strong shade of link text to be used in interactions
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-link-stronger:
    value: "{!palette-blue-90}"
    comment: Stronger shade of link text to be used in interactions
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-link-strongest:
    value: "{!palette-blue-100}"
    comment: Strongest shade of link text to be used in interactions
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-link-destructive:
    value: "{!palette-red-60}"
    comment: Destructive link text
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-neutral-weakest
      - color-background-warning-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-link-destructive-weak:
    value: "{!palette-red-30}"
    comment: Weak shade of destructive link text to be used in interactions
  color-text-link-destructive-strong:
    value: "{!palette-red-70}"
    comment: Strong shade of destructive link text to be used in interactions
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-link-destructive-stronger:
    value: "{!palette-red-90}"
    comment: Stronger shade of destructive link text to be used in interactions
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-link-destructive-strongest:
    value: "{!palette-red-100}"
    comment: Strongest shade of destructive link text to be used in interactions
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest

  # primary
  color-text-primary:
    value: "{!palette-blue-60}"
    comment: Primary text.
  color-text-primary-weak:
    value: "{!palette-blue-30}"
    comment: Weak primary text.
  color-text-primary-strong:
    value: "{!palette-blue-80}"
    comment: Strong primary text.
  color-text-primary-stronger:
    value: "{!palette-blue-90}"
    comment: Stronger primary text.
  color-text-primary-strongest:
    value: "{!palette-blue-100}"
    comment: Strongest primary text.

  # destructive
  color-text-destructive:
    value: "{!palette-red-60}"
    comment: Destructive text.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-neutral-weakest
      - color-background-warning-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-destructive-weak:
    value: "{!palette-red-30}"
    comment: Weak shade of destructive text.
  color-text-destructive-strong:
    value: "{!palette-red-70}"
    comment: Strong shade of destructive text.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-destructive-stronger:
    value: "{!palette-red-90}"
    comment: Stronger shade of destructive text.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-destructive-strongest:
    value: "{!palette-red-100}"
    comment: Strongest shade of destructive text.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest

  # status
  color-text-error-weak:
    value: "{!palette-red-50}"
    comment: Weak error text for inputs and error misc
  color-text-error:
    value: "{!palette-red-60}"
    comment: Error text for inputs and error misc
    text_contrast_pairing:
      - color-background
      - color-background-body
      # - color-background-body-inverse
      - color-background-neutral-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-error-strong:
    value: "{!palette-red-70}"
    comment: Strong error text for inputs and error misc
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-error-stronger:
    value: "{!palette-red-90}"
    comment: Stronger error text for inputs and error misc
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-error-strongest:
    value: "{!palette-red-100}"
    comment: Strongest error text for inputs and error misc.
  color-text-success:
    value: "{!palette-green-70}"
    comment: Text color for success text.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-success-weakest
      - color-background-row-striped
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-success-weakest
      - color-background-row-striped
  color-text-warning:
    value: "{!palette-orange-80}"
    comment: Color for warning text.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-warning-weakest
      - color-background-row-striped
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-warning-weakest
      - color-background-row-striped
  color-text-warning-strong:
    value: "{!palette-orange-80}"
    comment: Color for dark warning text.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-row-striped
      - color-background-warning-weakest
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-row-striped
      - color-background-warning-weakest
  color-text-new:
    value: "{!palette-purple-60}"
    comment: Color for text indicating a new status.
    text_contrast_pairing:
      - color-background
      - color-background-body
      # - color-background-body-inverse
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-neutral:
    value: "{!palette-blue-80}"
    comment: Color for text indicating a neutral status.
    text_contrast_pairing:
      - color-background
      - color-background-body
      # - color-background-body-inverse
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
  color-text-inverse-new:
    value: "{!palette-purple-30}"
    comment: Inverse color for indicating a new status.
    text_contrast_pairing:
      - color-background-inverse-strong

  # icon
  color-text-icon:
    value: "{!palette-gray-60}"
    comment: Default icon color.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-row-striped
      - color-background-primary-weakest
      - color-background-destructive-weakest
    uicontrol_contrast_pairing:
      - color-background
      - color-background-strong
      - color-background-body
      - color-background-subaccount
      - color-background-trial
      - color-background-neutral-weakest
      - color-background-success-weakest
      - color-background-warning-weakest
      - color-background-error-weakest
      - color-background-new
      - color-background-row-striped
      - color-background-primary-weaker
      - color-background-primary-weakest
      - color-background-destructive-weaker
      - color-background-destructive-weakest
  color-text-icon-available:
    value: "{!palette-green-70}"
    comment: "Icon color for indicating a available status"
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-warning-weakest
      - color-background-row-striped
  color-text-icon-unavailable:
    value: "{!palette-red-60}"
    comment: "Icon color for indicating a unavailable status"
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-warning-weakest
      - color-background-row-striped
  color-text-icon-offline:
    value: "{!palette-gray-60}"
    comment: "Icon color for indicating a offline status"
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-warning-weakest
      - color-background-row-striped
  color-text-icon-busy:
    value: "{!palette-orange-65}"
    comment: "Icon color for indicating a busy status"
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-warning-weakest
      - color-background-row-striped
  color-text-icon-inverse:
    value: "{!palette-gray-50}"
    comment: Default icon color for inverse backgrounds.
    text_contrast_pairing:
      - color-background-body-inverse
  color-text-icon-error:
    value: "{!palette-red-60}"
    comment: Icon color for indicating an error.
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-error-weakest
      - color-background-row-striped
  color-text-icon-success:
    value: "{!palette-green-70}"
    comment: Icon color for indicating success.
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-success-weakest
      - color-background-row-striped
  color-text-icon-warning:
    value: "{!palette-orange-65}"
    comment: Icon color for indicating a warning.
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-warning-weakest
      - color-background-row-striped
  color-text-icon-neutral:
    value: "{!palette-blue-80}"
    comment: Icon color for being neutral.
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-neutral-weakest
      - color-background-row-striped
  color-text-icon-brand-highlight:
    value: "{!amaranth}"
    comment: Twilio brand red icon color used for the Twilio logo.
    uicontrol_contrast_pairing:
      - color-background
      - color-background-body
  color-text-icon-brand-inverse:
    value: "{!palette-gray-0}"
    comment: Twilio brand icon color used for the Twilio logo on inverse backgrounds.
    text_contrast_pairing:
      - color-background-body-inverse
  color-text-icon-new:
    value: "{!palette-purple-60}"
    comment: Icon color for indicating a new status.
  color-text-icon-notification:
    value: "{!palette-red-50}"
    comment: Icon color for notification elements.

  # decorative
  color-text-decorative-10:
    value: "{!palette-gray-60}"
    comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-decorative-10-weakest
  color-text-decorative-20:
    value: "{!palette-blue-80}"
    comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-decorative-20-weakest
  color-text-decorative-30:
    value: "{!palette-green-70}"
    comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-decorative-30-weakest
  color-text-decorative-40:
    value: "{!palette-purple-60}"
    comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
    text_contrast_pairing:
      - color-background
      - color-background-body
      - color-background-decorative-40-weakest

  # user
  color-text-user:
    value: "{!palette-gray-100}"
    comment: Text color for user avatar.

  # product
  color-text-subaccount:
    value: "{!palette-yellow-90}"
    comment: Text color for the subaccount badge