@citizensadvice/text-colors

Defines the colour of text.

Usage no npm install needed!

<script type="module">
  import citizensadviceTextColors from 'https://cdn.skypack.dev/@citizensadvice/text-colors';
</script>

README

Text-colors npm (scoped)

Defines the colour of text.

Classes

Class names Value
.heritage-blue $heritage-blue (#004B88)
.heritage-blue-40 $heritage-blue-40 (#97a8cc)
.heritage-yellow-40 $heritage-yellow-40 (#fde5c4)
.blue-dark $blue-dark (#229cff)
.blue-primary $blue-primary (#8ac4ff)
.blue-mid $blue-mid (#caeaff)
.blue-light $blue-light (#f2f8ff)
.turquoise-dark $turquoise-dark (#5cc0b5)
.turquoise-primary $turquoise-primary (#81cec6)
.turquoise-mid $turquoise-mid (#b8e3df)
.turquoise-light $turquoise-light (#eaf9f7)
.red-light $red-light (#fae1e1)
.black $black (#000000)
.dark-grey $dark-grey (#333333)
.mid-grey $mid-grey (#606060)
.grey $grey (#9f9f9f)
.light-grey $light-grey (#dfdfdf)
.pale-grey $pale-grey (#f2f2f2)
.white $white (#ffffff)
.heritage-yellow $heritage-yellow (#fcbb69)
.red-primary $red-primary (#df3034)

Examples

<p class="heritage-blue">A block with a text colour of #004B88</p>
<p class="grey">A block with a text colour of #9f9f9f</p>
<p class="heritage-yellow">A block with a text colour of #fcbb69</p>

Installation

$ npm install @citizensadvice/text-colors

now import into your stylesheet...

@import '@citizensadvice/text-colors/index.scss';

You can make use of the unpkg service, try adding the link below to the head of your HTML file.

<link src="https://unpkg.com/@citizensadvice/text-colors@latest/build/text-colors.css" />