Fixed bugs and updated structure

This commit is contained in:
2024-07-14 16:18:52 -04:00
parent 51c2c569b8
commit 9c15304340
60 changed files with 4120 additions and 1405 deletions

View File

@@ -4,7 +4,14 @@
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>Primary colours</h2>
<h2>What is it</h2>
<p>Colours are used to represent your site and are an implementation of your brand's visual identity. </p>
<h2>When to use it</h2>
<p>Colours are used throughout your patterns. </p>
<h2>How to use it</h2>
<p>Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white. </p>
<p>Click on the colour name or the colour gradient sample pills to copy the colour to your clipboard. A regular click will copy the hex code, a shift+click will copy the RGB code, the alt key (or Mac option&nbsp;&#8997; key) will copy the colour token, and the meta key (Windows key or Mac command&nbsp;&#8984; key) will copy a CSS colour var. </p>
<h3>Primary colours</h3>
<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>