refactor: organize SCSS imports into layers for better structure and maintainability

core/scss/_bootstrap-components.scss

@@ -1,31 +1,41 @@
 // Layout & components
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
+@layer props {
+  @import "bootstrap/scss/root";
+}
+
+@layer reset {
+  @import "bootstrap/scss/reboot";
+  @import "bootstrap/scss/type";
+}
+
+@layer components {
+  @import "bootstrap/scss/images";
+  @import "bootstrap/scss/containers";
+  @import "bootstrap/scss/grid";
+  @import "bootstrap/scss/tables";
+  @import "bootstrap/scss/forms";
+  @import "bootstrap/scss/buttons";
+  @import "bootstrap/scss/transitions";
+  @import "bootstrap/scss/dropdown";
+  @import "bootstrap/scss/button-group";
+  @import "bootstrap/scss/nav";
+  @import "bootstrap/scss/navbar";
+  @import "bootstrap/scss/card";
+  @import "bootstrap/scss/breadcrumb";
+  @import "bootstrap/scss/pagination";
+  @import "bootstrap/scss/progress";
+  @import "bootstrap/scss/list-group";
+  @import "bootstrap/scss/toasts";
+  @import "bootstrap/scss/modal";
+  @import "bootstrap/scss/tooltip";
+  @import "bootstrap/scss/popover";
+  @import "bootstrap/scss/carousel";
+  @import "bootstrap/scss/spinners";
+  @import "bootstrap/scss/offcanvas";
+  @import "bootstrap/scss/placeholders";
+}
 
 // Utilities
-@import "bootstrap/scss/utilities/api";
+@layer utilities {
+  @import "bootstrap/scss/utilities/api";
+}

core/scss/_core.scss

@@ -1,83 +1,87 @@
-@import "config";
-@import "bootstrap-components";
-
-@import "props";
-
-@import "fonts/webfonts";
+@layer props, reset, layout, components, themes, vendors, utils;
 
-@import "layout/root";
-@import "layout/animations";
-@import "layout/core";
-@import "layout/navbar";
-@import "layout/page";
-@import "layout/footer";
-@import "layout/dark";
-
-@import "ui/accordion";
-@import "ui/alerts";
-@import "ui/avatars";
-@import "ui/badges";
-@import "ui/breadcrumbs";
-@import "ui/buttons";
-@import "ui/button-group";
-@import "ui/calendars";
-@import "ui/carousel";
-@import "ui/cards";
-@import "ui/close";
-@import "ui/dropdowns";
-@import "ui/datagrid";
-@import "ui/empty";
-@import "ui/grid";
-@import "ui/icons";
-@import "ui/images";
-@import "ui/forms";
-@import "ui/forms/form-icon";
-@import "ui/forms/form-colorinput";
-@import "ui/forms/form-imagecheck";
-@import "ui/forms/form-selectgroup";
-@import "ui/forms/form-custom";
-@import "ui/forms/form-check";
-@import "ui/forms/validation";
-@import "ui/legend";
-@import "ui/lists";
-@import "ui/loaders";
-@import "ui/login";
-@import "ui/modals";
-@import "ui/nav";
-@import "ui/stars";
-@import "ui/pagination";
-@import "ui/popovers";
-@import "ui/progress";
-@import "ui/ribbons";
-@import "ui/markdown";
-@import "ui/placeholder";
-@import "ui/segmented";
-@import "ui/steps";
-@import "ui/status";
-@import "ui/switch-icon";
-@import "ui/tables";
-@import "ui/tags";
-@import "ui/toasts";
-@import "ui/toolbar";
-@import "ui/tracking";
-@import "ui/timeline";
-@import "ui/type";
-@import "ui/charts";
-@import "ui/offcanvas";
-@import "ui/chat";
-@import "ui/signature";
+@import "config";
 
-@import "helpers/index";
+@layer props {
+  @import "props";
+}
 
-@import "utils/background";
-@import "utils/colors";
-@import "utils/scroll";
-@import "utils/sizing";
-@import "utils/opacity";
-@import "utils/shadow";
-@import "utils/text";
+@import "bootstrap-components";
 
