Skip to main content

Text colors settings

In the most outer file of the block, the code below is used to determine the text colors of the block.

It's important to note that the text colors should ALWAYS have a default option (block_text_color == 'default'). The default value corresponds with how the block is represented in the design file.

If the CMS user doesn't want to use the default value, they can change it in the block's settings (ACF cloned field group) which most repeatable blocks have. Typically, we only allow CMS users to choose one of the following options:

  • Default (same as either the light or dark option)
  • Light (typically white text)
  • Dark (typically black or grey text)

Developers should ensure that the text colors ALWAYS have a default value. The default value corresponds with the light or dark text colors.

    {#
* Organism State: Text color
*
* Manages the (Tailwind) styling CSS classes outputted as a result of the CMS text color option for this section.
* Important: The "default" value should force a state that resembles the original design files.
#}

{% set block_text_color = section.block_visuals.block_text_color %}

{% if block_text_color == 'dark' or block_text_color == 'default' %}

{% set text_color_class_pretitle = 'text-pretitle-dark' %}
{% set text_color_class_title = 'text-heading-dark' %}
{% set text_color_class_body = 'text-body-dark' %}

{% else %}

{% set text_color_class_pretitle = 'text-pretitle-light' %}
{% set text_color_class_title = 'text-heading-light' %}
{% set text_color_class_body = 'text-body-light' %}

{% endif %}