Scss files organization

+ Slim version example

docs/css/pico.docs.css

@@ -2,8 +2,7 @@
  * Pico: Customs styles for Docs
  */
 /**
- * Light theme (Default) [Additions for docs]
- * Can be forced with data-theme="light"
+ * Theme: Additions for docs
  */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
@@ -11,10 +10,6 @@
   --nav-border:     rgba(115, 130, 140, 0.2);
 }
 
-/**
- * Dark theme (Auto) [Additions for docs]
- * Automatically enabled if user has Dark mode enabled
- */
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --nav-background: rgba(16, 24, 30, 0.8);
@@ -22,10 +17,6 @@
   }
 }
 
-/**
- * Dark theme (Forced) [Additions for docs]
- * Enabled if forced with data-theme="dark"
- */
 [data-theme="dark"] {
   --nav-background: rgba(16, 24, 30, 0.8);
   --nav-border:     rgba(115, 130, 140, 0.2);

docs/js/pico.docs.js

@@ -1,5 +1,5 @@
-//@prepros-append src/aside.js
-//@prepros-append src/theme-switcher.js
-//@prepros-append src/internal-scroll.js
-//@prepros-append src/grid.js
-//@prepros-append src/color-picker.js
+// @prepros-append src/aside.js
+// @prepros-append src/theme-switcher.js
+// @prepros-append src/internal-scroll.js
+// @prepros-append src/grid.js
+// @prepros-append src/color-picker.js

docs/scss/pico.docs.scss

@@ -3,12 +3,10 @@
  */
 
 // Config
-@import "../../scss/colors";
 @import "../../scss/variables";
 
 // Theming
-@import "themes/light";
-@import "themes/dark";
+@import "themes/docs";
 
 // Layout
 @import "layout/main";
@@ -21,5 +19,4 @@
 
 // Components
 @import "components/nav";
-//@import "components/card-code";
 @import "components/theme-switcher";

docs/scss/themes/_docs.scss

@@ -0,0 +1,7 @@
+/**
+ * Theme: Additions for docs
+ */
+
+@import "../../../scss/themes/default/colors";
+@import "docs/light";
+@import "docs/dark";

docs/scss/themes/docs/_dark.scss

@@ -1,8 +1,5 @@
-/**
- * Dark theme (Auto) [Additions for docs]
- * Automatically enabled if user has Dark mode enabled
- */
-
+// Dark theme (Auto) [Additions for docs]
+// Automatically enabled if user has Dark mode enabled
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --nav-background: #{rgba(darken($grey-900, 6%), .8)};
@@ -12,11 +9,8 @@
 
 
 
-/**
- * Dark theme (Forced) [Additions for docs]
- * Enabled if forced with data-theme="dark"
- */
-
+// Dark theme (Forced) [Additions for docs]
+// Enabled if forced with data-theme="dark"
 [data-theme="dark"] {
   --nav-background: #{rgba(darken($grey-900, 6%), .8)};
   --nav-border:     #{rgba($grey-500, .2)};

docs/scss/themes/docs/_light.scss

@@ -1,8 +1,5 @@
-/**
- * Light theme (Default) [Additions for docs]
- * Can be forced with data-theme="light"
- */
-
+// Light theme (Default) [Additions for docs]
+// Can be forced with data-theme="light"
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
   --nav-background: #{rgba($white, .7)};