-@import "debug";
+@layer layout {
+  @import "fonts/webfonts";
+  @import "layout/root";
+  @import "layout/animations";
+  @import "layout/core";
+  @import "layout/navbar";
+  @import "layout/page";
+  @import "layout/footer";
+  @import "layout/dark";
+}
 
+@layer components {
+  @import "ui/accordion";
+  @import "ui/alerts";
+  @import "ui/avatars";
+  @import "ui/badges";
+  @import "ui/breadcrumbs";
+  @import "ui/buttons";
+  @import "ui/button-group";
+  @import "ui/calendars";
+  @import "ui/carousel";
+  @import "ui/cards";
+  @import "ui/close";
+  @import "ui/dropdowns";
+  @import "ui/datagrid";
+  @import "ui/empty";
+  @import "ui/grid";
+  @import "ui/icons";
+  @import "ui/images";
+  @import "ui/forms";
+  @import "ui/forms/form-icon";
+  @import "ui/forms/form-colorinput";
+  @import "ui/forms/form-imagecheck";
+  @import "ui/forms/form-selectgroup";
+  @import "ui/forms/form-custom";
+  @import "ui/forms/form-check";
+  @import "ui/forms/validation";
+  @import "ui/legend";
+  @import "ui/lists";
+  @import "ui/loaders";
+  @import "ui/login";
+  @import "ui/modals";
+  @import "ui/nav";
+  @import "ui/stars";
+  @import "ui/pagination";
+  @import "ui/popovers";
+  @import "ui/progress";
+  @import "ui/ribbons";
+  @import "ui/markdown";
+  @import "ui/placeholder";
+  @import "ui/segmented";
+  @import "ui/steps";
+  @import "ui/status";
+  @import "ui/switch-icon";
+  @import "ui/tables";
+  @import "ui/tags";
+  @import "ui/toasts";
+  @import "ui/toolbar";
+  @import "ui/tracking";
+  @import "ui/timeline";
+  @import "ui/type";
+  @import "ui/charts";
+  @import "ui/offcanvas";
+  @import "ui/chat";
+  @import "ui/signature";
+  @import "helpers/index";
+}
 
-@import "debug";
+@layer utils {
+  @import "utils/background";
+  @import "utils/colors";
+  @import "utils/scroll";
+  @import "utils/sizing";
+  @import "utils/opacity";
+  @import "utils/shadow";
+  @import "utils/text";
+}

core/scss/_debug.scss

@@ -1,49 +0,0 @@
-$debug: false;
-
-@if $debug {
-  $colors: (
-    "blue": $blue,
-    "azure": $azure,
-    "indigo": $indigo,
-    "purple": $purple,
-    "pink": $pink,
-    "red": $red,
-    "orange": $orange,
-    "yellow": $yellow,
-    "lime": $lime,
-    "green": $green,
-    "teal": $teal,
-    "cyan": $cyan,
-  );
-
-  @each $name, $color in $colors {
-    @debug ("#{$name}: '#{$color}'");
-    @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
-    @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
-    @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
-    @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
-    @debug ("#{$name}-500: '#{$color}'");
-    @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
-    @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
-    @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
-    @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
-  }
-
-  @debug ("gray: '#{$gray-500}'");
-  @debug ("gray-100: '#{$gray-100}'");
-  @debug ("gray-200: '#{$gray-200}'");
-  @debug ("gray-300: '#{$gray-300}'");
-  @debug ("gray-400: '#{$gray-400}'");
-  @debug ("gray-500: '#{$gray-500}'");
-  @debug ("gray-600: '#{$gray-600}'");
-  @debug ("gray-700: '#{$gray-700}'");
-  @debug ("gray-800: '#{$gray-800}'");
-  @debug ("gray-900: '#{$gray-900}'");
-
-  @debug ("border-color: '#{$border-color}'");
-  @debug ("text-secondary: '#{$text-secondary}'");
-
-  @each $name, $color in $social-colors {
-    @debug ("#{$name}: '#{$color}'");
-  }
-}

core/scss/tabler-flags.scss

@@ -1,2 +1,5 @@
 @import "config";
-@import "ui/flags";
+
+@layer components {
+  @import "ui/flags";
+}

core/scss/tabler-marketing.scss

@@ -1,13 +1,16 @@
 @import "config";
-@import "variables";
 @import "utilities-marketing";
 
