Refactor SCSS files with improved structure, documentation, and M3 best practices

Co-authored-by: renemadsen <[email protected]>

Author: Copilot

eform-client/src/scss/components/_card.scss

@@ -1,11 +1,29 @@
+/**
+ * Card Component Styles
+ * 
+ * Provides utility classes for customizing card header and body spacing.
+ * These classes allow for flexible card layouts with different padding configurations.
+ */
+
+/**
+ * Card Header Variants
+ */
+
+// Extended header with less vertical padding
 .card-header-extended {
   padding: 0.3rem 1.7rem;
 }
 
+// Simple header with standard padding
 .card-header-simple {
   padding: 1.2rem 1.7rem;
 }
 
+/**
+ * Card Body Variants
+ */
+
+// Minimal spacing for card body
 .card-body-no-spaces {
   padding: 0.2rem 1rem;
 }

eform-client/src/scss/components/_chart.scss

@@ -1,30 +1,46 @@
+/**
+ * Chart Component Styles
+ * 
+ * Provides theming for ngx-charts components with support for light and dark themes.
+ * Customizes chart appearance including text, backgrounds, tooltips, and legends.
+ */
+
 @use 'sass:map';
 @use '@angular/material' as mat;
 
+/**
+ * Color Mixin
+ * 
+ * Applies theme-aware styling to chart components.
+ * Provides comprehensive dark theme support with carefully chosen colors.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin color($theme) {
   $color-config: mat.m2-get-color-config($theme);
   $is-dark-theme: map.get($color-config, 'is-dark');
   $background: map.get(map.get($theme, 'background'), 'card');
 
   @if ($is-dark-theme) {
-    /*Backgrounds*/
+    // Dark theme color palette
     $color-bg-darkest: #13141b;
     $color-bg-darker: #1b1e27;
     $color-bg-dark: #232837;
     $color-bg-med: #2f3646;
     $color-bg-light: #455066;
     $color-bg-lighter: #5b6882;
 
-    /*Text*/
+    // Dark theme text colors
     $color-text-dark: #72809b;
     $color-text-med-dark: #919db5;
-    $color-text-med: #A0AABE;
+    $color-text-med: #a0aabe;
     $color-text-med-light: #d9dce1;
     $color-text-light: #f0f1f6;
     $color-text-lighter: #fff;
 
     background: $color-bg-darker;
 
+    // Base chart text styling
     .ngx-charts {
       text {
         fill: $color-text-med;
@@ -46,6 +62,7 @@
         fill: #fff;
       }
 
+      // Grid panel styling
       .grid-panel {
         &.odd {
           rect {
@@ -54,18 +71,21 @@
         }
       }
 
+      // Force-directed graph styling
       .force-directed-graph {
         .edge {
           stroke: $color-bg-light;
         }
       }
 
+      // Number card styling
       .number-card {
         p {
           color: $color-text-light;
         }
       }
 
+      // Gauge chart styling
       .gauge {
         .background-arc {
           path {
@@ -84,6 +104,7 @@
         }
       }
 
+      // Linear gauge styling
       .linear-gauge {
         .background-bar {
           path {
@@ -96,6 +117,7 @@
         }
       }
 
+      // Timeline styling
       .timeline {
         .brush-background {
           fill: rgba(255, 255, 255, 0.05);
@@ -109,11 +131,13 @@
         }
       }
 
+      // Polar chart styling
       .polar-chart .polar-chart-background {
         fill: rgb(30, 34, 46);
       }
     }
 
+    // Chart legend styling for dark theme
     .chart-legend {
       .legend-labels {
         background: $background !important;
@@ -144,6 +168,7 @@
       }
     }
 
+    // Advanced pie legend styling for dark theme
     .advanced-pie-legend {
       color: $color-text-med;
 
@@ -164,24 +189,38 @@
       font-size: 0.8em;
       color: $color-text-med;
     }
-  } @else { // light theme
+  } @else {
+    // Light theme legend styling
     .advanced-pie-legend {
       .legend-items-container {
         .legend-items {
           overflow: visible !important;
         }
       }
     }
-}
+  }
 }
 
