Helpers

mediaQuery

Based on the breakpoints defined in design tokens return media queries for various device viewport sizes: aboveSmall (tablets), aboveMedium (small desktops), and aboveLarge (wide screen).

Following mobile-first approach, when using multiple media queries make sure to write them in correct order: put the mobile styles first (these are the ones without any media query specified), aboveSmall before aboveMedium, and aboveMedium before aboveLarge.

hexToRgba

Converts HEX color to RGBA counterpart, with optional alpha setting. Mainly used to change opacity of the color.

Note: When using a theme token for the color in SSR apps, the returned value will be the CSS variable fallback value instead of the current CSS value.

readableHexColor

For the best contrast and readability, depending whether provided HEX color is dark or light return tokens.colors.white or tokens.colors.navy from design tokens. It is also possible to specify custom colors.

hexColorShade

Makes HEX color darker or lighter without changing its opacity.

hexColorLuminance

Calculates HEX color luminance. Useful for various accessibility color checks.

isHexColor

Checks whether the color is provided in HEX notation or not. Examples of HEX colors: #05192D, #22E. Examples of colors in different notations: rgb(245, 16, 0), rgba(16, 8, 36, 0.4), hsl(100 100% 50%).

isCssVar

Checks whether the string provided is a CSS variable or not. Examples of CSS variables: --wf-text--main, --wf-background--contrast-inverse.

isCssVarFunc

Checks whether the string provided is a CSS variable function or not. Examples of CSS variable functions: var(--wf-text--main), var(--wf-background--contrast, #fff).

valueFromCssVar

Obtains the value from a provided CSS variable, if the variable is currently defined. Try out any of the CSS variables from our theme tokens to explore how it works.

cssVarFromCssVarFunc

Extracts the CSS variable from a provided CSS variable function. Try out any of our theme tokens to explore how it works.

cssVarFuncFallback

Extracts the fallback value from a provided CSS variable function. Try out any of our theme tokens to explore how it works.

deepChildrenMap

In a similar way to React.Children.map, creates a new children array, but calls a provided function recursively on every child (and its children).

setTitleCase

Converts provided text to Title Case. Words that contain uppercase characters (such as “iPhone”, “GitHub”, “SQL”, etc.) will be left unchanged, provided that they’re not included in the list of stop words. Waffles Button uses this for provided string content by default.

Imports

You can import the following components or utilities from this module:

import {
  TITLE_CASE_STOP_WORDS,
  WAFFLES_ERROR_PREFIX,
  WAFFLES_WARN_PREFIX,
  cssVarFromCssVarFunc,
  cssVarFuncFallback,
  deepChildrenMap,
  hexColorLuminance,
  hexColorShade,
  hexToRgba,
  isCssVar,
  isCssVarFunc,
  isHexColor,
  logError,
  logWarning,
  mediaQuery,
  readableHexColor,
  setTitleCase,
  valueFromCssVar,
} from '@datacamp/waffles/helpers';
import type { TITLE_CASE_STOP_WORDSProps } from '@datacamp/waffles/helpers';