gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Updates

Browse Source 
Updates
This commit is contained in:
A McIlwraith
2024-07-11 21:05:34 -04:00
parent b5e421761f
commit 4a18341cf5
65 changed files with 3631 additions and 914 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
public/patterns/colours-core/index.html
View File

@@ -4,6 +4,7 @@
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>Primary colours</h2>
<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>
@@ -276,52 +277,26 @@
</sample-block>
</color-sample>
</color-samples>
<div class="tab-group" id="colours">
<div class="tab-group" id="colors">
<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 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>