Colours palette: Panel Colour

In review

Info
Notes
HTML

Handle: @colours-palette--panel-colour
Variants (19): Default , Secondary Text Colour , Page Colour , Link Colour , Link Hover Colour , Link Visited Colour , Border Colour , Panel Colour , Highlight Colour , Button Colour , Green Hover Colour , Green Inner Shadow , Disabled Button , Disabled Inner Shadow , Attention Green , Confirmation , Bright Green , Focus Colour , Error Colour
Preview:
- With layout
- Component only
Filesystem Path: components/01-particles/01-colours-palette/colours-palette.njk

Guidelines

To do

Contrast ratio still works in progress, has to be completed.
Variations of colours can probably be reduced.
Better colours naming.
Colours to be added as CSS custom properties.


        
        <div class="palette__content">
    <span style="background-color:#DEE0E2;"></span>
    <p class="lbh-u-p--lede">panel-colour</p>
    <p>#DEE0E2</p>
    <p>rgba(222, 224, 226, 1)</p>
    <p>hsla(210, 6%, 88%, 1)</p>
    <p>Contrast ratio to dark text: 14.8</p>
</div>