feat: include clr function so it can properly render declarations

Author: Callin Mullaney

assets/icons/angle-down.svg

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../../00-base/00-defaults/01-variables" as *;
+@use "../../00-base/01-colors/colors-used" as *;
 
 // Sass map to define colors. Each set should have a "Dark" variation when required.
 // e.g. `default` and `default-dark`. Or `purple` and `purple-dark`.

assets/icons/chevron-down.svg

@@ -1,4 +1,5 @@
 @use "../../../00-base/00-defaults/01-variables" as *;
+@use "../../../00-base/01-colors/colors-used" as *;
 
 .form-item__dropdown {
   border: 1px solid clr(accent);

assets/icons/circle-info.svg

@@ -1,5 +1,6 @@
 @use "../../../00-base/00-defaults/01-variables" as *;
 @use "../../../00-base/00-defaults/03-mixins" as *;
+@use "../../../00-base/01-colors/colors-used" as *;
 
 .form-item {
   color: clr(text);

assets/icons/facebook.svg

@@ -1,4 +1,5 @@
 @use "../../../00-base/00-defaults/01-variables" as *;
+@use "../../../00-base/01-colors/colors-used" as *;
 
 // Storybook styling
 .icons-demo {

assets/icons/instagram.svg

@@ -1,3 +1,5 @@
+@use "../../../00-base/01-colors/colors-used" as *;
+
 @mixin link {
   color: clr(accent);
 

assets/icons/linkedin.svg

@@ -1,5 +1,6 @@
 @use "../../00-base/00-defaults/01-variables" as *;
 @use "../../00-base/00-defaults/03-mixins" as *;
+@use "../../00-base/01-colors/colors-used" as *;
 
 ul {
   @include list-reset;

assets/icons/menu-close.svg

@@ -1,4 +1,5 @@
 @use "../../00-base/00-defaults/01-variables" as *;
+@use "../../00-base/01-colors/colors-used" as *;
 
 $table-border-width: 1px;
 

assets/icons/menu.svg

@@ -1,4 +1,5 @@
 @use "../../../00-base/00-defaults/01-variables" as *;
+@use "../../../00-base/01-colors/colors-used" as *;
 
 /*
  * Generic header styles:

assets/icons/triangle-exclamation.svg

@@ -1,4 +1,5 @@
 @use "../../../00-base/00-defaults/01-variables" as *;
+@use "../../../00-base/01-colors/colors-used" as *;
 
 /* Create a mixin for paragraph styles that can be implemented
  * in components with other classnames.

assets/icons/twitter.svg

@@ -1,3 +1,5 @@
+@use "../../00-base/01-colors/colors-used" as *;
+
 // Variables
 $tooltip-icon-size: 1.25rem;
 $tooltip-content-maxwidth: 18.5rem;

assets/icons/xmark.svg

@@ -1,5 +1,6 @@
 @use "../../00-base/00-defaults/01-variables" as *;
 @use "../../00-base/00-defaults/03-mixins" as *;
+@use "../../00-base/01-colors/colors-used" as *;
 
 // The accordion group.
 .accordion {

components/01-atoms/buttons/_buttons.scss

@@ -1,4 +1,5 @@
 @use "../../00-base/00-defaults/01-variables" as *;
+@use "../../00-base/01-colors/colors-used" as *;
 
 .alert {
   background-color: clr(warning);

components/01-atoms/forms/select/_select.scss

@@ -5,7 +5,7 @@ import buttonTwig from '../../01-atoms/buttons/button.twig';
 import alertData from './alert.yml';
 
 import './alert';
-
+console.log(alertData);
 /**
  * Storybook Definition.
  */
@@ -18,17 +18,17 @@ export default {
     heading: {
       name: 'Alert Heading',
       type: 'string',
-      defaultValue: alertData.alert_heading,
+      defaultValue: alertData.alert__heading,
     },
     content: {
       name: 'Alert Content',
       type: 'string',
-      defaultValue: alertData.alert_content,
+      defaultValue: alertData.alert__content,
     },
     linkContent: {
       name: 'Alert Link Text',
       type: 'string',
-      defaultValue: alertData.alert_link__content,
+      defaultValue: alertData.alert__link__content,
     },
   },
 };
@@ -55,10 +55,10 @@ export const Alert = ({ type, heading, content, linkContent }) => `
 </script>
 ${alertTwig({
   alert_type: type,
-  alert_heading: heading,
-  alert_content: content,
-  alert_link__content: linkContent,
-  alert_link__url: alertData.alert_link__url,
+  alert__heading: heading,
+  alert__content: content,
+  alert__link__content: linkContent,
+  alert__link__url: alertData.alert__link__url,
   alert_id: '123',
 })}<br />
 ${paragraphTwig({