refactor: modules and css vars

Author: lucaslarroche

css/pico.classless.css

@@ -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};

css/pico.classless.css.map

@@ -1,117 +1,120 @@
+@use "sass:map";
 @use "../settings" as *;
 
-/**
- * Accordion (<details>)
- */
+@if map.get($modules, "components/accordion") {
+  /**
+   * Accordion (<details>)
+   */
 
-details {
-  display: block;
-  margin-bottom: var(#{$✨}spacing);
-  padding-bottom: var(#{$✨}spacing);
-  border-bottom: var(#{$✨}border-width) solid var(#{$✨}accordion-border-color);
-
-  summary {
-    line-height: 1rem;
-    list-style-type: none;
-    cursor: pointer;
-
-    &:not([role]) {
-      color: var(#{$✨}accordion-close-summary-color);
-    }
-
-    @if $enable-transitions {
-      transition: color var(#{$✨}transition);
-    }
-
-    // Reset marker
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    &::marker {
-      display: none;
-    }
+  details {
+    display: block;
+    margin-bottom: var(#{$✨}spacing);
+    padding-bottom: var(#{$✨}spacing);
+    border-bottom: var(#{$✨}border-width) solid var(#{$✨}accordion-border-color);
 
-    &::-moz-list-bullet {
+    summary {
+      line-height: 1rem;
       list-style-type: none;
-    }
+      cursor: pointer;
 
-    // Marker
-    &::after {
-      display: block;
-      width: 1rem;
-      height: 1rem;
-      margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
-      float: right;
-      transform: rotate(-90deg);
-      background-image: var(#{$✨}icon-chevron);
-      background-position: right center;
-      background-size: 1rem auto;
-      background-repeat: no-repeat;
-      content: "";
+      &:not([role]) {
+        color: var(#{$✨}accordion-close-summary-color);
+      }
 
       @if $enable-transitions {
-        transition: transform var(#{$✨}transition);
+        transition: color var(#{$✨}transition);
       }
-    }
 
-    &:focus {
-      outline: none;
+      // Reset marker
+      &::-webkit-details-marker {
+        display: none;
+      }
 
-      &:not([role="button"]) {
-        color: var(#{$✨}accordion-active-summary-color);
+      &::marker {
+        display: none;
       }
-    }
 
-    // Type button
-    &[role="button"] {
-      width: 100%;
-      text-align: left;
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
 
       // Marker
       &::after {
-        height: calc(1rem * var(#{$✨}line-height, 1.5));
-        background-image: var(#{$✨}icon-chevron-button);
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        margin-inline-start: calc(var(#{$✨}spacing, 1rem) * 0.5);
+        float: right;
+        transform: rotate(-90deg);
+        background-image: var(#{$✨}icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+
+        @if $enable-transitions {
+          transition: transform var(#{$✨}transition);
+        }
       }
 
-      @if $enable-classes {
-        // .contrast
-        &:not(.outline).contrast {
-          // Marker
-          &::after {
-            background-image: var(#{$✨}icon-chevron-button-inverse);
+      &:focus {
+        outline: none;
+
+        &:not([role="button"]) {
+          color: var(#{$✨}accordion-active-summary-color);
+        }
+      }
+
+      // Type button
+      &[role="button"] {
+        width: 100%;
+        text-align: left;
+
+        // Marker
+        &::after {
+          height: calc(1rem * var(#{$✨}line-height, 1.5));
+          background-image: var(#{$✨}icon-chevron-button);
+        }
+
+        @if $enable-classes {
+          // .contrast
+          &:not(.outline).contrast {
+            // Marker
+            &::after {
+              background-image: var(#{$✨}icon-chevron-button-inverse);
+            }
           }
         }
       }
     }
-  }
 
-  // Open
-  &[open] {
-    > summary {
-      margin-bottom: calc(var(#{$✨}spacing));
+    // Open
+    &[open] {
+      > summary {
+        margin-bottom: calc(var(#{$✨}spacing));
 
-      &:not([role]) {
-        &:not(:focus) {
-          color: var(#{$✨}accordion-open-summary-color);
+        &:not([role]) {
+          &:not(:focus) {
+            color: var(#{$✨}accordion-open-summary-color);
+          }
         }
-      }
 
-      &::after {
-        transform: rotate(0);
+        &::after {
+          transform: rotate(0);
+        }
       }
     }
   }
-}
 
-[dir="rtl"] {
-  details {
-    summary {
-      text-align: right;
+  [dir="rtl"] {
+    details {
+      summary {
+        text-align: right;
 
-      &::after {
-        float: left;
-        background-position: left center;
+        &::after {
+          float: left;
+          background-position: left center;
+        }
       }
     }
   }