+/**
+ * Main Theme Mixin
+ * 
+ * Entry point for applying theme-specific chart styles.
+ * 
+ * @param {Map} $theme - The Material theme map
+ */
 @mixin theme($theme) {
   $color-config: mat.m2-get-color-config($theme);
+  
   @if $color-config != null {
     @include color($theme);
   }
 }
 
+/**
+ * Common Chart Styles
+ * 
+ * Styles applied regardless of theme.
+ */
 .legend-title-text {
   text-overflow: clip !important;
   padding-right: 5px;

eform-client/src/scss/components/_form.scss

@@ -1,18 +1,37 @@
+/**
+ * Form Component Styles
+ * 
+ * Provides utility classes for Material Design form fields with various spacing options.
+ * These classes enable flexible form layouts and consistent spacing across the application.
+ */
+
+/**
+ * Material Design Form Variants
+ */
+
+// Form field for case elements with minimal spacing
 .md-form {
   &.md-form-case-elem {
     margin-top: 0.3rem;
     margin-bottom: 0;
   }
+
+  // Form field with no spacing
   &.md-form-no-spacing {
     margin: 0 !important;
     padding: 0 !important;
   }
+
+  // Small form field with standard margin
   &.md-form-sm {
     margin: 1rem !important;
     padding: 0 !important;
   }
 }
 
+/**
+ * Material Form Field Base Styles
+ */
 .mat-mdc-form-field {
   width: 100%;
 }

eform-client/src/scss/components/_index.scss

@@ -1,15 +1,38 @@
+/**
+ * Component Styles Index
+ * 
+ * Central import point for all component-specific styles.
+ * This file organizes component styles in a logical order and makes them
+ * available throughout the application.
+ * 
+ * Organization:
+ * - Interactive components (buttons, checkboxes, dropdowns)
+ * - Layout components (cards, modals, tables)
+ * - Content components (text, icons, charts)
+ * - UI feedback components (spinners, progress bars, tooltips, tags)
+ * 
+ * Note: Order matters for cascade and specificity rules.
+ */
+
+// Interactive Components
 @use 'button';
-@use 'material-dropdown';
-@use 'text';
 @use 'checkbox';
-@use 'icon';
-@use 'spinner';
-@use 'progress-bar';
-@use 'table';
 @use 'checkbox-material';
+@use 'material-dropdown';
+
+// Layout Components
 @use 'card';
 @use 'form';
 @use 'modal';
+@use 'table';
+
+// Content Components
+@use 'text';
+@use 'icon';
 @use 'chart';
-@use "tooltip";
-@use "tag";
+
+// UI Feedback Components
+@use 'spinner';
+@use 'progress-bar';
+@use 'tooltip';
+@use 'tag';

eform-client/src/scss/components/_modal.scss

@@ -1,27 +1,50 @@
-// Modal y fix
+/**
+ * Modal Component Styles
+ * 
+ * Customizes modal behavior and appearance with theme support.
+ * Handles scrolling behavior and dark theme styling for modal components.
+ */
+
+/**
+ * Modal Scrolling Behavior
+ * 
+ * Ensures modals are scrollable without showing scrollbars.
+ * Provides a cleaner appearance across different browsers.
+ */
 .modal-open .modal {
   overflow-y: auto;
-  -ms-overflow-style: none;  // IE 10+
-  overflow: -moz-scrollbars-none;  // Firefox
+  -ms-overflow-style: none; // IE 10+
+  overflow: -moz-scrollbars-none; // Firefox
+  
   &::-webkit-scrollbar {
-    display: none;  // Safari and Chrome
+    display: none; // Safari and Chrome
   }
 }
 
+/**
+ * Dark Theme Modal Styles
+ * 
+ * Applies dark theme colors to modal header, body, and footer.
+ * Ensures proper contrast and readability in dark mode.
+ */
 body.theme-dark {
   .modal-content {
     background-color: var(--theme-background-color);
+    
     .modal-header {
       background-color: var(--black-075);
       color: var(--theme-body-font-color);
       border-bottom: 1px solid var(--black-300);
+      
       button.close {
         color: var(--black-900);
       }
     }
+    
     .modal-body {
       color: var(--theme-body-font-color);
     }
+    
     .modal-footer {
       border-top: 1px solid var(--black-300);
     }