README
Focus 
The :focus selector is used to select the element that has focus.
Classes
Text colour focus state
| Class name | Value |
|---|---|
.focus-text-heritage-blue |
$heritage-blue (#004B88) |
.focus-text-heritage-blue-40 |
$heritage-blue-40 (#97a8cc) |
.focus-text-heritage-yellow-40 |
$heritage-yellow-40 (#fde5c4) |
.focus-text-blue-dark |
$blue-dark (#229cff) |
.focus-text-blue-primary |
$blue-primary (#8ac4ff) |
.focus-text-blue-mid |
$blue-mid (#caeaff) |
.focus-text-blue-light |
$blue-light (#f2f8ff) |
.focus-text-turquoise-dark |
$turquoise-dark (#5cc0b5) |
.focus-text-turquoise-primary |
$turquoise-primary (#81cec6) |
.focus-text-turquoise-mid |
$turquoise-mid (#b8e3df) |
.focus-text-turquoise-light |
$turquoise-light (#eaf9f7) |
.focus-text-red-light |
$red-light (#fae1e1) |
.focus-text-black |
$black (#000000) |
.focus-text-dark-grey |
$dark-grey (#333333) |
.focus-text-mid-grey |
$mid-grey (#606060) |
.focus-text-grey |
$grey (#9f9f9f) |
.focus-text-light-grey |
$light-grey (#dfdfdf) |
.focus-text-pale-grey |
$pale-grey (#f2f2f2) |
.focus-text-white |
$white (#ffffff) |
.focus-text-heritage-yellow |
$heritage-yellow (#fcbb69) |
.focus-text-red-primary |
$red-primary (#df3034) |
<p class="focus-text-white">Text colour of #ffffff on Focus</p>
<p class="focus-text-heritage-yellow">Text colour of #fcbb69 on Focus</p>
<p class="focus-text-turquoise-dark">Text colour of #5cc0b5 on Focus</p>
Border focus state
| Class name | Value |
|---|---|
.focus-b-heritage-blue |
$heritage-blue (#004B88) |
.focus-b-heritage-blue-40 |
$heritage-blue-40 (#97a8cc) |
.focus-b-heritage-yellow-40 |
$heritage-yellow-40 (#fde5c4) |
.focus-b-blue-dark |
$blue-dark (#229cff) |
.focus-b-blue-primary |
$blue-primary (#8ac4ff) |
.focus-b-blue-mid |
$blue-mid (#caeaff) |
.focus-b-blue-light |
$blue-light (#f2f8ff) |
.focus-b-turquoise-dark |
$turquoise-dark (#5cc0b5) |
.focus-b-turquoise-primary |
$turquoise-primary (#81cec6) |
.focus-b-turquoise-mid |
$turquoise-mid (#b8e3df) |
.focus-b-turquoise-light |
$turquoise-light (#eaf9f7) |
.focus-b-red-light |
$red-light (#fae1e1) |
.focus-b-black |
$black (#000000) |
.focus-b-dark-grey |
$dark-grey (#333333) |
.focus-b-mid-grey |
$mid-grey (#606060) |
.focus-b-grey |
$grey (#9f9f9f) |
.focus-b-light-grey |
$light-grey (#dfdfdf) |
.focus-b-pale-grey |
$pale-grey (#f2f2f2) |
.focus-b-white |
$white (#ffffff) |
.focus-b-heritage-yellow |
$heritage-yellow (#fcbb69) |
.focus-b-red-primary |
$red-primary (#df3034) |
<p class="focus-b-heritage-blue">Border colour of #004B88 on Focus</p>
<p class="focus-b-heritage-yellow-40">Border colour of #fde5c4 on Focus</p>
<p class="focus-b-pale-grey">Border colour of #f2f2f2 on Focus</p>
Background-colour focus state
| Class name | Value |
|---|---|
.focus-bg-heritage-blue |
$heritage-blue (#004B88) |
.focus-bg-heritage-blue-40 |
$heritage-blue-40 (#97a8cc) |
.focus-bg-heritage-yellow-40 |
$heritage-yellow-40 (#fde5c4) |
.focus-bg-blue-dark |
$blue-dark (#229cff) |
.focus-bg-blue-primary |
$blue-primary (#8ac4ff) |
.focus-bg-blue-mid |
$blue-mid (#caeaff) |
.focus-bg-blue-light |
$blue-light (#f2f8ff) |
.focus-bg-turquoise-dark |
$turquoise-dark (#5cc0b5) |
.focus-bg-turquoise-primary |
$turquoise-primary (#81cec6) |
.focus-bg-turquoise-mid |
$turquoise-mid (#b8e3df) |
.focus-bg-turquoise-light |
$turquoise-light (#eaf9f7) |
.focus-bg-red-light |
$red-light (#fae1e1) |
.focus-bg-black |
$black (#000000) |
.focus-bg-dark-grey |
$dark-grey (#333333) |
.focus-bg-mid-grey |
$mid-grey (#606060) |
.focus-bg-grey |
$grey (#9f9f9f) |
.focus-bg-light-grey |
$light-grey (#dfdfdf) |
.focus-bg-pale-grey |
$pale-grey (#f2f2f2) |
.focus-bg-white |
$white (#ffffff) |
.focus-bg-heritage-yellow |
$heritage-yellow (#fcbb69) |
.focus-bg-red-primary |
$red-primary (#df3034) |
<div class="focus-bg-red-light">A block with Background colour of #fae1e1 on Focus</div>
<div class="focus-bg-mid-grey">A block with Background colour of #606060 on Focus</div>
<div class="focus-bg-blue-light">A block with Background colour of #f2f8ff on Focus</div>
Installation
$ npm install @citizensadvice/focus
now import into your stylesheet...
@import '@citizensadvice/focus/index.scss';
You can also make use of the unpkg service, try adding the link below to the head of your HTML file
<link src="https://unpkg.com/@citizensadvice/focus@latest/build/focus.css" />