Framework updates

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/RSpade/upstream_changes/scss_loop_refactor_12_31.txt

@@ -0,0 +1,111 @@
+SCSS Loop Refactoring for Responsive Styles
+============================================
+Date: 2024-12-31
+Affects: rsx/theme/responsive.scss (and any project-specific responsive SCSS)
+
+SUMMARY
+-------
+The framework's responsive.scss has been refactored to use SCSS loops (@each)
+for repetitive class generation. Projects with custom responsive SCSS should
+analyze their files for similar optimization opportunities.
+
+CHANGES IN FRAMEWORK
+--------------------
+1. col-5ths responsive classes now generated via @each loop
+2. CSS custom properties (--bp-*) now generated via @each loop
+3. $breakpoints-up map added for consistency in -up mixins
+4. Reduced code from ~55 lines to ~30 lines for col-5ths section
+
+ANALYSIS GUIDE FOR PROJECT SCSS
+-------------------------------
+Review your responsive SCSS files for these patterns:
+
+PATTERN 1: Repeated classes with only breakpoint name changing
+--------------------------------------------------------------
+Before:
+    .my-thing-mobile { @include mobile { ... } }
+    .my-thing-tablet { @include tablet-up { ... } }
+    .my-thing-desktop { @include desktop { ... } }
+
+After:
+    $my-thing-breakpoints: (
+        'mobile': 'max' $bp-desktop,
+        'tablet': 'min' $bp-tablet,
+        'desktop': 'min' $bp-desktop
+    );
+
+    @each $name, $config in $my-thing-breakpoints {
+        $type: nth($config, 1);
+        $value: nth($config, 2);
+
+        .my-thing-#{$name} {
+            @if $type == 'max' {
+                @media (max-width: #{$value - 0.02px}) { ... }
+            } @else {
+                @media (min-width: $value) { ... }
+            }
+        }
+    }
+
+PATTERN 2: CSS custom properties for each breakpoint
+----------------------------------------------------
+Before:
+    :root {
+        --my-bp-tablet: #{$bp-tablet};
+        --my-bp-desktop: #{$bp-desktop};
+        --my-bp-desktop-lg: #{$bp-desktop-lg};
+    }
+
+After:
+    $my-breakpoints: (
+        'tablet': $bp-tablet,
+        'desktop': $bp-desktop,
+        'desktop-lg': $bp-desktop-lg
+    );
+
+    :root {
+        @each $name, $value in $my-breakpoints {
+            --my-bp-#{$name}: #{$value};
+        }
+    }
+
+PATTERN 3: Shared styles in a mixin
+-----------------------------------
+If multiple classes share identical styles, extract to a mixin:
+
+    @mixin my-shared-styles {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .base-class { @include my-shared-styles; }
+
+    @each $name, $config in $breakpoints {
+        .responsive-#{$name} {
+            @media (...) { @include my-shared-styles; }
+        }
+    }
+
+WHEN NOT TO USE LOOPS
+---------------------
+- When classes have different internal logic (not just breakpoint differences)
+- When the repetition is 2-3 items (loop overhead not worth it)
+- When the pattern would obscure the code's intent
+
+LIMITATION: DYNAMIC MIXIN CALLS
+-------------------------------
+SCSS does not support: @include #{$variable}
+
+This means you cannot dynamically call mixins by name. The workaround is to
+define breakpoint values in a map and generate media queries directly, as
+shown in Pattern 1 above.
+
+ACTION REQUIRED
+---------------
+1. Review project-specific responsive SCSS files
+2. Identify repeated patterns (3+ similar blocks)
+3. Refactor using @each loops where appropriate
+4. Verify compiled CSS output matches previous version
+
+NO BREAKING CHANGES - this is a code organization improvement only.