Gradients - React

You can use the gradient function to get color stops from the theme by name.

import { gradient } from '@sky-uk/ui-core';

gradient('primary');

// returns
['#000FF5', '#000FBE'];

Return Types

The gradient function also supports a second argument, which sets the return type. Passing 'text' as a string to the second argument will return a css block that is suitable for applying gradients to text:

styled.div`
  ${gradient('primary', 'text')}
`;

// returns
.c0{
    @supports (-webkit-background-clip: text) or (background-clip: text) {
      background-image: linear-gradient(to right, #000FF5 0%, #000FBE 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
}

Passing 'background' as a string to the second argument then it will return a line of css, setting the background-image of the component to a gradient:

styled.div`
  ${gradient('primary', 'background')}
`;

// returns
.c0{
  background-image: linear-gradient(to right, #000FF5 0%, #000FBE 100%);
}