329 lines
22 KiB
HTML
329 lines
22 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<title>Pattern</title>
|
|
</head>
|
|
<body data-prismjs-copy-timeout="1500">
|
|
<color-samples>
|
|
<color-sample data-color="rgb( 46, 81, 161)" style="background-color: rgb( 46, 81, 161); color: #FFF">
|
|
<name data-hex="#2e51a1" data-rgb="rgb( 46, 81, 161)" data-token="--colour-blue"><span>Blue</span></name>
|
|
<hex>#2e51a1</hex>
|
|
<rgb>rgb(46,81,161)</rgb>
|
|
<accessibility>
|
|
<div class="acchb"> <span>color & black </span><small>2.8:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>7.5:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaa result"><span style="color: rgb( 46, 81, 161)">✓ </span><span style="color: rgb( 46, 81, 161)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaaa result"><span style="color: rgb( 46, 81, 161)">✓ </span><span style="color: rgb( 46, 81, 161)">✓</span>
|
|
</div>
|
|
</accessibility>
|
|
<sample-block>
|
|
<color-pill data-hex="#5c7abf" data-rgb="rgb( 92,122,191)" data-token="--colour-blue-l"> <span style="background-color: rgb( 92,122,191)">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>5:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>4.2:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb( 92,122,191)">✓</span><span style="color: rgb( 92,122,191)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span style="color: rgb( 92,122,191)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span style="color: rgb( 92,122,191)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</div></span><span>blue-l</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#b2c3ec" data-rgb="rgb(178,195,236)" data-token="--colour-blue-xl"> <span style="background-color: rgb(178,195,236)">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>11.9:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>1.8:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb(178,195,236)">✓</span><span style="color: rgb(178,195,236)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span style="color: rgb(178,195,236)">✓ </span><span style="color: rgb(178,195,236)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</div></span><span>blue-xl</span>
|
|
</color-pill>
|
|
</sample-block>
|
|
<sample-block>
|
|
<color-pill data-hex="#133176" data-rgb="rgb( 19, 49,118)" data-token="--colour-blue-d"> <span style="background-color: rgb( 19, 49,118)">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>1.7:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>12.1:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaa result"><span style="color: rgb( 19, 49,118)">✓ </span><span style="color: rgb( 19, 49,118)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaaa result"><span style="color: rgb( 19, 49,118)">✓ </span><span style="color: rgb( 19, 49,118)">✓</span>
|
|
</div>
|
|
</div></span><span>blue-d</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#031235" data-rgb="rgb( 3, 18, 53)" data-token="--colour-blue-xd"> <span style="background-color: rgb( 3, 18, 53)">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>1.1:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>18.4:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaa result"><span style="color: rgb( 3, 18, 53)">✓ </span><span style="color: rgb( 3, 18, 53)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaaa result"><span style="color: rgb( 3, 18, 53)">✓ </span><span style="color: rgb( 3, 18, 53)">✓</span>
|
|
</div>
|
|
</div></span><span>blue-xd</span>
|
|
</color-pill>
|
|
</sample-block>
|
|
</color-sample>
|
|
<color-sample data-color="rgb(127, 127, 127)" style="background-color: rgb(127, 127, 127); color: #000">
|
|
<name data-hex="#7f7f7f" data-rgb="rgb(127, 127, 127)" data-token="--colour-grey"><span>Grey</span></name>
|
|
<hex>#7f7f7f</hex>
|
|
<rgb>rgb(127,127,127)</rgb>
|
|
<accessibility>
|
|
<div class="acchb"> <span>color & black </span><small>5.2:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>4:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb(127, 127, 127)">✓</span><span style="color: rgb(127, 127, 127)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span style="color: rgb(127, 127, 127)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span style="color: rgb(127, 127, 127)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</accessibility>
|
|
<sample-block>
|
|
<color-pill data-hex="#b2b2b2" data-rgb="rgb(178, 178, 178)" data-token="--colour-grey-l"> <span style="background-color: #b2b2b2">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>9.9:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>2.1:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb(178, 178, 178)">✓</span><span style="color: rgb(178, 178, 178)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span style="color: rgb(178, 178, 178)">✓ </span><span style="color: rgb(178, 178, 178)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</div></span><span>Light</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#d8d8d8" data-rgb="rgb(216, 216, 216)" data-token="--colour-grey-xl"> <span style="background-color: #d8d8d8">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>14.7:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>1.4:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb(216, 216, 216)">✓</span><span style="color: rgb(216, 216, 216)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span style="color: rgb(216, 216, 216)">✓ </span><span style="color: rgb(216, 216, 216)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</div></span><span>Lighter</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#f0f0f0" data-rgb="rgb(240, 240, 240)" data-token="--colour-grey-xxl"> <span style="background-color: #f0f0f0">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>18.4:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>1.1:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb(240, 240, 240)">✓</span><span style="color: rgb(240, 240, 240)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span style="color: rgb(240, 240, 240)">✓ </span><span style="color: rgb(240, 240, 240)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</div></span><span>Lightest</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-white"> <span style="background-color: #FFF">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</div></span><span>White</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-page"> <span style="background-color: #FFF">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</div></span><span>Default page</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-light"> <span style="background-color: #FFF">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
|
|
</div>
|
|
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
|
|
</div>
|
|
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
</div></span><span>Light</span>
|
|
</color-pill>
|
|
</sample-block>
|
|
<sample-block>
|
|
<color-pill data-hex="#4c4c4c" data-rgb="rgb(76, 76, 76)" data-token="--colour-grey-d"> <span style="background-color: #4c4c4c">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>2.4:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>8.6:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
|
|
</div>
|
|
</div></span><span>Dark</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#4c4c4c" data-rgb="rgb(76, 76, 76)" data-token="--colour-grey-xd"> <span style="background-color: #4c4c4c">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>2.4:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>8.6:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
|
|
</div>
|
|
</div></span><span>Darker</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#000" data-rgb="rgb(0, 0, 0)" data-token="--colour-black"> <span style="background-color: #000">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>1:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>21:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
|
|
</div>
|
|
</div></span><span>Black</span>
|
|
</color-pill>
|
|
<color-pill data-hex="#000" data-rgb="rgb(0, 0, 0)" data-token="--colour-dark"> <span style="background-color: #000">
|
|
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
|
<div class="acchb"> <span>color & black </span><small>1:1</small></div>
|
|
<div class="acchw"> <span>color & white </span><small>21:1</small></div>
|
|
<div class="aa">WCAG 2.0 AA </div>
|
|
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
|
|
</div>
|
|
<div class="aaa">WCAG 2.0 AAA </div>
|
|
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
|
</div>
|
|
<div class="accwaaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
|
|
</div>
|
|
</div></span><span>Dark</span>
|
|
</color-pill>
|
|
</sample-block>
|
|
</color-sample>
|
|
</color-samples>
|
|
<div class="tab-group" id="colours">
|
|
<div data-tab="css">
|
|
<pre class="language-css">:root {
|
|
--colour-blue: #2e51a1;
|
|
--colour-blue-l: #5c7abf;
|
|
--colour-blue-xl: #b2c3ec;
|
|
--colour-blue-d: #133176;
|
|
--colour-blue-xd: #031235;
|
|
|
|
--colour-grey: #7f7f7f;
|
|
--colour-grey-l: #b2b2b2;
|
|
--colour-grey-xl: #d8d8d8;
|
|
--colour-grey-xxl: #f0f0f0;
|
|
--colour-white: #FFF;
|
|
--colour-page: #FFF;
|
|
--colour-light: #FFF;
|
|
--colour-grey-d: #4c4c4c;
|
|
--colour-grey-xd: #4c4c4c;
|
|
--colour-black: #000;
|
|
--colour-dark: #000;
|
|
}</pre>
|
|
</div>
|
|
<div data-tab="scss">
|
|
<pre class="language-css">$colour: (
|
|
colour-blue: #2e51a1,
|
|
colour-blue-l: #5c7abf,
|
|
colour-blue-xl: #b2c3ec,
|
|
colour-blue-d: #133176,
|
|
colour-blue-xd: #031235,
|
|
|
|
colour-grey: #7f7f7f,
|
|
colour-grey-l: #b2b2b2,
|
|
colour-grey-xl: #d8d8d8,
|
|
colour-grey-xxl: #f0f0f0,
|
|
colour-white: #FFF,
|
|
colour-page: #FFF,
|
|
colour-light: #FFF,
|
|
colour-grey-d: #4c4c4c,
|
|
colour-grey-xd: #4c4c4c,
|
|
colour-black: #000,
|
|
colour-dark: #000,
|
|
);
|
|
:root {
|
|
@each $name, $color in $colour {
|
|
--#{$name}: #{$color};
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |