Merge pull request #6 from Mezcalito/config/rollup-sass-watch

Migrate from rollup-plugin-scss to rollup-plugin-sass + Add stimulus as peer dependency

assets/src/scss/01_settings/_index.scss

@@ -0,0 +1,7 @@
+@forward "settings.breakpoints";
+@forward "settings.colors";
+@forward "settings.fonts";
+@forward "settings.media-queries";
+@forward "settings.spacing";
+@forward "settings.typography";
+@forward "settings.variables";

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

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "settings.breakpoints" as 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(breakpoints.$breakpoints, $breakpoint) {
 
     // Get the breakpoint value.
-    $breakpoint-value: map-get($breakpoints, $breakpoint);
+    $breakpoint-value: map.get(breakpoints.$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(breakpoints.$breakpoints, $breakpoint) {
 
     // Get the breakpoint value.
-    $breakpoint-value: map-get($breakpoints, $breakpoint);
+    $breakpoint-value: map.get(breakpoints.$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(breakpoints.$breakpoints, $lower) and map.has-key(breakpoints.$breakpoints, $upper) {
 
     // Get the lower and upper breakpoints.
-    $lower-breakpoint: map-get($breakpoints, $lower);
-    $upper-breakpoint: map-get($breakpoints, $upper);
+    $lower-breakpoint: map.get(breakpoints.$breakpoints, $lower);
+    $upper-breakpoint: map.get(breakpoints.$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(breakpoints.$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(breakpoints.$breakpoints, $upper) == false) {
 
       // Log a warning.
       @warn 'Your upper breakpoint was invalid: #{$upper}.';

assets/src/scss/02_generics/_index.scss

@@ -0,0 +1,3 @@
+@forward "generics.box-sizing";
+@forward "generics.reduced-motion";
+@forward "generics.reset";

assets/src/scss/03_elements/_index.scss

@@ -0,0 +1 @@
+@forward "elements.page";

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

@@ -1,10 +1,12 @@
+@use "../01_settings" as settings;
+
 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/_index.scss

@@ -0,0 +1,17 @@
+@forward "components.layout";
+@forward "components.sidebar";
+@forward "components.content";
+@forward "components.button";
+@forward "components.text";
+@forward "components.search-field";
+@forward "components.toggle-buttons";
+@forward "components.folder-card";
+@forward "components.file-card";
+@forward "components.actions-selected";
+@forward "components.back";
+@forward "components.modal";
+@forward "components.submenu";
+@forward "components.collapse";
+@forward "components.card-actions";
+@forward "components.field";
+@forward "components.custom-select";

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

@@ -1,11 +1,13 @@
+@use "../01_settings" as settings;
+
 .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 settings.max-width(md) {
     justify-content: space-between;
   }
 }
@@ -17,7 +19,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 +28,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 settings.max-width(md) {
+    gap: settings.$space-24;
   }
 }

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

@@ -0,0 +1,41 @@
+@use "../01_settings" as settings;
+
+.fm-c-back {
+  display: flex;
+  align-items: center;
+  gap: settings.$space-8;
+  border-bottom: 1px solid var(--fm-border-grey-50);
+  margin-right: calc(#{settings.$space-16} * -1);
+  margin-left: calc(#{settings.$space-16} * -1);
+  padding: 1.6rem;
+  position: relative;
+}
+
+.fm-c-back__action {
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+}
+
+.fm-c-back {
+  display: flex;
+  align-items: center;
+  gap: settings.$space-8;
+  border-bottom: 1px solid var(--fm-border-grey-50);
+  margin-right: calc(#{settings.$space-16} * -1);
+  margin-left: calc(#{settings.$space-16} * -1);
+  padding: 1.6rem;
+  position: relative;
+}
+
+.fm-c-back__action {
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+}

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

@@ -1,12 +1,14 @@
+@use "../01_settings" as settings;
+
 .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 → assets/src/scss/04_components/components.card-actions.scss

@@ -1,3 +1,5 @@
+@use "../01_settings" as settings;
+
 .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 → assets/src/scss/04_components/components.collapse.scss

@@ -1,3 +1,5 @@
+@use "../01_settings" as settings;
+
 .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;
   }
 }