Gradients

View on FigmaView on GitHub
import { gradient } from '@sky-uk/ui-core';

Basic Usage Example

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

gradient('primary');


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

Available Gradients

Brand

  1. #FF8C00
  2. #F80032
  3. #FF00A0
  4. #8C28FF
  5. #0023FF
  6. #19A0FF

Sky

Gradient key sky

  1. #FF7800
  2. #F80032
  3. #FF00A0
  4. #8C28FF
  5. #0023FF
  6. #1798FF

Sky - accessible

Gradient key sky.accessible

  1. #000FF5
  2. #000FBE

Primary

Gradient key primary

  1. #1AAB31
  2. #17992C

Environmental

Gradient key environmental

Products

  1. #6E00FF
  2. #FF00A5

Broadband

Gradient key products.broadband

  1. #000FF5
  2. #00E6FF

Business (previously Connect)

Gradient key products.business

  1. #000FF5
  2. #47C5FF

Business - accessible (previously Connect)

Gradient key products.business.accessible

  1. #091153
  2. #0C1B87

Glass

Gradient key products.glass

  1. #FF00A5
  2. #FF0A50
  3. #FF6400

Mobile

Gradient key products.mobile

  1. #FF00A5
  2. #FF0A50
  3. #F56400

Mobile - accessible

Gradient key products.mobile.accessible

  1. #FF2800
  2. #FF371E
  3. #FF9600

Protect

Gradient key products.protect

  1. #FF2800
  2. #F56400

Protect - accessible

Gradient key products.protect.accessible

  1. #000FF5
  2. #00D2FF

TV

Gradient key products.tv

  1. #000FF5
  2. #0096FF

TV - accessible

Gradient key products.tv.accessible

Channels

  1. #000000
  2. #000000

Arts

Gradient key channels.arts

  1. #003264
  2. #27749D

Atlantic

Gradient key channels.atlantic

  1. #5C0F39
  2. #80082C

Box

Gradient key channels.box

  1. #FF5200
  2. #FF5200

Challenge

Gradient key channels.challenge

  1. #FF0031
  2. #9B0031

Cinema

Gradient key channels.cinema

  1. #FF8200
  2. #FF8200

Comedy

Gradient key channels.comedy

  1. #182935
  2. #31576B

Crime

Gradient key channels.crime

  1. #E90000
  2. #E90000

Documentaries

Gradient key channels.documentaries

  1. #6626A1
  2. #4C0080

Kids

Gradient key channels.kids

  1. #8C00FF
  2. #FF5E1D

Max

Gradient key channels.max

  1. #2B6300
  2. #3E8F00

Nature

Gradient key channels.nature

  1. #041957
  2. #122D74

News

Gradient key channels.news

  1. #0080DF
  2. #079EF8

One (replaced by Sky Max)

Gradient key channels.one

  1. #361740
  2. #763175

Pick

Gradient key channels.pick

  1. #021158
  2. #122476

Sports

Gradient key channels.sports

  1. #003268
  2. #073FA0

Store

Gradient key channels.store

  1. #0D0D0D
  2. #262626

Witness

Gradient key channels.witness

Areas

  1. #0644A1
  2. #862E81

Service

Gradient key service

Loyalty

  1. #708186
  2. #A1ACB2

One

Gradient key loyalty.one

  1. #C88B2E
  2. #E6BB63

Two

Gradient key loyalty.two

  1. #6E6C89
  2. #8D8DBE

Three

Gradient key loyalty.three

  1. #191919
  2. #474747

Four

Gradient key loyalty.four

Regional Variations

DE

  1. #065730
  2. #0ba158

Bundesliga DE

Gradient key regional.de.bundesliga

  1. #065730
  2. #08713e

Bundesliga DE - accessible

Gradient key regional.de.bundesliga.accessible

  1. #0014ff
  2. #00d7ff

Business DE

Gradient key regional.de.business

  1. #990033
  2. #cb0033

Cinema DE

Gradient key regional.de.cinema

  1. #990033
  2. #cc0027

Cinema DE - accessible

Gradient key regional.de.cinema.accessible

  1. #4c0080
  2. #6626a1

Entertainment DE

Gradient key regional.de.entertainment

  1. #ff6218
  2. #ffa300

Kids DE

Gradient key regional.de.kids

  1. #c1481b
  2. #996200

Kids DE - accessible

Gradient key regional.de.kids.accessible

  1. #000000
  2. #555555

Non Sky DE

Gradient key regional.de.nonSky

  1. #000FF5
  2. #0096FF

Ultimate TV DE

Gradient key regional.de.ultimateTv

Return Types

The gradient function also supports a second argument, which sets the return type.

If you pass 'text' as a string to the second argument then it 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;
    }
}

If you pass '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%);
}