Breakpoints
+
+ Breakpoint
Complete
diff --git a/public/patterns/core/breakpoints/index.html b/public/patterns/core/breakpoint/index.html
similarity index 85%
rename from public/patterns/core/breakpoints/index.html
rename to public/patterns/core/breakpoint/index.html
index 1906326..c0fab6f 100644
--- a/public/patterns/core/breakpoints/index.html
+++ b/public/patterns/core/breakpoint/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -14,8 +21,8 @@
When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across.
- @import "[path-to]/breakpoints";
-@include break([breakpoint]) {
+ @use "scss/core/breakpoint/breakpoint";
+@include breapoint.break([breakpoint]) {
// css here
}
//- DS2 core (c) 2024 Alexander McIlwraith
@@ -24,12 +31,13 @@
// default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
-@mixin breakpoint-debug {
+@mixin debug {
body::before, body::after {
background-color: #555;
color: white;
content: "bigger than extra large";
display: grid;
+ font-family: sans-serif;
font-size: 25px;
grid-template-columns: auto;
padding: 25px;
diff --git a/public/patterns/core/colours/index.html b/public/patterns/core/colours/index.html
index 191321b..ba3336d 100644
--- a/public/patterns/core/colours/index.html
+++ b/public/patterns/core/colours/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
diff --git a/public/patterns/core/header/index.html b/public/patterns/core/header/index.html
index be21293..33a9ae0 100644
--- a/public/patterns/core/header/index.html
+++ b/public/patterns/core/header/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -44,7 +51,7 @@ header
header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}
- @import "scss/core/header/header;
+ @use "scss/core/header/header;
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
diff --git a/public/patterns/core/status/index.html b/public/patterns/core/status/index.html
index 272a5fb..2ec66a5 100644
--- a/public/patterns/core/status/index.html
+++ b/public/patterns/core/status/index.html
@@ -2,6 +2,13 @@
Pattern
+
@@ -52,7 +59,7 @@
Complete
- Breakpoints
+ Breakpoint
Complete
@@ -83,7 +90,7 @@
Complete (10)
- Breakpoints
+ Breakpoint
Layouts
@@ -136,7 +143,7 @@
- Breakpoints
+ Breakpoint
Complete
Layouts
diff --git a/public/patterns/core/sticky-note/index.html b/public/patterns/core/sticky-note/index.html
index 4101352..31f3ec1 100644
--- a/public/patterns/core/sticky-note/index.html
+++ b/public/patterns/core/sticky-note/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -22,7 +29,7 @@
@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#ffffdd),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,#ffffc9),to(#ffffba));background:linear-gradient(180deg,#ffffdd 0%,#ffffd3 2%,#ffffd3 12%,#ffffc9 75%,#ffffba 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#9dddec),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,#8bd7e8),to(#7fd3e6));background:linear-gradient(180deg,#9dddec 0%,#94daea 2%,#94daea 12%,#8bd7e8 75%,#7fd3e6 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#fa7c93),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,#fa6883),to(#f95977));background:linear-gradient(180deg,#fa7c93 0%,#fa728b 2%,#fa728b 12%,#fa6883 75%,#f95977 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#c5fcc9),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,#b1fab7),to(#a3faaa));background:linear-gradient(180deg,#c5fcc9 0%,#bbfbc0 2%,#bbfbc0 12%,#b1fab7 75%,#a3faaa 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}
$sticky-colors: ( [sass map with your own defined colours] );
-@import "scss/core/switch/_sticky-note";
+@use "scss/core/switch/_sticky-note";
@include sticky-note;
//- DS2 core (c) 2024 Alexander McIlwraith
@@ -279,38 +286,40 @@ const calculateStickyPosition = (s) => {
}
}
-export function init(p = document){
- font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-
- p.querySelectorAll("sticky-note").forEach((s) => {
- if (s.querySelectorAll("svg").length == 0) {
-
- let wrapper = document.createElement("sticky-note-wrapper");
-
- s.parentNode.insertBefore(wrapper, s);
- wrapper.appendChild(s);
-
- s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
- s.innerHTML = `${s.innerHTML}`;
- }
- calculateStickyPosition(s);
- drag(s);
- s.ondblclick = (e) => {
- if (e.ctrlKey) {
- calculateStickyPosition(s);
- } else {
- // add one click select
- }
- }
- })
-
-
- window.onresize = () => {
+module.exports = {
+ init: (p = document) => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
- let stickies = p.querySelectorAll("sticky-note");
- stickies.forEach((s) => {
+
+ p.querySelectorAll("sticky-note").forEach((s) => {
+ if (s.querySelectorAll("svg").length == 0) {
+
+ let wrapper = document.createElement("sticky-note-wrapper");
+
+ s.parentNode.insertBefore(wrapper, s);
+ wrapper.appendChild(s);
+
+ s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
+ s.innerHTML = `${s.innerHTML}`;
+ }
calculateStickyPosition(s);
- });
+ drag(s);
+ s.ondblclick = (e) => {
+ if (e.ctrlKey) {
+ calculateStickyPosition(s);
+ } else {
+ // add one click select
+ }
+ }
+ })
+
+
+ window.onresize = () => {
+ font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
+ let stickies = p.querySelectorAll("sticky-note");
+ stickies.forEach((s) => {
+ calculateStickyPosition(s);
+ });
+ }
}
}
diff --git a/public/patterns/core/switch/index.html b/public/patterns/core/switch/index.html
index 65977b1..8e76e6d 100644
--- a/public/patterns/core/switch/index.html
+++ b/public/patterns/core/switch/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -20,7 +27,7 @@
span#example-id(role="switch")
[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}
- @import "scss/core/switch/_switch";
+ @use "scss/core/switch/_switch";
@include switch;
//- DS2 core (c) 2024 Alexander McIlwraith
diff --git a/public/patterns/core/tabs/index.html b/public/patterns/core/tabs/index.html
index a991ea0..f9fd8e2 100644
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@@ -44,7 +44,7 @@
@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}
- @import "scss/core/tabs/_tabs";
+ @use "scss/core/tabs/_tabs";
@include tabs{
// optional content block
};
diff --git a/public/patterns/core/tooltip/index.html b/public/patterns/core/tooltip/index.html
index b22aa45..3b75a1f 100644
--- a/public/patterns/core/tooltip/index.html
+++ b/public/patterns/core/tooltip/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -182,11 +189,12 @@
}
}
- @import "scss/core/tooltip/_tooltip";
+ @use "scss/core/tooltip/_tooltip";
@include tooltip;
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
+$font-body: sans-serif !default;
$tooltip-border-radius: .5rem !default;
$tooltip-dark-allow: true !default;
$tooltip-dark-background: #1f2127 !default;
@@ -215,6 +223,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground;
filter: $tooltip-light-drop-shadow;
+ $font-family: $font-body;
font-size: 1rem;
font-weight: 400;
inline-size: max-content;
diff --git a/src/pg/_config.pug b/src/pg/_config.pug
index 2adb3da..658d352 100644
--- a/src/pg/_config.pug
+++ b/src/pg/_config.pug
@@ -2,6 +2,7 @@
- var lang = "en-uk"
- var colorpfx = "colour"
- var headings = ["What is it", "When to use it", "How to use it"]
+- var downloadExtensions = ["js", "pug", "scss"]
- var generateColourToken = ["colours"]
-
@@ -49,7 +50,7 @@
core: true,
},
{
- name: "breakpoints",
+ name: "breakpoint",
status: "complete",
core: true,
},
diff --git a/src/pg/patterns/core/breakpoint/index.pug b/src/pg/patterns/core/breakpoint/index.pug
index 1ff66ef..7edc73e 100644
--- a/src/pg/patterns/core/breakpoint/index.pug
+++ b/src/pg/patterns/core/breakpoint/index.pug
@@ -21,10 +21,10 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
- @import "scss/core/breakpoints/breakpoints";
- @include break([breakpoint]) {
+ @use "scss/core/breakpoint/breakpoint";
+ @include breapoint.break([breakpoint]) {
// css here
}
+h(4)
pre.language-sass
- include _breakpoints.scss
\ No newline at end of file
+ include _breakpoint.scss
\ No newline at end of file
diff --git a/src/pg/patterns/core/header/index.pug b/src/pg/patterns/core/header/index.pug
index 9af348f..aeaa0fc 100644
--- a/src/pg/patterns/core/header/index.pug
+++ b/src/pg/patterns/core/header/index.pug
@@ -32,7 +32,7 @@ block content
div.language-sass(tab="scss")
pre.language-sass.
- @import "scss/core/header/header;
+ @use "scss/core/header/header;
pre.language-sass
include _header.scss
\ No newline at end of file
diff --git a/src/pg/patterns/core/sticky-note/index.pug b/src/pg/patterns/core/sticky-note/index.pug
index 8aac252..f632892 100644
--- a/src/pg/patterns/core/sticky-note/index.pug
+++ b/src/pg/patterns/core/sticky-note/index.pug
@@ -26,7 +26,7 @@ block content
+h(3)
pre.language-sass.
$sticky-colors: ( [sass map with your own defined colours] );
- @import "scss/core/switch/_sticky-note";
+ @use "scss/core/switch/_sticky-note";
@include sticky-note;
+h(4)
diff --git a/src/pg/patterns/core/switch/index.pug b/src/pg/patterns/core/switch/index.pug
index 680537f..ff0cea5 100644
--- a/src/pg/patterns/core/switch/index.pug
+++ b/src/pg/patterns/core/switch/index.pug
@@ -30,7 +30,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
- @import "scss/core/switch/_switch";
+ @use "scss/core/switch/_switch";
@include switch;
+h(4)
diff --git a/src/pg/patterns/core/tabs/index.pug b/src/pg/patterns/core/tabs/index.pug
index 22ead93..5e2c867 100644
--- a/src/pg/patterns/core/tabs/index.pug
+++ b/src/pg/patterns/core/tabs/index.pug
@@ -42,7 +42,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
- @import "scss/core/tabs/_tabs";
+ @use "scss/core/tabs/_tabs";
@include tabs{
// optional content block
};
diff --git a/src/pg/patterns/core/tooltip/index.pug b/src/pg/patterns/core/tooltip/index.pug
index 5459bb2..0c92466 100644
--- a/src/pg/patterns/core/tooltip/index.pug
+++ b/src/pg/patterns/core/tooltip/index.pug
@@ -43,7 +43,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
- @import "scss/core/tooltip/_tooltip";
+ @use "scss/core/tooltip/_tooltip";
@include tooltip;
+h(4)
pre.language-sass
Breakpoint
Complete
What is it
@@ -14,8 +21,8 @@When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across.
-
@import "[path-to]/breakpoints";
-@include break([breakpoint]) {
+ @use "scss/core/breakpoint/breakpoint";
+@include breapoint.break([breakpoint]) {
// css here
}
//- DS2 core (c) 2024 Alexander McIlwraith
@@ -24,12 +31,13 @@
// default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
-@mixin breakpoint-debug {
+@mixin debug {
body::before, body::after {
background-color: #555;
color: white;
content: "bigger than extra large";
display: grid;
+ font-family: sans-serif;
font-size: 25px;
grid-template-columns: auto;
padding: 25px;
diff --git a/public/patterns/core/colours/index.html b/public/patterns/core/colours/index.html
index 191321b..ba3336d 100644
--- a/public/patterns/core/colours/index.html
+++ b/public/patterns/core/colours/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
diff --git a/public/patterns/core/header/index.html b/public/patterns/core/header/index.html
index be21293..33a9ae0 100644
--- a/public/patterns/core/header/index.html
+++ b/public/patterns/core/header/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -44,7 +51,7 @@ header
header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}
- @import "scss/core/header/header;
+ @use "scss/core/header/header;
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
diff --git a/public/patterns/core/status/index.html b/public/patterns/core/status/index.html
index 272a5fb..2ec66a5 100644
--- a/public/patterns/core/status/index.html
+++ b/public/patterns/core/status/index.html
@@ -2,6 +2,13 @@
Pattern
+
@@ -52,7 +59,7 @@
Complete
- Breakpoints
+ Breakpoint
Complete
@@ -83,7 +90,7 @@
Complete (10)
- Breakpoints
+ Breakpoint
Layouts
@@ -136,7 +143,7 @@
- Breakpoints
+ Breakpoint
Complete
Layouts
diff --git a/public/patterns/core/sticky-note/index.html b/public/patterns/core/sticky-note/index.html
index 4101352..31f3ec1 100644
--- a/public/patterns/core/sticky-note/index.html
+++ b/public/patterns/core/sticky-note/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -22,7 +29,7 @@
@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#ffffdd),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,#ffffc9),to(#ffffba));background:linear-gradient(180deg,#ffffdd 0%,#ffffd3 2%,#ffffd3 12%,#ffffc9 75%,#ffffba 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#9dddec),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,#8bd7e8),to(#7fd3e6));background:linear-gradient(180deg,#9dddec 0%,#94daea 2%,#94daea 12%,#8bd7e8 75%,#7fd3e6 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#fa7c93),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,#fa6883),to(#f95977));background:linear-gradient(180deg,#fa7c93 0%,#fa728b 2%,#fa728b 12%,#fa6883 75%,#f95977 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#c5fcc9),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,#b1fab7),to(#a3faaa));background:linear-gradient(180deg,#c5fcc9 0%,#bbfbc0 2%,#bbfbc0 12%,#b1fab7 75%,#a3faaa 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}
$sticky-colors: ( [sass map with your own defined colours] );
-@import "scss/core/switch/_sticky-note";
+@use "scss/core/switch/_sticky-note";
@include sticky-note;
//- DS2 core (c) 2024 Alexander McIlwraith
@@ -279,38 +286,40 @@ const calculateStickyPosition = (s) => {
}
}
-export function init(p = document){
- font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-
- p.querySelectorAll("sticky-note").forEach((s) => {
- if (s.querySelectorAll("svg").length == 0) {
-
- let wrapper = document.createElement("sticky-note-wrapper");
-
- s.parentNode.insertBefore(wrapper, s);
- wrapper.appendChild(s);
-
- s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
- s.innerHTML = `${s.innerHTML}`;
- }
- calculateStickyPosition(s);
- drag(s);
- s.ondblclick = (e) => {
- if (e.ctrlKey) {
- calculateStickyPosition(s);
- } else {
- // add one click select
- }
- }
- })
-
-
- window.onresize = () => {
+module.exports = {
+ init: (p = document) => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
- let stickies = p.querySelectorAll("sticky-note");
- stickies.forEach((s) => {
+
+ p.querySelectorAll("sticky-note").forEach((s) => {
+ if (s.querySelectorAll("svg").length == 0) {
+
+ let wrapper = document.createElement("sticky-note-wrapper");
+
+ s.parentNode.insertBefore(wrapper, s);
+ wrapper.appendChild(s);
+
+ s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
+ s.innerHTML = `${s.innerHTML}`;
+ }
calculateStickyPosition(s);
- });
+ drag(s);
+ s.ondblclick = (e) => {
+ if (e.ctrlKey) {
+ calculateStickyPosition(s);
+ } else {
+ // add one click select
+ }
+ }
+ })
+
+
+ window.onresize = () => {
+ font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
+ let stickies = p.querySelectorAll("sticky-note");
+ stickies.forEach((s) => {
+ calculateStickyPosition(s);
+ });
+ }
}
}
diff --git a/public/patterns/core/switch/index.html b/public/patterns/core/switch/index.html
index 65977b1..8e76e6d 100644
--- a/public/patterns/core/switch/index.html
+++ b/public/patterns/core/switch/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -20,7 +27,7 @@
span#example-id(role="switch")
[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}
- @import "scss/core/switch/_switch";
+ @use "scss/core/switch/_switch";
@include switch;
//- DS2 core (c) 2024 Alexander McIlwraith
diff --git a/public/patterns/core/tabs/index.html b/public/patterns/core/tabs/index.html
index a991ea0..f9fd8e2 100644
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@@ -44,7 +44,7 @@
@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}
- @import "scss/core/tabs/_tabs";
+ @use "scss/core/tabs/_tabs";
@include tabs{
// optional content block
};
diff --git a/public/patterns/core/tooltip/index.html b/public/patterns/core/tooltip/index.html
index b22aa45..3b75a1f 100644
--- a/public/patterns/core/tooltip/index.html
+++ b/public/patterns/core/tooltip/index.html
@@ -2,6 +2,13 @@
Pattern
+
What is it
@@ -182,11 +189,12 @@
}
}
- @import "scss/core/tooltip/_tooltip";
+ @use "scss/core/tooltip/_tooltip";
@include tooltip;
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
+$font-body: sans-serif !default;
$tooltip-border-radius: .5rem !default;
$tooltip-dark-allow: true !default;
$tooltip-dark-background: #1f2127 !default;
@@ -215,6 +223,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground;
filter: $tooltip-light-drop-shadow;
+ $font-family: $font-body;
font-size: 1rem;
font-weight: 400;
inline-size: max-content;
diff --git a/src/pg/_config.pug b/src/pg/_config.pug
index 2adb3da..658d352 100644
--- a/src/pg/_config.pug
+++ b/src/pg/_config.pug
@@ -2,6 +2,7 @@
- var lang = "en-uk"
- var colorpfx = "colour"
- var headings = ["What is it", "When to use it", "How to use it"]
+- var downloadExtensions = ["js", "pug", "scss"]
- var generateColourToken = ["colours"]
-
@@ -49,7 +50,7 @@
core: true,
},
{
- name: "breakpoints",
+ name: "breakpoint",
status: "complete",
core: true,
},
diff --git a/src/pg/patterns/core/breakpoint/index.pug b/src/pg/patterns/core/breakpoint/index.pug
index 1ff66ef..7edc73e 100644
--- a/src/pg/patterns/core/breakpoint/index.pug
+++ b/src/pg/patterns/core/breakpoint/index.pug
@@ -21,10 +21,10 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
- @import "scss/core/breakpoints/breakpoints";
- @include break([breakpoint]) {
+ @use "scss/core/breakpoint/breakpoint";
+ @include breapoint.break([breakpoint]) {
// css here
}
+h(4)
pre.language-sass
- include _breakpoints.scss
\ No newline at end of file
+ include _breakpoint.scss
\ No newline at end of file
diff --git a/src/pg/patterns/core/header/index.pug b/src/pg/patterns/core/header/index.pug
index 9af348f..aeaa0fc 100644
--- a/src/pg/patterns/core/header/index.pug
+++ b/src/pg/patterns/core/header/index.pug
@@ -32,7 +32,7 @@ block content
div.language-sass(tab="scss")
pre.language-sass.
- @import "scss/core/header/header;
+ @use "scss/core/header/header;
pre.language-sass
include _header.scss
\ No newline at end of file
diff --git a/src/pg/patterns/core/sticky-note/index.pug b/src/pg/patterns/core/sticky-note/index.pug
index 8aac252..f632892 100644
--- a/src/pg/patterns/core/sticky-note/index.pug
+++ b/src/pg/patterns/core/sticky-note/index.pug
@@ -26,7 +26,7 @@ block content
+h(3)
pre.language-sass.
$sticky-colors: ( [sass map with your own defined colours] );
- @import "scss/core/switch/_sticky-note";
+ @use "scss/core/switch/_sticky-note";
@include sticky-note;
+h(4)
diff --git a/src/pg/patterns/core/switch/index.pug b/src/pg/patterns/core/switch/index.pug
index 680537f..ff0cea5 100644
--- a/src/pg/patterns/core/switch/index.pug
+++ b/src/pg/patterns/core/switch/index.pug
@@ -30,7 +30,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
- @import "scss/core/switch/_switch";
+ @use "scss/core/switch/_switch";
@include switch;
+h(4)
diff --git a/src/pg/patterns/core/tabs/index.pug b/src/pg/patterns/core/tabs/index.pug
index 22ead93..5e2c867 100644
--- a/src/pg/patterns/core/tabs/index.pug
+++ b/src/pg/patterns/core/tabs/index.pug
@@ -42,7 +42,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
- @import "scss/core/tabs/_tabs";
+ @use "scss/core/tabs/_tabs";
@include tabs{
// optional content block
};
diff --git a/src/pg/patterns/core/tooltip/index.pug b/src/pg/patterns/core/tooltip/index.pug
index 5459bb2..0c92466 100644
--- a/src/pg/patterns/core/tooltip/index.pug
+++ b/src/pg/patterns/core/tooltip/index.pug
@@ -43,7 +43,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
- @import "scss/core/tooltip/_tooltip";
+ @use "scss/core/tooltip/_tooltip";
@include tooltip;
+h(4)
pre.language-sass