config: Migrate from rollup-plugin-scss to rollup-plugin-sass + Add s…

…timulus as peer dependency

assets/src/scss/01_settings/_settings.media-queries.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "settings.breakpoints";
+
 /* ===================================================================
  * MIXINS
  * =================================================================*/
@@ -8,10 +11,10 @@
 @mixin min-width($breakpoint) {
 
   // If the breakpoint exists in the map.
-  @if map-has-key($breakpoints, $breakpoint) {
+  @if map.has-key(settings.$breakpoints, $breakpoint) {
 
     // Get the breakpoint value.
-    $breakpoint-value: map-get($breakpoints, $breakpoint);
+    $breakpoint-value: map.get(settings.$breakpoints, $breakpoint);
 
     // Write the media query.
     @media (min-width: $breakpoint-value) {
@@ -33,10 +36,10 @@
 @mixin max-width($breakpoint) {
 
   // If the breakpoint exists in the map.
-  @if map-has-key($breakpoints, $breakpoint) {
+  @if map.has-key(settings.$breakpoints, $breakpoint) {
 
     // Get the breakpoint value.
-    $breakpoint-value: map-get($breakpoints, $breakpoint);
+    $breakpoint-value: map.get(settings.$breakpoints, $breakpoint);
 
     // Write the media query.
     @media (max-width: ($breakpoint-value - 1)) {
@@ -58,11 +61,11 @@
 @mixin min-max-width($lower, $upper) {
 
   // If both the lower and upper breakpoints exist in the map.
-  @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
+  @if map.has-key(settings.$breakpoints, $lower) and map.has-key(settings.$breakpoints, $upper) {
 
     // Get the lower and upper breakpoints.
-    $lower-breakpoint: map-get($breakpoints, $lower);
-    $upper-breakpoint: map-get($breakpoints, $upper);
+    $lower-breakpoint: map.get(settings.$breakpoints, $lower);
+    $upper-breakpoint: map.get(settings.$breakpoints, $upper);
 
     // Write the media query.
     @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
@@ -73,14 +76,14 @@
   } @else {
 
     // If lower breakpoint is invalid.
-    @if (map-has-key($breakpoints, $lower) == false) {
+    @if (map.has-key(settings.$breakpoints, $lower) == false) {
 
       // Log a warning.
       @warn 'Your lower breakpoint was invalid: #{$lower}.';
     }
 
     // If upper breakpoint is invalid.
-    @if (map-has-key($breakpoints, $upper) == false) {
+    @if (map.has-key(settings.$breakpoints, $upper) == false) {
 
       // Log a warning.
       @warn 'Your upper breakpoint was invalid: #{$upper}.';

assets/src/scss/03_elements/_elements.page.scss

@@ -1,10 +1,12 @@
+@use "../01_settings/settings.typography";
+
 html {
   scroll-behavior: smooth;
   font-size: 62.5%;
 }
 
 body {
-  @include text('m', var(--fm-page-text));
+  @include settings.text('m', var(--fm-page-text));
   background-color: var(--fm-page-bg);
   height: 100vh;
   height: 100svh;

assets/src/scss/04_components/_components.actions-selected.scss

@@ -1,11 +1,14 @@
+@use "../01_settings/settings.media-queries" as settings2;
+@use "../01_settings/settings.spacing";
+
 .fm-c-actions-selected {
-  padding: $space-8 $space-16;
+  padding: settings.$space-8 settings.$space-16;
   background-color: var(--fm-actions-selected-bg);
   border-radius: var(--fm-radius-full);
   display: flex;
   align-items: center;
 
-  @include max-width(md) {
+  @include settings2.max-width(md) {
     justify-content: space-between;
   }
 }
@@ -17,7 +20,7 @@
 }
 
 .fm-c-actions-selected__info {
-  margin: 0 $space-24 0 $space-10;
+  margin: 0 settings.$space-24 0 settings.$space-10;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -26,9 +29,9 @@
 .fm-c-actions-selected__actions {
   display: flex;
   align-items: center;
-  gap: $space-16;
+  gap: settings.$space-16;
 
-  @include max-width(md) {
-    gap: $space-24;
+  @include settings2.max-width(md) {
+    gap: settings.$space-24;
   }
 }

assets/src/scss/04_components/_components.back.scss

@@ -1,10 +1,12 @@
+@use "../01_settings/settings.spacing";
+
 .fm-c-back {
   display: flex;
   align-items: center;
-  gap: $space-8;
+  gap: settings.$space-8;
   border-bottom: 1px solid var(--fm-border-grey-50);
-  margin-right: calc($space-16 * -1);
-  margin-left: calc($space-16 * -1);
+  margin-right: calc(settings.$space-16 * -1);
+  margin-left: calc(settings.$space-16 * -1);
   padding: 1.6rem;
   position: relative;
 }

assets/src/scss/04_components/_components.button.scss

@@ -1,12 +1,14 @@
+@use "../01_settings/settings.spacing";
+
 .fm-c-button {
-  padding: $space-8 $space-14;
+  padding: settings.$space-8 settings.$space-14;
   background-color: var(--fm-button-bg);
   color: var(--fm-button-label);
   border-radius: var(--fm-radius-md);
   transition: background-color var(--fm-transition-in-out);
   display: flex;
   align-items: center;
-  gap: $space-10;
+  gap: settings.$space-10;
   z-index: 1;
 
   &:hover {

assets/src/scss/04_components/_components.card-actions.scss

@@ -1,3 +1,5 @@
+@use "../01_settings/settings.spacing";
+
 .fm-c-card-actions {
   position: relative;
   display: flex;
@@ -23,22 +25,22 @@
   pointer-events: none;
   transition: opacity var(--fm-transition-in-out);
   border-radius: var(--fm-radius-md);
-  padding: $space-8 $space-20 $space-8 $space-8;
+  padding: settings.$space-8 settings.$space-20 settings.$space-8 settings.$space-8;
   box-shadow: var(--fm-color-shadow-deep);
 
   & > button {
-    padding: 0.9rem $space-12;
+    padding: 0.9rem settings.$space-12;
     color: var(--fm-card-actions-button);
     border-radius: var(--fm-radius-sm);
     display: flex;
     align-items: center;
-    gap: $space-16;
+    gap: settings.$space-16;
     transition: background-color var(--fm-transition-in-out);
     width: 100%;
 
     svg {
-      min-width: $space-16;
-      height: $space-16;
+      min-width: settings.$space-16;
+      height: settings.$space-16;
     }
 
     &:hover {

assets/src/scss/04_components/_components.collapse.scss

@@ -1,3 +1,5 @@
+@use "../01_settings/settings.spacing";
+
 .fm-c-collapse {
   &[data-visible='true'] {
     & > .fm-c-collapse__head .fm-c-collapse__arrow {
@@ -19,7 +21,7 @@
   display: flex;
   align-items: center;
   gap: 0.9rem;
-  padding: 0.4rem $space-8;
+  padding: 0.4rem settings.$space-8;
   border-radius: var(--fm-radius-sm);
   transition: background-color var(--fm-transition-in-out);
   width: fit-content;
@@ -33,7 +35,7 @@
   }
 
   &:not(.fm-c-collapse__head--first) {
-    margin-bottom: $space-8;
+    margin-bottom: settings.$space-8;
   }
 }
 

assets/src/scss/04_components/_components.content.scss

@@ -1,29 +1,32 @@
+@use "../01_settings/settings.media-queries" as settings2;
+@use "../01_settings/settings.spacing";
+
 .fm-c-content {
   overflow: auto;
-  padding: $space-16;
+  padding: settings.$space-16;
   display: flex;
   flex-direction: column;
-  gap: $space-16;
+  gap: settings.$space-16;
 
-  @include max-width(md) {
+  @include settings2.max-width(md) {
     padding-top: 0;
-    gap: $space-12;
+    gap: settings.$space-12;
   }
 }
 
 .fm-c-content__actions {
-  @include min-width(md) {
+  @include settings2.min-width(md) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: $space-12;
+    gap: settings.$space-12;
   }
 
-  @include max-width(md) {
+  @include settings2.max-width(md) {
     display: grid;
     grid-template-columns: 1fr 4rem;
-    grid-gap: $space-16;
+    grid-gap: settings.$space-16;
   }
 }
 
@@ -35,30 +38,30 @@
 
 .fm-c-content__buttons {
   display: flex;
-  gap: $space-8;
+  gap: settings.$space-8;
 }
 
 .fm-c-content__cards {
   display: flex;
   flex-direction: column;
-  gap: $space-8;
+  gap: settings.$space-8;
 
   &--grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    grid-gap: $space-16;
+    grid-gap: settings.$space-16;
 
     .fm-c-file-card {
-      padding: $space-8;
+      padding: settings.$space-8;
       grid-template-columns: 1fr 2.4rem;
       grid-template-rows: 3.2rem 13.5rem auto;
       grid-template-areas:
           "name action"
           "img img"
           "info info";
-      grid-gap: $space-8;
+      grid-gap: settings.$space-8;
 
-      @include max-width(md) {
+      @include settings2.max-width(md) {
         grid-template-rows: 3.2rem 8rem auto;
       }
 
@@ -79,7 +82,7 @@
         width: 5.2rem;
         height: 5.2rem;
 
-        @include max-width(md) {
+        @include settings2.max-width(md) {
           width: 3.2rem;
           height: 3.2rem;
         }
@@ -91,16 +94,16 @@
     }
 
     .fm-c-folder-card {
-      padding: $space-8;
+      padding: settings.$space-8;
       grid-template-columns: 1fr 2.4rem;
       grid-template-rows: 3.2rem 13.5rem auto;
       grid-template-areas:
           "name action"
           "img img"
           "info info";
-      grid-gap: $space-8;
+      grid-gap: settings.$space-8;
 
-      @include max-width(md) {
+      @include settings2.max-width(md) {
         grid-template-rows: 3.2rem 8rem auto;
       }
 
@@ -123,7 +126,7 @@
         width: 5.2rem;
         height: 5.2rem;
 
-        @include max-width(md) {
+        @include settings2.max-width(md) {
           width: 3.2rem;
           height: 3.2rem;
         }
@@ -139,7 +142,7 @@
       gap: 0;
     }
 
-    @include max-width(lg) {
+    @include settings2.max-width(lg) {
       grid-template-columns: repeat(2, 1fr);
     }
 
@@ -155,6 +158,6 @@
 
 .fm-c-content__sticky-button {
   position: fixed;
-  bottom: $space-16;
-  right: $space-16;
+  bottom: settings.$space-16;
+  right: settings.$space-16;
 }