fix: wip

package.json

@@ -54,6 +54,7 @@
   "dependencies": {
     "@babel/eslint-parser": "^7.12.17",
     "@storybook/storybook-deployer": "^2.8.10",
+    "@tokens-studio/sd-transforms": "^0.9.2",
     "add-attributes-twig-extension": "^0.1.0",
     "bem-twig-extension": "^0.1.1",
     "breakpoint-sass": "^3.0.0",

sdTokens.config.json

@@ -4,6 +4,15 @@
   ],
   "platforms": {
     "css": {
+      "transformGroup": "tokens-studio",
+      "files": [
+        {
+          "destination": "src/components/tokens/_tokens.scss",
+          "format": "css/variables"
+        }
+      ]
+    },
+    "foo": {
       "transforms": [
         "attribute/cti",
         "name/cti/kebab",
@@ -15,7 +24,7 @@
       ],
       "files": [
         {
-          "destination": "src/components/tokens/_tokens.scss",
+          "destination": "src/components/tokens/_tokens-foo.css",
           "format": "css/variables"
         }
       ]

src/components/accordion/_accordion.scss

@@ -2,12 +2,6 @@
 
 $accordion_icon_size: var(--size-xl);
 
-// --accordion-color-body: #00202e;
-// --accordion-color-header: #007fb6;
-// --accordion-color-header-hover: #33b2e9;
-// --accordion-divider-color: #545f64;
-
-
 // The accordion group.
 .accordion {
   padding-block: var(--spacing-sm);
@@ -42,21 +36,19 @@ $accordion_icon_size: var(--size-xl);
   width: 100%;
 
   &:hover {
-    color: clr(link);
+    color: var(--accordion-color-header-hover);
   }
 }
 
 .accordion__toggle-all {
   background: none;
-  color: inherit;
   border: none;
   padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
-
   display: flex;
-  color: var(--accordion-color-header);
+  color: var(--colors-text-body);
   font-size: var(--font-size-small);
   gap: var(--spacing-sm);
   align-items: center;
@@ -70,7 +62,7 @@ $accordion_icon_size: var(--size-xl);
   }
 
   .accordion__icon {
-    fill: var(--accordion-color-header);
+    fill: var(--colors-text-body);
     height: var(--size-lg);
     width: var(--size-lg);
   }
@@ -94,6 +86,7 @@ $accordion_icon_size: var(--size-xl);
 
 .accordion-item__heading {
   @include heading-medium;
+  font-weight: normal;
   display: flex;
   margin: 0 0 var(--spacing-lg);
   color: var(--accordion-color-header);

src/components/images/image/figure.yml

@@ -1,5 +1,5 @@
 output_image_tag: true
 image_url: '#'
-image_src: 'https://placehold.co/1200x200'
+image_src: 'https://placehold.co/1200x600'
 image_alt: 'This is the alt text'
 image_caption: 'This is an image caption.'

src/components/menus/inline/_inline-menu.scss

@@ -6,6 +6,7 @@
 
 
   @include medium {
+    flex-flow: row wrap;
     gap: var(--spacing-lg);
     margin-bottom: 1em;
   }

src/components/menus/main-menu/_02-main-menu-link.scss

@@ -25,8 +25,8 @@
     &.active,
     &:active,
     &:hover {
-      background: var(--main-menu-color-link-bg-hover);
-      color: var(--main-menu-color-link-label-hover);
+      background: blue; //var(--main-menu-color-link-bg-hover);
+      color: red; //var(--main-menu-color-link-label-hover);
     }
 
     // &::after {

src/components/menus/main-menu/_03-main-menu-toggle.scss

@@ -1,6 +1,8 @@
 /* Toggle */
 .toggle-expand {
   @include link;
+  background: red;
+  display: flex;
 
   @include medium {
     display: none;

src/components/menus/main-menu/main-menu.twig

@@ -4,11 +4,11 @@
 	<a href="#" id="toggle-expand" class="toggle-expand">
 		<span class="toggle-expand__open">
 			{% include "@components/icons/_icon.twig" with {
-        icon_base_class: "icon",
-        icon_blockname: "toggle-expand",
-        icon_name: "menu",
+        icon__base_class: "icon",
+        icon__blockname: "toggle-expand",
+        icon__name: "menu",
       } %}
-			<span class="toggle-expand__text">Main Menu</span>
+			<span class="toggle-expand__text">Menu</span>
 		</span>
 		<span class="toggle-expand__close">
 			<span class="toggle-expand__text">Close</span>