BOLT DESIGN SYSTEM

Twig Filters

markdown

Filters a string of markdown and converts it to HTML.

Example

{{ source(readmeFile) | markdown }}

rgb2hex

Filters an rgb color value as a string in the form of "rgb( n, m, o)" and converts it to hexadecimal notation.

Example

{% set colorValue = 'rgb( 255, 99, 71)' %}
{# This is the rgb value for the color _tomato_ #}

{% set color = colorValue | rgb2hex %}
{# color is now the hex value for _tomato_, '#ff6347' #}

text_contrast

Filters a color in the form of a string and determines if the contrasting text is 'black' or 'white'.

Example

<div class="c-bolt-swatch__text" style="color: {{ colorValue | text_contrast }}">

Twig Functions

console_log( data )

Outputs data to the browser's console log.

Parameters

• data Any data you would like to log to the console from a twig template.

Example

{{ console_log(page.meta) }}

deep_merge( array1, array2 )

Does a recursive or 'deep' merge of two arrays using PHP array_merge_recursive and returns the result.

Parameters

• array {array} A multi-dimensional array.
• array {array} A multi-dimensional array.

Example

{% set colorsOne = ['red', 'blue'] %}
{% set colorsTwo = ['green', ['yello', 'teal']] %}
{% set allColors = deep_merge(colorsOne, colorsTwo) %}
{# `allColors` will now equal ['red', 'blue', 'green', 'yellow', 'teal'] #}

color_contrast( color1, color2 )

Does an accessibility analysis of two colors based on the WCAG 2 requirements for visual audio contrast and large scale text. Returns results as an array with a key for each level (AA, AAA, both for normal, large, and bold text) as well as the calculated contrast ratio.

Parameters

• color {string} A string representing a color value in the form of a hexadecimal (without the leading '#').
• color {string} A string representing a color value in the form of a hexadecimal (without the leading '#').

Example

{% set results = color_contrast(color, 'ffffff') %}
{# Compares accessibility compliance of `color` with white #}

{% set results = color_contrast(color, '000000') %}
{# Compares accessibility compliance of `color` with black #}