refactor: modules and css vars

scss/_settings.scss

@@ -1,21 +1,19 @@
 @use "sass:map";
 
-// Config
+// Settings
 // ––––––––––––––––––––
 
 // Prefix for CSS variables
 $css-var-prefix: "pico-" !default;
 
-// Set the root element for $enable-semantic-container and $enable-responsive-spacings
+// Define the root element used to target <header>, <main>, <footer>
+// with $enable-semantic-container and $enable-responsive-spacings
 $semantic-root-element: "body" !default;
 
 // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
 $enable-semantic-container: false !default;
 
-// Enable .container and .container-fluid
-$enable-class-container: true !default;
-
-// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
+// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
 // Fluid layout if disabled
 $enable-viewport: true !default;
 
@@ -31,9 +29,6 @@ $enable-responsive-typography: true !default;
 // .classless version if disabled
 $enable-classes: true !default;
 
-// Enable .grid class
-$enable-grid: true !default;
-
 // Enable transitions
 $enable-transitions: true !default;
 
@@ -44,33 +39,87 @@ $enable-important: true !default;
 $breakpoints: () !default;
 $breakpoints: map.deep-merge(
   (
-    // Small (landscape phones)  
-    sm: (
-      breakpoint: 576px,
-      viewport: 510px,
-      root-font-size: 17px,
-    ),
+    // Small (landscape phones)
+    sm:
+      (
+        breakpoint: 576px,
+        viewport: 510px,
+        root-font-size: 17px,
+      ),
     // Medium (tablets)
-    md: (
-      breakpoint: 768px,
-      viewport: 700px,
-      root-font-size: 18px,
-    ),
+    md:
+      (
+        breakpoint: 768px,
+        viewport: 700px,
+        root-font-size: 18px,
+      ),
     // Large (desktops)
-    lg: (
-      breakpoint: 992px,
-      viewport: 920px,
-      root-font-size: 19px,
-    ),
+    lg:
+      (
+        breakpoint: 992px,
+        viewport: 920px,
+        root-font-size: 19px,
+      ),
     // Extra large (large desktops)
-    xl: (
-      breakpoint: 1200px,
-      viewport: 1130px,
-      root-font-size: 20px,
-    ),
+    xl:
+      (
+        breakpoint: 1200px,
+        viewport: 1130px,
+        root-font-size: 20px,
+      )
   ),
   $breakpoints
 );
 
+// Modules to export
+$modules: () !default;
+$modules: map.merge(
+  (
+    // Theme
+    "themes/default": true,
+
+    // Layout
+    "layout/document": true,
+    "layout/landmarks": true,
+    "layout/container": true,
+    "layout/section": true,
+    "layout/grid": true,
+    "layout/scroller": true,
+
+    // Content
+    "content/link": true,
+    "content/typography": true,
+    "content/embedded": true,
+    "content/button": true,
+    "content/table": true,
+    "content/code": true,
+    "content/miscs": true,
+
+    // Forms
+    "forms/basics": true,
+    "forms/checkbox-radio-switch": true,
+    "forms/input-color": true,
+    "forms/input-date": true,
+    "forms/input-file": true,
+    "forms/input-range": true,
+    "forms/input-search": true,
+
+    // Components
+    "components/accordion": true,
+    "components/card": true,
+    "components/dropdown": true,
+    "components/loading": true,
+    "components/modal": true,
+    "components/nav": true,
+    "components/progress": true,
+    "components/tooltip": true,
+
+    // Utilities
+    "utilities/accessibility": true,
+    "utilities/reduce-motion": true
+  ),
+  $modules
+);
+
 // // Shortcut for CSS vars prefix
 $✨: --#{$css-var-prefix};