-@import "marketing/core";
-@import "marketing/hero";
-@import "marketing/browser";
-@import "marketing/sections";
-@import "marketing/filters";
-@import "marketing/pricing";
-@import "marketing/shape";
+@layer components {
+  @import "marketing/core";
+  @import "marketing/hero";
+  @import "marketing/browser";
+  @import "marketing/sections";
+  @import "marketing/filters";
+  @import "marketing/pricing";
+  @import "marketing/shape";
+}
 
-@import "bootstrap/scss/utilities/api";
+@layer utilities {
+  @import "bootstrap/scss/utilities/api";
+}

core/scss/tabler-payments.scss

@@ -1,2 +1,5 @@
 @import "config";
-@import "ui/payments";
+
+@layer components {
+  @import "ui/payments";
+}

core/scss/tabler-socials.scss

@@ -1,2 +1,5 @@
 @import "config";
-@import "ui/social";
+
+@layer components {
+  @import "ui/social";
+}

core/scss/tabler-themes.scss

@@ -1,121 +1,123 @@
 @import "config";
 
-[data-bs-theme-base="slate"] {
-  --#{$prefix}gray-50: #f8fafc;
-  --#{$prefix}gray-100: #f1f5f9;
-  --#{$prefix}gray-200: #e2e8f0;
-  --#{$prefix}gray-300: #cbd5e1;
-  --#{$prefix}gray-400: #94a3b8;
-  --#{$prefix}gray-500: #64748b;
-  --#{$prefix}gray-600: #475569;
-  --#{$prefix}gray-700: #334155;
-  --#{$prefix}gray-800: #1e293b;
-  --#{$prefix}gray-900: #0f172a;
-  --#{$prefix}gray-950: #020617;
-}
+@layer themes {
+  [data-bs-theme-base="slate"] {
+    --#{$prefix}gray-50: #f8fafc;
+    --#{$prefix}gray-100: #f1f5f9;
+    --#{$prefix}gray-200: #e2e8f0;
+    --#{$prefix}gray-300: #cbd5e1;
+    --#{$prefix}gray-400: #94a3b8;
+    --#{$prefix}gray-500: #64748b;
+    --#{$prefix}gray-600: #475569;
+    --#{$prefix}gray-700: #334155;
+    --#{$prefix}gray-800: #1e293b;
+    --#{$prefix}gray-900: #0f172a;
+    --#{$prefix}gray-950: #020617;
+  }
 
-[data-bs-theme-base="gray"] {
-  --#{$prefix}gray-50: #f9fafb;
-  --#{$prefix}gray-100: #f3f4f6;
-  --#{$prefix}gray-200: #e5e7eb;
-  --#{$prefix}gray-300: #d1d5db;
-  --#{$prefix}gray-400: #9ca3af;
-  --#{$prefix}gray-500: #6b7280;
-  --#{$prefix}gray-600: #4b5563;
-  --#{$prefix}gray-700: #374151;
-  --#{$prefix}gray-800: #1f2937;
-  --#{$prefix}gray-900: #111827;
-  --#{$prefix}gray-950: #030712;
-}
+  [data-bs-theme-base="gray"] {
+    --#{$prefix}gray-50: #f9fafb;
+    --#{$prefix}gray-100: #f3f4f6;
+    --#{$prefix}gray-200: #e5e7eb;
+    --#{$prefix}gray-300: #d1d5db;
+    --#{$prefix}gray-400: #9ca3af;
+    --#{$prefix}gray-500: #6b7280;
+    --#{$prefix}gray-600: #4b5563;
+    --#{$prefix}gray-700: #374151;
+    --#{$prefix}gray-800: #1f2937;
+    --#{$prefix}gray-900: #111827;
+    --#{$prefix}gray-950: #030712;
+  }
 
-[data-bs-theme-base="zinc"] {
-  --#{$prefix}gray-50: #fafafa;
-  --#{$prefix}gray-100: #f4f4f5;
-  --#{$prefix}gray-200: #e4e4e7;
-  --#{$prefix}gray-300: #d4d4d8;
-  --#{$prefix}gray-400: #a1a1aa;
-  --#{$prefix}gray-500: #71717a;
-  --#{$prefix}gray-600: #52525b;
-  --#{$prefix}gray-700: #3f3f46;
-  --#{$prefix}gray-800: #27272a;
-  --#{$prefix}gray-900: #18181b;
-  --#{$prefix}gray-950: #09090b;
-}
+  [data-bs-theme-base="zinc"] {
+    --#{$prefix}gray-50: #fafafa;
+    --#{$prefix}gray-100: #f4f4f5;
+    --#{$prefix}gray-200: #e4e4e7;
+    --#{$prefix}gray-300: #d4d4d8;
+    --#{$prefix}gray-400: #a1a1aa;
+    --#{$prefix}gray-500: #71717a;
+    --#{$prefix}gray-600: #52525b;
+    --#{$prefix}gray-700: #3f3f46;
+    --#{$prefix}gray-800: #27272a;
+    --#{$prefix}gray-900: #18181b;
+    --#{$prefix}gray-950: #09090b;
+  }
 
-[data-bs-theme-base="neutral"] {
-  --#{$prefix}gray-50: #fafafa;
-  --#{$prefix}gray-100: #f5f5f5;
-  --#{$prefix}gray-200: #e5e5e5;
-  --#{$prefix}gray-300: #d4d4d4;
-  --#{$prefix}gray-400: #a3a3a3;
-  --#{$prefix}gray-500: #737373;
-  --#{$prefix}gray-600: #525252;
-  --#{$prefix}gray-700: #404040;
-  --#{$prefix}gray-800: #262626;
-  --#{$prefix}gray-900: #171717;
-  --#{$prefix}gray-950: #0a0a0a;
-}
+  [data-bs-theme-base="neutral"] {
+    --#{$prefix}gray-50: #fafafa;
+    --#{$prefix}gray-100: #f5f5f5;
+    --#{$prefix}gray-200: #e5e5e5;
+    --#{$prefix}gray-300: #d4d4d4;
+    --#{$prefix}gray-400: #a3a3a3;
+    --#{$prefix}gray-500: #737373;
+    --#{$prefix}gray-600: #525252;
+    --#{$prefix}gray-700: #404040;
+    --#{$prefix}gray-800: #262626;
+    --#{$prefix}gray-900: #171717;
+    --#{$prefix}gray-950: #0a0a0a;
+  }
 
-[data-bs-theme-base="stone"] {
-  --#{$prefix}gray-50: #fafaf9;
-  --#{$prefix}gray-100: #f5f5f4;
-  --#{$prefix}gray-200: #e7e5e4;
-  --#{$prefix}gray-300: #d6d3d1;
-  --#{$prefix}gray-400: #a8a29e;
-  --#{$prefix}gray-500: #78716c;
-  --#{$prefix}gray-600: #57534e;
-  --#{$prefix}gray-700: #44403c;
-  --#{$prefix}gray-800: #292524;
-  --#{$prefix}gray-900: #1c1917;
-  --#{$prefix}gray-950: #0c0a09;
-}
+  [data-bs-theme-base="stone"] {
+    --#{$prefix}gray-50: #fafaf9;
+    --#{$prefix}gray-100: #f5f5f4;
+    --#{$prefix}gray-200: #e7e5e4;
+    --#{$prefix}gray-300: #d6d3d1;
+    --#{$prefix}gray-400: #a8a29e;
+    --#{$prefix}gray-500: #78716c;
+    --#{$prefix}gray-600: #57534e;
+    --#{$prefix}gray-700: #44403c;
+    --#{$prefix}gray-800: #292524;
+    --#{$prefix}gray-900: #1c1917;
+    --#{$prefix}gray-950: #0c0a09;
+  }
 
-[data-bs-theme-base="pink"] {
-  --#{$prefix}gray-50: #fdf2f8;
-  --#{$prefix}gray-100: #fce7f3;
-  --#{$prefix}gray-200: #fbcfe8;
-  --#{$prefix}gray-300: #f9a8d4;
-  --#{$prefix}gray-400: #f472b6;
-  --#{$prefix}gray-500: #ec4899;
-  --#{$prefix}gray-600: #db2777;
-  --#{$prefix}gray-700: #be185d;
-  --#{$prefix}gray-800: #9d174d;
-  --#{$prefix}gray-900: #831843;
-  --#{$prefix}gray-950: #500724;
-}
+  [data-bs-theme-base="pink"] {
+    --#{$prefix}gray-50: #fdf2f8;
+    --#{$prefix}gray-100: #fce7f3;
+    --#{$prefix}gray-200: #fbcfe8;
+    --#{$prefix}gray-300: #f9a8d4;
+    --#{$prefix}gray-400: #f472b6;
+    --#{$prefix}gray-500: #ec4899;
+    --#{$prefix}gray-600: #db2777;
+    --#{$prefix}gray-700: #be185d;
+    --#{$prefix}gray-800: #9d174d;
+    --#{$prefix}gray-900: #831843;
+    --#{$prefix}gray-950: #500724;
+  }
 
-@each $name, $value in $extra-colors {
-  [data-bs-theme-primary="#{$name}"] {
-    --#{$prefix}primary: #{$value};
-    --#{$prefix}primary-rgb: #{to-rgb($value)};
+  @each $name, $value in $extra-colors {
+    [data-bs-theme-primary="#{$name}"] {
+      --#{$prefix}primary: #{$value};
+      --#{$prefix}primary-rgb: #{to-rgb($value)};
+    }
   }
-}
 
-@each $value in (0, .5, 1, 1.5, 2) {
-  [data-bs-theme-radius="#{$value}"] {
-    --#{$prefix}border-radius-scale: #{$value};
+  @each $value in (0, .5, 1, 1.5, 2) {
+    [data-bs-theme-radius="#{$value}"] {
+      --#{$prefix}border-radius-scale: #{$value};
+    }
   }
-}
 
-[data-bs-theme-primary="inverted"] {
-  --#{$prefix}primary: var(--#{$prefix}gray-800);
-  --#{$prefix}primary-fg: var(--#{$prefix}light);
-  --#{$prefix}primary-rgb: #{to-rgb($dark)};
+  [data-bs-theme-primary="inverted"] {
+    --#{$prefix}primary: var(--#{$prefix}gray-800);
+    --#{$prefix}primary-fg: var(--#{$prefix}light);
+    --#{$prefix}primary-rgb: #{to-rgb($dark)};
 
-  &[data-bs-theme="dark"],
-  [data-bs-theme="dark"] {
-    --#{$prefix}primary: #{$light};
-    --#{$prefix}primary-fg: var(--#{$prefix}dark);
-    --#{$prefix}primary-rgb: #{to-rgb($light)};
+    &[data-bs-theme="dark"],
+    [data-bs-theme="dark"] {
+      --#{$prefix}primary: #{$light};
+      --#{$prefix}primary-fg: var(--#{$prefix}dark);
+      --#{$prefix}primary-rgb: #{to-rgb($light)};
+    }
   }
-}
 
-@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
-  [data-bs-theme-font="#{$name}"] {
-    --#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
+  @each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
+    [data-bs-theme-font="#{$name}"] {
+      --#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
 
-    @if $name == "monospace" {
-      --#{$prefix}body-font-size: 80%;
+      @if $name == "monospace" {
+        --#{$prefix}body-font-size: 80%;
+      }
     }
   }
-}
+}

core/scss/tabler-vendors.scss

@@ -1,16 +1,18 @@
 @import "config";
 
-@import "vendor/nouislider";
-@import "vendor/litepicker";
-@import "vendor/tom-select";
-@import "vendor/apexcharts";
-@import "vendor/jsvectormap";
-@import "vendor/dropzone";
-@import "vendor/fslightbox";
-@import "vendor/plyr";
-@import "vendor/wysiwyg";
-@import "vendor/stars-rating";
-@import "vendor/coloris";
-@import "vendor/typed";
-@import "vendor/turbo";
-@import "vendor/fullcalendar";
+@layer vendors {
+  @import "vendor/nouislider";
+  @import "vendor/litepicker";
+  @import "vendor/tom-select";
+  @import "vendor/apexcharts";
+  @import "vendor/jsvectormap";
+  @import "vendor/dropzone";
+  @import "vendor/fslightbox";
+  @import "vendor/plyr";
+  @import "vendor/wysiwyg";
+  @import "vendor/stars-rating";
+  @import "vendor/coloris";
+  @import "vendor/typed";
+  @import "vendor/turbo";
+  @import "vendor/fullcalendar";
+}