# tfl-style
less library containing all colours and fonts possible necessary for a TfL project

# How to use
Install the npm package
```js
npm install tfl-style --save
```
Create your own less file and reference the index less file of this project
```less
import "./node_modules/tfl-style/_index.less"
```
reference the colours directly, or throught the colour and background classes (by using .#colour#-colour and .#colour#-background respectively)
```less
.my-style{
    background: @corporate-blue;
}
.my-second-style{
    .corporate-blue-colour();
}
.my-third-style{
    .corporate-blue-background();
}
```

# Colours included


### Blue
<p style="background:#113b92;color:white">@transport-for-london-blue</p>
<p style="background:#0019a8;color:white">@corporate-blue</p>
<p style="background:#0019a8;color:white">@piccadilly-blue</p>
<p style="background:#0019a8;color:white">@london-underground-blue</p>
<p style="background:#0019a8;color:white">@tfl-rail-blue</p>
<p style="background:#0019a8;color:white">@oyster-dark-blue</p>
<p style="background:#009dd9;color:black">@oyster-light-blue</p>
<p style="background:#8480d7;color:black">@taxi-blue</p>
<p style="background:#0067c1;color:white">@safety-blue</p>
<p style="background:#00a0e2;color:black">@victoria-blue</p>
<p style="background:#00a0e2;color:black">@river-services-blue</p>
<p style="background:#061a30;color:white">@legible-london-blue</p>

### Red
<p style="background:#dc241f;color:white">@corporate-red</p>
<p style="background:#dc241f;color:white">@central-red</p>
<p style="background:#dc241f;color:white">@london-buses-red</p>
<p style="background:#dd042b;color:white">@emirates-airline-red</p>
<p style="background:#e52312;color:white">@santander-cycles-red</p>
<p style="background:#d21034;color:white">@congestion-charge-red</p>

### Yellow
<p style="background:#ffce00;color:black">@corporate-yellow</p>
<p style="background:#ffce00;color:black">@circle-yellow</p>
<p style="background:#ffce00;color:black">@legible-london-yellow</p>
<p style="background:#f1ab00;color:black">@london-coaches-yellow</p>

### Green
<p style="background:#007229;color:white">@corporate-green</p>
<p style="background:#007229;color:white">@district-green</p>
<p style="background:#00bd19;color:black">@tram-green</p>
<p style="background:#69971f;color:black">@low-emission-zone-green</p>

### Turquoise
<p style="background:#76d0bd;color:black">@waterloo-and-city-turquoise</p>
<p style="background:#00afad;color:black">@dlr-turquoise</p>

### Pink
<p style="background:#d799af;color:black">@hammersmith-and-city-pink</p>
<p style="background:#d10075;color:black">@transport-museum-pink</p>
<p style="background:#dc006b;color:black">@visitor-centre-pink</p>
<p style="background:#dc0963;color:black">@cycle-superhighway-pink</p>

### Magenta
<p style="background:#751056;color:white">@metropolitan-magenta</p>

### Purple
<p style="background:#9364cc;color:black">@elizabeth-purple</p>
<p style="background:#b727bf;color:black">@dial-a-ride-purple</p>

### Orange
<p style="background:#e86a10;color:black">@overground-orange</p>

### Brown
<p style="background: #894e24; color:white">@bakerloo-brown</p>

### White
<p style="background: #ffffff;color:black">@corporate-white</p>

### Grey
<p style="background:#868f98;color:white">@corporate-grey</p>
<p style="background:#868f98;color:white">@jubilee-grey</p>
<p style="background:#414b56;color:white">@corporate-dark-grey</p>

### Black
<p style="background:#000000;color:white">@corporate-black</p>
<p style="background:#000000;color:white">@northern-black</p>