brianhansonxyz/rspade_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize SCSS to use variables.scss and px units

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
2025-12-18 18:52:32 +00:00
parent 1a5d93140c
commit ee87bc6297
2 changed files with 322 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/RSpade/Core/Js/Responsive.js
View File

@@ -27,7 +27,7 @@ class Responsive {
}
const styles = getComputedStyle(document.documentElement);
const value = styles.getPropertyValue(`--bp-${name}-min`).trim();
const value = styles.getPropertyValue(`--${name}`).trim();
const parsed = parseInt(value, 10);
this._cache[name] = parsed;

321
app/RSpade/upstream_changes/scss_variables_12_18.txt Executable file
View File

@@ -0,0 +1,321 @@
SCSS VARIABLES & UNITS - MIGRATION GUIDE
Date: 2024-12-18
SUMMARY
RSX theme SCSS has been standardized to use centralized variables from
variables.scss and px units exclusively (never rem). This ensures consistent
styling across all components and makes the codebase self-documenting.
All hardcoded "magic numbers" (colors, spacing, font sizes, etc.) have been
refactored to use named variables. The rem unit has been completely removed
from application SCSS in favor of px for predictable, consistent sizing.
A new rsx/theme/CLAUDE.md file documents these requirements for AI agents
and developers writing new SCSS.
DESIGN PRINCIPLES
1. Variables First
Every value that appears more than once, or represents a design decision,
should be a named variable. Reading SCSS should reveal intent through
variable names like $spacing-lg, $text-muted, $border-radius-md.
2. px Only, Never rem
All measurements use px units. This provides:
- Predictable sizing (no font-size inheritance issues)
- Easier debugging (values match computed styles exactly)
- Consistent component sizing regardless of context
3. Self-Documenting Code
Variable names should immediately convey meaning without comments.
$spacing-lg is clearly larger than $spacing-sm. $text-muted is
clearly de-emphasized text.
AFFECTED FILES
Framework files (already updated):
rsx/theme/variables.scss (expanded with new variables and mixins)
rsx/theme/CLAUDE.md (new file - coding guidelines)
rsx/theme/layout.scss
rsx/theme/components/navigation/sidebar/sidebar_nav.scss
rsx/lib/modal/rsx_modal.scss
rsx/theme/components/datagrid/datagrid_abstract.scss
rsx/theme/components/forms/pin_verification_form.scss
rsx/theme/components/feedback/errors/generic_error_page_component.scss
rsx/theme/components/feedback/errors/php_exception_error_page_component.scss
rsx/theme/components/business/textbox_click_to_copy/textbox_click_to_copy.scss
rsx/theme/components/inputs/select/select_input.scss
rsx/theme/components/page/breadcrumb_nav.scss
rsx/app/frontend/frontend_spa_layout.scss
rsx/app/frontend/settings/settings_layout.scss
rsx/app/login/login_layout.scss
rsx/app/dev/dev_layout.scss
rsx/app/root/root_layout.scss
rsx/app/backend/backend_index.scss
Application files requiring migration:
Any *.scss file using rem units
Any *.scss file with hardcoded colors, spacing, or font sizes
CHANGES REQUIRED
1. Review and Adopt variables.scss
-------------------------------------------------------------------------
The following variable categories are now defined. Use these instead of
hardcoded values:
SPACING (px only):
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-2xl: 48px;
$spacing-3xl: 64px;
Fine-grained spacing:
$spacing-1: 4px;
$spacing-2: 8px;
$spacing-3: 12px;
$spacing-4: 16px;
$spacing-5: 20px;
$spacing-6: 24px;
FONT SIZES (px only):
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-2xl: 24px;
$font-size-3xl: 30px;
FONT WEIGHTS:
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
COLORS - Bootstrap-aligned grays:
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
SEMANTIC COLORS:
$text-color: $gray-700;
$text-muted: $gray-600;
$border-color: $gray-300;
$background-light: $gray-100;
THEME COLORS:
$primary-color: #0d6efd;
$secondary-color: #6c757d;
$success-color: #198754;
$info-color: #0dcaf0;
$warning-color: #ffc107;
$danger-color: #dc3545;
ERROR/ALERT COLORS:
$error-bg: #fff3f3;
$error-border: #f5c6cb;
$error-text: #721c24;
$warning-text: #856404;
BORDER RADIUS:
$border-radius-sm: 4px;
$border-radius-md: 6px;
$border-radius-lg: 8px;
$border-radius-xl: 12px;
$border-radius-2xl: 16px;
$border-radius-pill: 9999px;
Z-INDEX:
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-modal-content: 1100;
$z-index-flash: 1200;
$z-index-system: 9000;
TRANSITIONS:
$transition-duration-fast: 0.15s;
$transition-duration-base: 0.2s;
$transition-duration-slow: 0.3s;
$transition-fast: all $transition-duration-fast ease;
$transition-base: all $transition-duration-base ease;
NAVIGATION:
$nav-link-padding: 12px 16px;
$nav-link-border-radius: $border-radius-md;
$nav-icon-size: 18px;
$nav-icon-width: $spacing-lg;
ICONS:
$icon-size-xs: 12px;
$icon-size-sm: 16px;
$icon-size-md: 20px;
$icon-size-lg: 24px;
$icon-size-xl: 32px;
CONTENT WIDTHS:
$content-max-width: 1600px;
$content-max-width-wide: 1800px;
MODAL:
$modal-min-width: 400px;
$modal-min-width-mobile: 280px;
$modal-min-height: 260px;
DATAGRID:
$datagrid-cell-padding-y: 12px;
$datagrid-cell-padding-x: 12px;
$datagrid-header-bg: $gray-100;
2. Use the primary-hover-bg Mixin
-------------------------------------------------------------------------
A mixin is provided for consistent primary color hover backgrounds:
@mixin primary-hover-bg($alpha: 0.1) {
background: rgba($primary-color, $alpha);
}
Usage:
&:hover {
@include primary-hover-bg(0.1);
color: $primary-color;
}
3. Convert rem to px
-------------------------------------------------------------------------
Replace all rem values with px equivalents:
0.25rem → 4px (use $spacing-xs or $spacing-1)
0.375rem → 6px (use $border-radius-md)
0.5rem → 8px (use $spacing-sm or $spacing-2)
0.75rem → 12px (use $spacing-3 or $font-size-xs)
0.875rem → 14px (use $font-size-sm)
1rem → 16px (use $spacing-md or $font-size-base)
1.25rem → 20px (use $font-size-xl or $spacing-5)
1.5rem → 24px (use $spacing-lg or $font-size-2xl)
2rem → 32px (use $spacing-xl)
2.5rem → 40px
3rem → 48px (use $spacing-2xl)
Example migration:
Before:
.My_Component {
padding: 1rem 1.5rem;
font-size: 0.875rem;
margin-bottom: 0.5rem;
border-radius: 0.375rem;
}
After:
.My_Component {
padding: $spacing-md $spacing-lg;
font-size: $font-size-sm;
margin-bottom: $spacing-sm;
border-radius: $border-radius-md;
}
4. Replace Hardcoded Colors
-------------------------------------------------------------------------
Replace hex colors with variables:
Before:
color: #495057;
background: #f8f9fa;
border-color: #dee2e6;
After:
color: $text-color; // or $gray-700
background: $background-light; // or $gray-100
border-color: $border-color; // or $gray-300
For primary/theme colors:
#0d6efd → $primary-color
#6c757d → $secondary-color or $text-muted
#198754 → $success-color
#dc3545 → $danger-color
#ffc107 → $warning-color
#0dcaf0 → $info-color
5. Replace Hardcoded Font Weights
-------------------------------------------------------------------------
Before:
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: bold;
After:
font-weight: $font-weight-normal;
font-weight: $font-weight-medium;
font-weight: $font-weight-semibold;
font-weight: $font-weight-bold;
6. Add New Variables When Needed
-------------------------------------------------------------------------
If no existing variable fits your use case, add a new one to variables.scss
with a descriptive name following the established patterns.
Good variable names:
$sidebar-width: 250px;
$header-height: 57px;
$card-padding: $spacing-lg;
$button-min-width: 120px;
Bad variable names:
$size1: 250px; // Meaningless
$big-padding: 24px; // Vague
$x: 57px; // Cryptic
CONFIGURATION
No additional configuration required.
The rsx/theme/CLAUDE.md file documents these guidelines for AI agents and
serves as a quick reference for developers.
VERIFICATION
1. Search for remaining rem values:
grep -r "rem" rsx/app rsx/theme/components rsx/lib --include="*.scss" | grep -v vendor | grep -v archive | grep -v research
2. Search for hardcoded colors that should be variables:
grep -rE "#[0-9a-fA-F]{3,6}" rsx/app rsx/theme/components --include="*.scss" | grep -v vendor
3. Compile bundles and verify no SCSS errors:
php artisan rsx:bundle:compile Frontend_Bundle
4. Visually inspect key pages to ensure styling is unchanged:
- Login page
- Dashboard
- Settings page
- Any page with modals or datagrids
DOCUMENTATION
Created: rsx/theme/CLAUDE.md
Guidelines for AI agents and developers:
- Always check variables.scss before writing new rules
- Use existing variables for spacing, colors, typography
- Add new variables when needed with descriptive names
- Never use rem, always use px
- Theme SCSS should be self-documenting through variable names
REFERENCE
rsx/theme/variables.scss - All variable definitions
rsx/theme/CLAUDE.md - SCSS coding guidelines
php artisan rsx:man scss - SCSS organization conventions