Fix colours(fixes #31)

Readme.md

@@ -100,4 +100,4 @@ You will now be able to include the .pp file in your pattern's index file while
 
 
 ## Credits 
-This framework includes [PrismJS](https://prismjs.com/) for code syntax highlighting. PrismJS is released under the [MIT license](https://opensource.org/licenses/MIT)>
+This framework includes [PrismJS](https://prismjs.com/) for code syntax highlighting. PrismJS is released under the [MIT license](https://opensource.org/licenses/MIT).

public/assets/scaffolding-min.js

@@ -3290,6 +3290,7 @@ function init() {
     if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") {
       waitForElement(document.location.hash).then(function (el) {
         el.scrollIntoView();
+        el.focus();
         el.dispatchEvent(click);
       });
     }

public/patterns/core/tabs/index.html

@@ -42,58 +42,7 @@
 	div(tab="[tab title]")
 	div(tab="[tab title]")
 		</pre>
-      <pre class="language-css" tab="css">tabset, .tab-group {
+      <pre class="language-css" tab="css">.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-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;color:#000;cursor:pointer;display:inline;margin:0;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;color:#000}.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:#7f7f7f solid 1px;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}</pre>
-	margin: 2rem 0 1rem 0;
-}
-tabset > ul, .tab-group > ul {
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	margin: 0;
-	padding: 0;
-}
-tabset > ul li.separator, .tab-group > ul li.separator {
-	border-bottom: 1px solid #7f7f7f;
-	border-left: 1px solid #7f7f7f;
-	display: inline-block;
-	margin: 0.45rem 0 0 0;
-	width: 100%;
-}
-tabset .tab-hidden, .tab-group .tab-hidden {
-	display: none;
-}
-tabset [role=tab], .tab-group [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;
-}
-tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
-	border-right: 1px solid #7f7f7f;
-}
-tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
-	background-color: #f0f0f0;
-	border-bottom: 1px solid #7f7f7f;
-}
-tabset [role=tab] span, .tab-group [role=tab] span {
-	display: block;
-	margin: 0 0 0.5rem 0;
-}
-tabset [role=tabpanel], .tab-group [role=tabpanel] {
-	background-color: #FFF;
-	border: 1px solid #7f7f7f;
-	border-top: none;
-	padding: 1rem;
-	z-index: 1;
-}
-tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
-	display: none;
-}</pre>
       <div tab="scss">
         <pre class="language-sass">@import "scss/core/tabs/_tabs";
 @include tabs{ 
@@ -104,8 +53,13 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
 //		Licensed under CC BY-SA 4.0 
 
 $tab-border: #7f7f7f !default; 
+$tab-panel-background-color: #FFF !default;
+$tab-panel-top-border: #7f7f7f !default;
+$tab-panel-top-border-width: 1px !default;
 $tab-selected: #FFF !default;
+$tab-selected-text: #000 !default;
 $tab-notselected: #f0f0f0 !default;
+$tab-notselected-text: #000 !default;
 
 @mixin tabs {
 	tabset, .tab-group {
@@ -131,11 +85,12 @@ $tab-notselected: #f0f0f0 !default;
 		[role="tab"] {
 			background-color: $tab-selected;
 			border-left: 1px solid $tab-border;
-			border-top: 1px solid $tab-border;
 			border-radius: .5rem .5rem 0 0;
+			border-top: 1px solid $tab-border;
+			color: $tab-selected-text;
 			cursor:pointer;
-			margin: 0;
 			display: inline;
+			margin: 0;
 			padding: 1rem 1.5rem .14rem 1.5rem;
 			z-index: 2;
 			
@@ -146,6 +101,7 @@ $tab-notselected: #f0f0f0 !default;
 			&:not(.selected) {
 				background-color: $tab-notselected;
 				border-bottom: 1px solid $tab-border;
+				color: $tab-notselected-text;
 			}
 
 			span {
@@ -155,9 +111,9 @@ $tab-notselected: #f0f0f0 !default;
 
 		}
 		[role="tabpanel"] {
-			background-color: $tab-selected;
+			background-color: $tab-panel-background-color;
 			border: 1px solid $tab-border;
-			border-top: none;
+			border-top: $tab-panel-top-border solid $tab-panel-top-border-width;
 			padding: 1rem;
 			z-index: 1;
 
@@ -165,7 +121,6 @@ $tab-notselected: #f0f0f0 !default;
 				display: none;
 			}
 			@content;
-
 		}
 	}
 }</pre>
@@ -272,6 +227,7 @@ export function init(container = document, spacer = true, args = {}) {
 		if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
 			waitForElement(document.location.hash).then((el) => {
 				el.scrollIntoView();
+				el.focus();
 				el.dispatchEvent(click);
 			});
 

src/pg/core/_core-colour-samples.scss

@@ -1,3 +1,5 @@
+@use "../pg/patterns/core/breakpoints/breakpoints";
+
 @mixin core-colour-samples {	
 
 	#copystatus {
@@ -36,14 +38,14 @@
 		gap: 1rem;
 		margin-bottom: 1rem;
 
-		@include break(-lg) {
+		@include breakpoints.break(-lg) {
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			max-width: 100%;
 			width: 100%;
 		}
 
-		@include break(-sm) {
+		@include breakpoints.break(-sm) {
 			grid-template-columns: auto;
 			width: 100%;
 			max-width: 100%;
@@ -67,7 +69,7 @@
 			width: 20rem;
 			max-width: 318px;
 
-			@include break(-lg) {
+			@include breakpoints.break(-lg) {
 				width: 100%;
 				max-width: 100%;
 			}

src/pg/core/core.scss.pug

@@ -5,271 +5,18 @@
 		This file is generates _core.scss using information in ../pg/_config.pug.
 		Please make your changes in your _config.pug file so that they are not
 		overwritten. \n*/\n\n\n`
+| !{out}
+
 
 include ../_config
 include _colour-samples
+include _core-colour-samples.scss
 
-
+- out = `\n\n//colour tokens\n$${colorpfx}: (`
--
-	out +=`@mixin core-colour-samples {	
-
-		#copystatus {
-			left: 50%;
-			position: absolute;
-			z-index: 100;
-			div {
-				border-radius: 1rem;
-				border: 1px solid green;
-				left: -50%;
-				padding: 1rem;
-				position: relative;
-				white-space: nowrap;
-				&::after {
-					clear: both;
-					content: " ";
-					display: block;
-				}
-				&.succeeded {
-					background-color: white;
-					border-color: black;
-					color: black;
-				}
-				&.failed {
-					background-color: white;
-					border-color: #f00;
-					color: #f00;
-				}
-			}
-		}
-
-		color-samples {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			gap: 1rem;
-			margin-bottom: 1rem;
-
-			@include break(-lg) {
-				display: grid;
-				grid-template-columns: repeat(2, 1fr);
-				max-width: 100%;
-				width: 100%;
-			}
-
-			@include break(-sm) {
-				grid-template-columns: auto;
-				width: 100%;
-				max-width: 100%;
-			}
-
-			color-sample {
-				align-items: center;
-				border-radius: .5rem;
-				border: 1px solid #CCC;
-				display: grid;
-				font-family: inherit;
-				gap: .5rem;
-				grid-template-areas: "name      name      name     hex       hex       hex" 
-									 "name      name      name     rgb       rgb       rgb"
-									 "acc       acc       acc      acc       acc       acc"
-									 "lighter   lighter   lighter  darker    darker    darker"
-									 "notes     notes     notes    notes     notes     notes";
-				grid-template-columns: repeat(6, 1fr);
-				grid-template-rows: repeat(2, 1.5rem) repeat(4, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content); 
-				padding: 1rem;
-				width: 20rem;
-				max-width: 318px;
-
-				@include break(-lg) {
-					width: 100%;
-					max-width: 100%;
-				}
-
-				name 	{ 
-					align-self: start;
-					font-size: 1.25rem; 
-					grid-area: name; 
-					span {
-						cursor: pointer;
-					}
-				}
-				rgb { 
-					grid-area: rgb;
-					white-space: nowrap;
-				}
-				hex { 
-					grid-area: hex;
-					white-space: nowrap;
-				}
-
-				> accessibility {
-					border-bottom: 1px solid #ccc;
-					border-top: 1px solid #ccc;
-				}
-
-				accessibility {
-					grid-area: acc;
-					grid-row: 3;
-					padding: .5rem 0;
-
-					display: grid; 
-					gap: .5rem;
-					grid-template-columns: repeat(3, 1fr);
-					grid-template-rows: repeat(3, max-content);
-					.result {
-						align-items: center;
-						border-radius: .5rem;
-						display: grid;
-						grid-template-columns: repeat(2, 1fr);
-						border: 1px solid #ccc;
-						padding: 0 1rem;
-						text-align: center;
-						&.accwaa, &.accwaaa {
-							background-color: white;
-							color: black;
-						}
-						&.accbaa, &.accbaaa {
-							background-color: black;
-							color: white;
-						}
-						span:nth-child(2) {
-							font-size: 2rem;
-						}
-					}
-
-					.aa, .aaa {
-						align-self: center;
-						display: block;
-						font-size: .75rem;
-					}
-					.acchb {
-						grid-column: 2;
-					}
-					.acchb, .acchw {
-						display: grid;
-						grid-tempate-columns: auto;
-						grid-template-rows: repeat(2, max-content);
-						align-self: start;
-						text-align: center;
-						padding: 0;
-						span {
-							grid-row: 1;
-							grid-column: 1 / -1;
-							font-size: .9rem;
-						}
-						small {
-							text-align: center;
-							grid-row: 2;
-							grid-column: 1 / -1;
-							font-size: .75rem;
-						}
-					}
-				}
-
-				sample-block {
-					align-self: start;
-					grid-column: span 3;
-					grid-row: 4;
-					color-pill {				
-						display: grid;
-						grid-gap: .5rem;
-						grid-template-columns: 20px max-content auto;
-						:nth-child(1) {
-							align-self: center;
-							border-radius: 5px;
-							border: 1px solid #CCC;
-							display: inline-block;
-							height: 10px;
-							width: 20px;
-						}
-						span {
-							cursor: pointer;
-							.tooltip-tc {
-								padding: .5rem;
-								width: 20rem;
-								max-width: 318px;
-								height: max-contents;
-
-								display: grid; 
-								gap: .5rem;
-								grid-template-columns: repeat(3, 1fr);
-								grid-template-rows: repeat(3, max-content);
-								.result {
-									align-items: center;
-									border-radius: .5rem;
-									display: grid;
-									grid-template-columns: repeat(2, 1fr);
-									border: 1px solid #ccc;
-									padding: 0 1rem;
-									text-align: center;
-									&.accwaa, &.accwaaa {
-										background-color: white;
-										color: black;
-									}
-									&.accbaa, &.accbaaa {
-										background-color: black;
-										color: white;
-									}
-									span{ border: none;
-										&:nth-child(2) {
-											font-size: 2rem;
-										}
-									}
-								}
-
-								.aa, .aaa {
-									align-self: center;
-									display: block;
-									font-size: .75rem;
-								}
-
-								.acchb {
-									grid-column: 2;
-								}
-								.acchb, .acchw {
-									border: none;
-									display: block;
-									width: 100%;
-									place-self: stretch;
-									text-align: center;
-									span {
-										border: none;
-										font-size: .9rem;
-										width: 100%;
-										&::after, &::before {
-											display: none;
-										}
-									}
-									small {
-										font-size: .75rem;
-										text-align: center;								
-									}
-								}
-							}
-						}
-					}
-				}
-
-				notes {
-					border-top: 1px solid #ccc;
-					grid-column: 1 / -1;
-					padding-top: .5rem;
-				}
-			}
-		}
-	}`
-
-
-
-
-- out += `\n\n//colour tokens\n$${colorpfx}: (`
 
 each val in generateColourToken
 	- out += generateSCSS(eval(val), colorpfx)
 
-
-
-
 //- var scss = $colors
 	| !{generateSCSS(eval(val), colorpfx)}
 

src/pg/patterns/core/sticky-note/_sticky-note.js

@@ -95,7 +95,8 @@ const calculateStickyPosition = (s) => {
 	}
 }
 
-export function init(p = document){
+module.exports = {
+	init: (p = document) => {
 		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
 
 		p.querySelectorAll("sticky-note").forEach((s) => {
@@ -128,4 +129,5 @@ export function init(p = document){
 				calculateStickyPosition(s);
 			});
 		}
+	}
 }

src/pg/patterns/core/tabs/_tabs.js

@@ -51,7 +51,8 @@ export function init(container = document, spacer = true, args = {}) {
 					tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
 					tabPanel.appendChild(child.cloneNode(true));
 					child.parentNode.replaceChild(tabPanel, child);
-					tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
+					let cls = tablist === "" ? "class='selected'" : "";
+					tablist += `<li tabindex="0" role="tab" ${cls}="" id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
 				} else {
 					child.classList.add("tab-hidden");
 				}
@@ -63,13 +64,13 @@ export function init(container = document, spacer = true, args = {}) {
 			tabGroup.insertBefore(ul, tabGroup.firstChild);
 
 			tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
-				tab.addEventListener("click", (e) => {
+				tab.addEventListener("click", (evt) => {
-					if (e.altKey && typeof args.altModifier == "function") {
+					if (evt.altKey && typeof args.altModifier == "function") {
-						args.altModifier(tab);
+						args.altModifier(tab, evt);
-					} else if (e.shiftKey && typeof args.shiftModifier == "function") {
+					} else if (evt.shiftKey && typeof args.shiftModifier == "function") {
-						args.shiftModifier(tab);
+						args.shiftModifier(tab, evt);
-					} else if (e.metaKey && typeof args.metaModifier == "function") {
+					} else if (evt.metaKey && typeof args.metaModifier == "function") {
-						args.metaModifier(tab);
+						args.metaModifier(tab, evt);
 					} else {
 						const siblings = Array.from(tab.parentNode.children);
 						siblings.forEach(sibling => sibling.classList.remove("selected"));
@@ -97,9 +98,9 @@ export function init(container = document, spacer = true, args = {}) {
 		if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
 			waitForElement(document.location.hash).then((el) => {
 				el.scrollIntoView();
+				el.focus();
 				el.dispatchEvent(click);
 			});
-
 		}
 	});
 }

src/pg/patterns/core/tabs/_tabs.scss

@@ -2,8 +2,13 @@
 //		Licensed under CC BY-SA 4.0 
 
 $tab-border: #7f7f7f !default; 
+$tab-panel-background-color: #FFF !default;
+$tab-panel-top-border: #7f7f7f !default;
+$tab-panel-top-border-width: 1px !default;
 $tab-selected: #FFF !default;
+$tab-selected-text: #000 !default;
 $tab-notselected: #f0f0f0 !default;
+$tab-notselected-text: #000 !default;
 
 @mixin tabs {
 	tabset, .tab-group {
@@ -29,11 +34,12 @@ $tab-notselected: #f0f0f0 !default;
 		[role="tab"] {
 			background-color: $tab-selected;
 			border-left: 1px solid $tab-border;
-			border-top: 1px solid $tab-border;
 			border-radius: .5rem .5rem 0 0;
+			border-top: 1px solid $tab-border;
+			color: $tab-selected-text;
 			cursor:pointer;
-			margin: 0;
 			display: inline;
+			margin: 0;
 			padding: 1rem 1.5rem .14rem 1.5rem;
 			z-index: 2;
 			
@@ -44,6 +50,7 @@ $tab-notselected: #f0f0f0 !default;
 			&:not(.selected) {
 				background-color: $tab-notselected;
 				border-bottom: 1px solid $tab-border;
+				color: $tab-notselected-text;
 			}
 
 			span {
@@ -53,9 +60,9 @@ $tab-notselected: #f0f0f0 !default;
 
 		}
 		[role="tabpanel"] {
-			background-color: $tab-selected;
+			background-color: $tab-panel-background-color;
 			border: 1px solid $tab-border;
-			border-top: none;
+			border-top: $tab-panel-top-border solid $tab-panel-top-border-width;
 			padding: 1rem;
 			z-index: 1;
 
@@ -63,7 +70,6 @@ $tab-notselected: #f0f0f0 !default;
 				display: none;
 			}
 			@content;
-
 		}
 	}
 }

src/pg/patterns/core/tabs/tabs.css

@@ -1,52 +1 @@
-tabset, .tab-group {
+.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-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;color:#000;cursor:pointer;display:inline;margin:0;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;color:#000}.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:#7f7f7f solid 1px;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}
-	margin: 2rem 0 1rem 0;
-}
-tabset > ul, .tab-group > ul {
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	margin: 0;
-	padding: 0;
-}
-tabset > ul li.separator, .tab-group > ul li.separator {
-	border-bottom: 1px solid #7f7f7f;
-	border-left: 1px solid #7f7f7f;
-	display: inline-block;
-	margin: 0.45rem 0 0 0;
-	width: 100%;
-}
-tabset .tab-hidden, .tab-group .tab-hidden {
-	display: none;
-}
-tabset [role=tab], .tab-group [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;
-}
-tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
-	border-right: 1px solid #7f7f7f;
-}
-tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
-	background-color: #f0f0f0;
-	border-bottom: 1px solid #7f7f7f;
-}
-tabset [role=tab] span, .tab-group [role=tab] span {
-	display: block;
-	margin: 0 0 0.5rem 0;
-}
-tabset [role=tabpanel], .tab-group [role=tabpanel] {
-	background-color: #FFF;
-	border: 1px solid #7f7f7f;
-	border-top: none;
-	padding: 1rem;
-	z-index: 1;
-}
-tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
-	display: none;
-}

src/scss/_core.scss

@@ -10,6 +10,8 @@
 */
 
 
+@use "../pg/patterns/core/breakpoints/breakpoints";
+
 @mixin core-colour-samples {	
 
 	#copystatus {
@@ -48,14 +50,14 @@
 		gap: 1rem;
 		margin-bottom: 1rem;
 
-		@include break(-lg) {
+		@include breakpoints.break(-lg) {
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			max-width: 100%;
 			width: 100%;
 		}
 
-		@include break(-sm) {
+		@include breakpoints.break(-sm) {
 			grid-template-columns: auto;
 			width: 100%;
 			max-width: 100%;
@@ -74,12 +76,12 @@
 								 "lighter   lighter   lighter  darker    darker    darker"
 								 "notes     notes     notes    notes     notes     notes";
 			grid-template-columns: repeat(6, 1fr);
-			grid-template-rows: repeat(2, 1.5rem) repeat(4, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content); 
+			grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content); 
 			padding: 1rem;
 			width: 20rem;
 			max-width: 318px;
 
-			@include break(-lg) {
+			@include breakpoints.break(-lg) {
 				width: 100%;
 				max-width: 100%;
 			}
@@ -114,7 +116,7 @@
 				display: grid; 
 				gap: .5rem;
 				grid-template-columns: repeat(3, 1fr);
-				grid-template-rows: repeat(3, max-content);
+				grid-template-rows: 2.5rem repeat(2, max-content);
 				.result {
 					align-items: center;
 					border-radius: .5rem;
@@ -187,7 +189,7 @@
 							padding: .5rem;
 							width: 20rem;
 							max-width: 318px;
-							height: max-content;
+							height: 10.5rem;
 
 							display: grid; 
 							gap: .5rem;
@@ -230,7 +232,6 @@
 								display: block;
 								width: 100%;
 								place-self: stretch;
-								text-align: center;
 								span {
 									border: none;
 									font-size: .9rem;

src/scss/scaffolding.scss

@@ -1,4 +1,4 @@
-/*
+/* ----------------------------------------------------------
  *    Variables
  */
 
@@ -15,16 +15,19 @@ $tooltip-dark-allow: false;
 // We recommend explicitly using the underscore when referring to pattern scss 
 // as you may have also created a version that compiles to css to display in 
 // your pattern. 
-@import "core";
+@use "core";
-
+@use "../../node_modules/prismjs/themes/prism";
-@import "../pg/patterns/core/sticky-note/_sticky-note";
+@use "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
-@import "../pg/patterns/core/switch/_switch";
+@use "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
-@import "../pg/patterns/core/tooltip/_tooltip";
-@import "../pg/patterns/core/breakpoints/_breakpoints";
-@import "../pg/patterns/core/header/_header";
-@import "../pg/patterns/core/tabs/_tabs"; 
-@import "../pg/patterns/core/status/_status";
 
+@use "../pg/patterns/core/sticky-note/_sticky-note";
+@use "../pg/patterns/core/switch/_switch";
+@use "../pg/patterns/core/tooltip/_tooltip";
+@use "../pg/patterns/core/breakpoints/_breakpoints";
+@use "../pg/patterns/core/header/_header";
+@use "../pg/patterns/core/tabs/_tabs"; 
+@use "../pg/patterns/core/status/_status";
+use
 * {
 	box-sizing: border-box;
 }
@@ -32,19 +35,19 @@ $tooltip-dark-allow: false;
 html {
 	font-family: $font-body;
 	font-size: $font-size;
-	@include break(-md) {
+	@include breakpoints.break(-md) {
 		font-size: calc($font-size + 2pt);
 	}
 	&.show-breakpoints {
-		@include breakpoint-debug;
+		@include breakpoints.breakpoint-debug;
 	}
 }
 
-@include core-colour-samples;
+@include core.core-colour-samples;
 
-@include tooltip;
+@include tooltip.tooltip;
-@include sticky-note;
+@include sticky-note.sticky-note;
-@include status;
+@include status.status;
 
 article[data-status=deprecated]:not(.show-deprecated) {
 	display: none;
@@ -65,7 +68,7 @@ body {
 		margin: 0 auto;
 		width: 100vw;
 
-		@include header;
+		@include header.header;
 
 		nav {
 			background-color: var(--colour-blue);
@@ -84,7 +87,7 @@ body {
 				color: var(--colour-white);
 				text-decoration: none;
 			}
-			@include break(md-) {
+			@include breakpoints.break(md-) {
 				display: initial;
 			}
 		}
@@ -98,7 +101,7 @@ body {
 			grid-row: 3;
 			grid-template-columns: auto repeat(2, max-content);
 			text-align: right;
-			@include switch;
+			@include switch.switch;
 			label {
 				text-align: left;;
 			}
@@ -109,7 +112,7 @@ body {
 			grid-column: 1 / -1;
 			grid-row: 4;
 
-			@include break(-md) {
+			@include breakpoints.break(-md) {
 				grid-row: 3;
 				padding: 0;
 			}
@@ -117,7 +120,7 @@ body {
 			@supports(grid-area: auto) {
 				display: grid;
 				grid-template-columns: 1rem repeat(2, auto) 1rem;
-				@include break(md-) {
+				@include breakpoints.break(md-) {
 					grid-template-columns: auto repeat(2, 22rem) auto;
 				}
 			}
@@ -135,7 +138,7 @@ body {
 					display: none;
 				}
 
-				@include tabs {
+				@include tabs.tabs {
 					pre {
 						background-color: var(--colour-black-5);
 						font-size: .8rem;
@@ -150,15 +153,12 @@ body {
 					display: grid;
 					grid-gap: .5rem;
 					grid-template-columns: max-content auto;
-					@include switch;
+					@include switch.switch;
 				}				
 			}
 		}
 	}
 }
 
-// keep your prism modules
+
-@import "../../node_modules/prismjs/themes/prism";
-@import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
-@import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";