@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/variables/_components.scss

@@ -0,0 +1,509 @@
+// ============================================================================
+// COMPONENT VARIABLES
+// Component-specific dimensions, paddings, and settings
+// ============================================================================
+
+@use 'layout' as *;
+@use 'typography' as *;
+@use 'spacing' as *;
+@use 'colors' as *;
+@use 'system' as *;
+
+// NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
+
+// ============================================================================
+// BADGE SYSTEM
+// ============================================================================
+$badge-padding-v: 0.2rem !default;         // 2px (was 0.125rem)
+$badge-padding-h: 0.8rem !default;         // 8px (was 0.5rem)
+
+// Composite badge dimensions
+$composite-badge-icon-width: 3.2rem !default;    // 32px (was 2rem)
+$composite-badge-height: 2.8rem !default;        // 28px (was 1.75rem)
+$composite-badge-label-padding: 0.8rem !default; // 8px (was 0.5rem)
+$composite-badge-button-width: 2.4rem !default;  // 24px (was 1.5rem)
+$composite-badge-min-label-width: 4.8rem !default; // 48px (was 3rem)
+
+// Badge group
+$badge-group-gap: 0.8rem !default;         // 8px (was 0.5rem)
+$badge-group-visible-limit: 5 !default;
+
+// Badge colors
+$badge-success-bg: $success-text-light !default;
+$badge-success-text: $success-text !default;
+$badge-warning-bg: $warning-text-light !default;
+$badge-warning-text: $warning-text !default;
+$badge-info-bg: $info-text-light !default;
+$badge-info-text: $info-text !default;
+$badge-danger-bg: $danger-text-light !default;
+$badge-danger-text: $danger-text !default;
+$badge-pill-radius: 50rem !default;
+
+// Composite badge colors
+$composite-badge-icon-bg: $btn-secondary-bg !default;
+$composite-badge-label-bg: $secondary-light-bg !default;
+$composite-badge-label-text: $secondary-light-text !default;
+$composite-badge-label-hover-bg: $secondary-lighter-bg !default;
+
+// ============================================================================
+// BUTTON SYSTEM
+// ============================================================================
+$btn-group-gap: 0.32rem !default;          // 3.2px - default gap
+$btn-group-gap-compact: 0.16rem !default;  // 1.6px - tight grouping
+$btn-group-gap-loose: 0.8rem !default;     // 8px - spacious grouping
+
+// Button specific - linear size progression (10px base)
+$btn-padding-v: 0.8rem !default;           // 8px (was 0.5rem)
+$btn-padding-h: 1.2rem !default;           // 12px (was 0.75rem)
+$btn-padding-xs-v: 0.4rem !default;        // 4px (was 0.25rem)
+$btn-padding-xs-h: 0.8rem !default;        // 8px (was 0.5rem)
+$btn-padding-sm-v: 0.6rem !default;        // 6px (was 0.375rem)
+$btn-padding-sm-h: 1rem !default;          // 10px (was 0.625rem)
+$btn-padding-lg-v: 1rem !default;          // 10px (was 0.625rem)
+$btn-padding-lg-h: 1.4rem !default;        // 14px (was 0.875rem)
+$btn-padding-xl-v: 1.2rem !default;        // 12px (was 0.75rem)
+$btn-padding-xl-h: 1.6rem !default;        // 16px (was 1rem)
+$btn-border-width: 1px !default;
+$btn-icon-only-size-xs: 2.8rem !default;   // 28px (was 1.75rem)
+$btn-icon-only-size-sm: 3.2rem !default;   // 32px (was 2rem)
+$btn-icon-only-size: 4rem !default;        // 40px (was 2.5rem)
+$btn-icon-only-size-lg: 4.8rem !default;   // 48px (was 3rem)
+$btn-icon-only-size-xl: 5.6rem !default;   // 56px (was 3.5rem)
+$btn-icon-margin: 0.8rem !default;         // 8px (was 0.5rem)
+$btn-min-width: 9.6rem !default;           // 96px (was 6rem)
+
+// Button fixed-width utilities (10px base)
+$btn-width-1x: 1.6rem !default;            // 16px (was 1rem)
+$btn-width-2x: 3.2rem !default;            // 32px (was 2rem)
+$btn-width-3x: 4.8rem !default;            // 48px (was 3rem)
+$btn-width-4x: 6.4rem !default;            // 64px (was 4rem)
+$btn-width-5x: 8rem !default;              // 80px (was 5rem)
+$btn-width-6x: 9.6rem !default;            // 96px (was 6rem)
+$btn-width-7x: 11.2rem !default;           // 112px (was 7rem)
+$btn-width-8x: 12.8rem !default;           // 128px (was 8rem)
+$btn-width-9x: 14.4rem !default;           // 144px (was 9rem)
+$btn-width-10x: 16rem !default;            // 160px (was 10rem)
+
+// Button interaction
+$btn-hover-lift: -1px !default;
+$btn-hover-brightness: 0.9 !default;
+$btn-disabled-opacity: $opacity-disabled !default;
+$btn-focus-ring-opacity: 0.25 !default;
+
+// ============================================================================
+// MODAL SYSTEM
+// ============================================================================
+$modal-overlay-bg: rgba(0, 0, 0, 0.5) !default;
+$modal-content-bg: #ffffff !default;
+$modal-header-padding-v: 1.2rem !default;  // 12px (was 0.75rem)
+$modal-header-padding-h: 1.6rem !default;  // 16px (was 1rem)
+$modal-header-padding: $modal-header-padding-v $modal-header-padding-h !default;
+$modal-body-padding-v: 1.2rem !default;    // 12px (was 0.75rem)
+$modal-body-padding-h: 1.6rem !default;    // 16px (was 1rem)
+$modal-body-padding: $modal-body-padding-v $modal-body-padding-h !default;
+$modal-footer-padding-v: 1.2rem !default;  // 12px (was 0.75rem)
+$modal-footer-padding-h: 1.6rem !default;  // 16px (was 1rem)
+$modal-footer-padding: $modal-footer-padding-v $modal-footer-padding-h !default;
+$modal-sm-width: 32rem !default;           // 320px (was 20rem)
+$modal-md-width: 48rem !default;           // 480px (was 30rem)
+$modal-lg-width: 80rem !default;           // 800px (was 50rem)
+$modal-xl-width: 112rem !default;          // 1120px (was 70rem)
+$modal-xxl-width: 144rem !default;         // 1440px (was 90rem)
+$modal-fw-margin: 1.6rem !default;         // 16px (was 1rem)
+$modal-border-radius: 4px !default;
+$modal-close-font-size: $font-size-lg !default;
+$modal-title-font-size: $font-size-lg !default;
+$modal-box-shadow: 0 0.4rem $spacing-sm rgba(0, 0, 0, 0.1) !default;
+$modal-close-size: 4rem !default;            // 40px (was 2.5rem)
+$modal-body-scrollable-max-height: 60vh !default;
+$modal-mobile-margin: $spacing-sm !default;
+$modal-mobile-max-height: 95vh !default;
+$modal-header-hover-overlay: rgba(255, 255, 255, 0.1) !default;
+$modal-close-hover-opacity: $opacity-hover !default;
+$modal-close-border-width: $border-width-base !default;
+
+// ============================================================================
+// PROFILE PANEL SYSTEM
+// ============================================================================
+$profile-panel-width: 20vw !default;
+$profile-panel-max-width: 48rem !default;  // 480px (was 30rem)
+$profile-panel-width-fixed: 320px !default;
+$profile-panel-toggle-size: 40px !default;
+$profile-panel-toggle-size-open: 45px !default;
+$profile-avatar-size: 6.4rem !default;       // 64px (was 4rem)
+$profile-close-size: 3.2rem !default;        // 32px (was 2rem)
+$profile-nav-icon-width: $sidebar-icon-size !default;
+$profile-section-gap: $spacing-xl !default;
+$profile-overlay-bg: rgba(0, 0, 0, 0.3) !default;
+$profile-button-padding-v: $spacing-sm !default;
+$profile-button-padding-h: $spacing-md !default;
+$profile-role-letter-spacing: 0.5px !default;
+$profile-panel-mobile-max-width: 40rem !default;  // 400px (was 25rem)
+
+// ============================================================================
+// CARD SYSTEM
+// ============================================================================
+$card-body-padding: 1.6rem !default;       // 16px (was 1rem)
+$card-header-padding-v: 0.8rem !default;   // 8px (was 0.5rem)
+$card-header-padding-h: 1.6rem !default;   // 16px (was 1rem)
+$card-header-min-height: 5rem !default;    // 50px - consistent height with/without buttons
+$card-footer-padding-v: 1.2rem !default;   // 12px (was 0.75rem)
+$card-footer-padding-h: 1.6rem !default;   // 16px (was 1rem)
+$card-grid-min-width: 280px !default;
+$card-stat-padding-v: $spacing-lg !default;
+$card-stat-padding-h: $spacing-base !default;
+
+// ============================================================================
+// TABLE SYSTEM
+// ============================================================================
+$table-padding-base-v: 0.5rem !default;    // 5px (was 0.3rem ~ 4.8px)
+$table-padding-base-h: 0.8rem !default;    // 8px (was 0.5rem)
+$table-spacing-2x-multiplier: 2 !default;
+$table-spacing-3x-multiplier: 3 !default;
+
+// Virtual table (for large datasets)
+$virtual-table-cell-padding-v: 0.5rem !default;  // 5px (was 0.3rem)
+$virtual-table-cell-padding-h: 0.8rem !default;  // 8px (was 0.5rem)
+
+// Responsive table system
+$table-responsive-breakpoint: $mobile-breakpoint !default;
+$table-responsive-card-margin: $spacing-base !default;
+$table-responsive-card-padding: $spacing-md !default;
+$table-responsive-label-width: 40% !default;
+$table-responsive-label-font-weight: $font-weight-semibold !default;
+
+// ============================================================================
+// FORM SYSTEM
+// ============================================================================
+$form-scale: 0.8rem !default;              // 8px (was 0.5rem)
+$form-group-margin-bottom: $spacing-sm !default;
+$form-label-margin-bottom: 0.3rem !default;   // ~3px (was 0.2rem)
+$form-help-margin-top: $spacing-xs !default;
+$input-padding-v: $spacing-sm !default;       // 0.8rem = 8px
+$input-padding-xs-v: 0.6rem !default;         // 6px
+$input-padding-h: $spacing-sm !default;       // 0.8rem = 8px
+$select-padding-v: 0.7rem !default;           // 7px
+$select-padding-h: 0.5rem !default;           // 5px - aligns options with inputs
+$textarea-min-height: 9.6rem !default;        // 96px (was 6rem)
+$input-focus-ring-opacity: 0.1 !default;
+$input-focus-border-color: $accent-color !default;
+$select-focus-border-color: $accent-color !default;
+$textarea-focus-border-color: $accent-color !default;
+$input-group-prepend-bg: $primary-bg !default;
+$input-group-prepend-text: $text-secondary !default;
+$input-group-append-bg: $primary-bg !default;
+$input-group-append-text: $text-secondary !default;
+$checkbox-margin-top: 0.2rem !default;        // 2px (was 0.125rem)
+$checkbox-size-xs: 1.2rem !default;           // 12px (was 0.75rem)
+$checkbox-size-sm: 1.4rem !default;           // 14px (was 0.875rem)
+$checkbox-size: 1.6rem !default;              // 16px (was 1rem)
+$checkbox-size-lg: 2rem !default;             // 20px (was 1.25rem)
+$checkbox-size-xl: 2.4rem !default;           // 24px (was 1.5rem)
+$form-group-margin-compact: 1.2rem !default;  // 12px (was 0.75rem)
+
+// Custom checkbox appearance (tri-state support)
+$checkbox-border-radius: $border-radius !default;         // Match input border-radius
+$checkbox-border-width: $border-width-base !default;      // 1px
+$checkbox-border-color: $border-color !default;           // Default border
+$checkbox-border-color-hover: $accent-color !default;     // Hover border
+$checkbox-border-color-checked: $accent-color !default;   // Checked border
+$checkbox-bg: $card-bg !default;                          // Unchecked background
+$checkbox-bg-checked: $accent-color !default;             // Checked background
+$checkbox-bg-indeterminate: $accent-color !default;       // Indeterminate background
+$checkbox-checkmark-color: white !default;                // Checkmark/dash color
+$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25) !default;
+$checkbox-transition: $transition-fast !default;
+
+// ============================================================================
+// MULTISELECT SYSTEM
+// ============================================================================
+$multiselect-input-padding-v: $input-padding-v !default;
+$multiselect-input-padding-h: $input-padding-h !default;
+$multiselect-dropdown-bg: $card-bg !default;
+$multiselect-dropdown-border: $border-color !default;
+$multiselect-dropdown-text: $text-primary !default;
+$multiselect-dropdown-shadow: $shadow-lg !default;
+$multiselect-dropdown-max-height: 32rem !default;  // 320px (was 20rem)
+$multiselect-hint-bg: $primary-bg !default;
+$multiselect-hint-border: $border-color !default;
+$multiselect-hint-padding: $spacing-sm !default;
+$multiselect-option-padding-v: $spacing-sm !default;
+$multiselect-option-padding-h: $spacing-md !default;
+$multiselect-option-hover-bg: $primary-bg !default;
+$multiselect-pill-bg: $accent-light !default;
+$multiselect-pill-border: $accent-color !default;
+$multiselect-pill-padding: $spacing-xs $spacing-sm !default;
+$multiselect-pill-gap: $spacing-xs !default;
+$multiselect-selected-popover-width: 32rem !default;  // 320px (was 20rem)
+
+// ============================================================================
+// ALERT SYSTEM
+// ============================================================================
+$alert-padding-v: $card-footer-padding-v !default;
+$alert-padding-h: $card-footer-padding-h !default;
+$alert-dismissible-padding-right: 4.8rem !default;   // 48px (was 3rem)
+$alert-close-opacity: $opacity-muted !default;
+$alert-icon-margin: $spacing-sm !default;
+$alert-list-padding-left: $spacing-lg !default;
+$alert-list-item-margin-top: $card-footer-padding-v !default;
+
+// Alert colors
+$alert-success-bg: $success-bg-subtle !default;
+$alert-success-border: $success-border !default;
+$alert-success-text: $success-bg !default;
+
+$alert-danger-bg: $danger-bg-subtle !default;
+$alert-danger-border: $danger-border !default;
+$alert-danger-text: $danger-bg !default;
+$alert-danger-text-transform: none !default;
+
+$alert-warning-bg: $warning-bg-subtle !default;
+$alert-warning-border: $warning-border !default;
+$alert-warning-text: $warning-bg !default;
+
+$alert-info-bg: $info-bg-subtle !default;
+$alert-info-border: $info-border !default;
+$alert-info-text: $info-bg !default;
+
+// ============================================================================
+// STATS SYSTEM
+// ============================================================================
+$stat-icon-size: 4.8rem !default;          // 48px (was 3rem)
+$stat-square-min-size: 12.8rem !default;   // 128px (was 8rem)
+$stat-label-letter-spacing: 0.05em !default;
+$stat-change-margin-bottom: 0.4rem !default; // 4px (was 0.25rem)
+$stat-number-margin-bottom: $spacing-xs !default;
+$stat-symbol-opacity: $opacity-shadow !default;
+
+// Stat square clamp values (10px base)
+$stat-square-number-min: 4.8rem !default;    // 48px (was 3rem)
+$stat-square-number-scale: 8vw !default;
+$stat-square-number-max: 7.2rem !default;    // 72px (was 4.5rem)
+$stat-square-symbol-min: 6.4rem !default;    // 64px (was 4rem)
+$stat-square-symbol-scale: 10vw !default;
+$stat-square-symbol-max: 9.6rem !default;    // 96px (was 6rem)
+
+// Stat shadow values
+$stat-text-shadow-1-y: 4px !default;
+$stat-text-shadow-1-blur: 8px !default;
+$stat-text-shadow-2-y: 2px !default;
+$stat-text-shadow-2-blur: 4px !default;
+$stat-drop-shadow-y: 2px !default;
+$stat-drop-shadow-blur: 4px !default;
+
+// ============================================================================
+// DASHBOARD & CHARTS
+// ============================================================================
+$chart-height: 400px !default;
+$dashboard-grid-col-sm: 80px !default;
+$dashboard-grid-col-md: 100px !default;
+$dashboard-grid-col-lg: 120px !default;
+
+// ============================================================================
+// SPINNER/LOADER SYSTEM
+// ============================================================================
+$spinner-size: 1.6rem !default;            // 16px (was 1rem)
+$spinner-border-width: 2px !default;
+$loader-border-width: 3px !default;
+$loader-dot-size: 1.2rem !default;         // 12px (was 0.75rem)
+$loader-bar-width: $spacing-xs !default;
+$loader-bar-height: $spacing-lg !default;
+$loader-animation-opacity-min: $opacity-muted !default;
+$loader-overlay-bg: rgba(255, 255, 255, 0.8) !default;
+
+// Loader animation delays
+$loader-dots-delay-1: -0.32s !default;
+$loader-dots-delay-2: -0.16s !default;
+$loader-bars-delay-1: -1.2s !default;
+$loader-bars-delay-2: -1.1s !default;
+$loader-bars-delay-3: -1.0s !default;
+$loader-bars-delay-4: -0.9s !default;
+$loader-bars-delay-5: -0.8s !default;
+
+// Loader animation properties
+$loader-pulse-duration: 1.2s !default;
+$loader-pulse-easing: cubic-bezier(0.5, 0, 0.5, 1) !default;
+
+// ============================================================================
+// TABS SYSTEM
+// ============================================================================
+$tabs-margin-bottom: $spacing-sm !default;
+$tabs-panel-padding-top: $spacing-sm !default;
+$tabs-vertical-icon-size: $sidebar-icon-size !default;
+$tabs-vertical-item-gap: $sidebar-item-gap !default;
+$tabs-pill-hover-opacity: 0.1 !default;
+$tabs-pill-border-opacity: 0.3 !default;
+$tabs-boxed-hover-opacity: 0.1 !default;
+$tabs-vertical-hover-opacity: 0.05 !default;
+$tabs-vertical-active-opacity: 0.1 !default;
+$tabs-scroll-btn-width: 3.2rem !default;   // 32px (was 2rem)
+$tabs-scroll-gradient-opacity: 0.95 !default;
+$tabs-scroll-hover-gradient-opacity: 0.8 !default;
+
+// ============================================================================
+// TOAST SYSTEM
+// ============================================================================
+$toast-min-width: 32rem !default;            // 320px (was 20rem)
+$toast-max-width: 40rem !default;            // 400px (was 25rem)
+$toast-padding-v: $spacing-md !default;
+$toast-padding-h: $spacing-md !default;
+$toast-icon-size: 3.2rem !default;           // 32px (was 2rem)
+$toast-close-size: 2.4rem !default;          // 24px (was 1.5rem)
+$toast-progress-height: 3px !default;
+
+// ============================================================================
+// TOOLTIP SYSTEM
+// ============================================================================
+$tooltip-arrow-size: 5px !default;
+$tooltip-distance: 8px !default;
+$tooltip-offset: 4px !default;
+$tooltip-max-width: 24rem !default;          // 240px (was 15rem)
+$tooltip-multiline-max-width: 32rem !default;  // 320px (was 20rem)
+$tooltip-multiline-width: 32rem !default;    // 320px (was 20rem)
+$tooltip-arrow-offset: 2px !default;
+$tooltip-z-index: $z-index-tooltip !default;
+
+// ============================================================================
+// POPOVER SYSTEM
+// ============================================================================
+$popover-min-width: 25.6rem !default;      // 256px (was 16rem)
+$popover-max-width: 32rem !default;        // 320px (was 20rem)
+$popover-arrow-size: 6px !default;
+$popover-distance: 8px !default;
+$popover-trigger-size: 2rem !default;        // 20px (was 1.25rem)
+$popover-close-size: $spacing-lg !default;
+$popover-header-padding-v: $spacing-sm !default;
+$popover-header-padding-h: $spacing-sm !default;
+$popover-header-padding-right: 0.3rem !default;  // ~3px (was 0.2rem)
+$popover-header-padding: $popover-header-padding-v $popover-header-padding-right $popover-header-padding-v $popover-header-padding-h !default;
+$popover-header-border: $border-width-base solid $border-color !default;
+$popover-header-border-radius: $border-radius $border-radius 0 0 !default;
+$popover-title-font-size: $font-size-lg !default;
+$popover-sm-min-width: 19.2rem !default;     // 192px (was 12rem)
+$popover-sm-max-width: 25.6rem !default;     // 256px (was 16rem)
+$popover-lg-min-width: 32rem !default;       // 320px (was 20rem)
+$popover-lg-max-width: 44.8rem !default;     // 448px (was 28rem)
+$popover-shift-offset: 3.2rem !default;      // 32px (was 2rem)
+$popover-z-index: $z-index-popover !default;
+
+// Popover code element styling (10px base)
+$popover-code-padding-v: 0.2rem !default;    // 2px (was 0.125rem)
+$popover-code-padding-h: 0.4rem !default;    // 4px (was 0.25rem)
+$popover-code-font-scale: 0.9em !default;
+
+// ============================================================================
+// COMMAND PALETTE SYSTEM
+// ============================================================================
+$command-palette-width: 60.8rem !default;    // 608px (was 38rem)
+$command-palette-offset-top: 12.8rem !default;  // 128px (was 8rem)
+$command-palette-border-radius: $border-radius !default;
+$command-palette-backdrop-bg: rgba(0, 0, 0, 0.5) !default;
+$command-palette-backdrop-blur: 4px !default;
+$command-palette-shadow: 0 1.6rem 4.8rem rgba(0, 0, 0, 0.3) !default;  // 16px 48px (was 1rem 3rem)
+$command-palette-input-padding-v: $input-padding-v !default;
+$command-palette-input-padding-h: $input-padding-h !default;
+$command-palette-input-font-size: $font-size-base !default;
+$command-palette-results-max-height: 38.4rem !default;  // 384px (was 24rem)
+$command-palette-empty-padding-v: $spacing-2xl !default;
+$command-palette-item-padding-v: $spacing-sm !default;
+$command-palette-item-hover-bg: rgba($accent-color, 0.05) !default;
+$command-palette-item-active-bg: rgba($accent-color, 0.1) !default;
+$command-palette-item-icon-size: 3.2rem !default;  // 32px (was 2rem)
+$command-palette-highlight-bg: rgba($accent-color, 0.2) !default;
+$command-palette-highlight-text: $accent-color !default;
+
+// ============================================================================
+// SETTINGS PANEL SYSTEM
+// ============================================================================
+$settings-panel-top: 15vh !default;
+$settings-panel-height: 70vh !default;
+$settings-panel-min-height: 400px !default;
+$settings-panel-vertical-clearance: 100px !default;
+$settings-panel-hover-offset: 5px !default;
+$settings-panel-transition-duration: 0.3s !default;
+$settings-panel-transition-easing: ease !default;
+
+// ============================================================================
+// PAGER SYSTEM
+// ============================================================================
+$pager-input-width: 6.4rem !default;         // 64px (was 4rem)
+$pager-controls-gap: $spacing-xs !default;
+$pager-button-margin: $spacing-base !default;
+
+// ============================================================================
+// TIMELINE SYSTEM
+// ============================================================================
+
+// Timeline - Simple variant (10px base)
+$timeline-simple-line-width: 1px !default;
+$timeline-simple-margin-left: 10px !default;
+$timeline-simple-padding-left: 20px !default;
+$timeline-simple-dot-size: 15px !default;
+$timeline-simple-dot-border: 1px !default;
+$timeline-simple-dot-offset: -30px !default;
+$timeline-simple-dot-shadow-offset-x: 3px !default;
+$timeline-simple-dot-shadow-offset-y: 3px !default;
+$timeline-simple-dot-shadow-blur: 0 !default;
+$timeline-simple-dot-shadow-opacity: 0.3 !default;
+$timeline-simple-content-margin-top: 0.6rem !default;  // 6px (was 0.4rem)
+$timeline-simple-scroll-container-max-height: 400px !default;
+$timeline-simple-scroll-loader-min-height: 60px !default;
+$timeline-simple-load-more-margin-top: 2.4rem !default;  // 24px (was 1.5rem)
+
+// Timeline Block - Alternating variant
+$timeline-block-max-width: 1140px !default;
+$timeline-block-padding: $spacing-base 0 !default;
+$timeline-block-line-width: $border-width-medium !default;
+$timeline-block-item-width: 50% !default;
+$timeline-block-item-padding: $spacing-base $spacing-xl !default;
+$timeline-block-item-padding-left-odd: 0rem !default;
+$timeline-block-item-padding-right-even: 0rem !default;
+$timeline-block-content-padding-v: $spacing-xl !default;
+$timeline-block-content-padding-h: $spacing-xl !default;
+$timeline-block-content-padding-extended: calc($spacing-xl * 2 + 40px) !default;
+$timeline-block-content-border-radius: 500px !default;
+$timeline-block-dot-size: 16px !default;
+$timeline-block-dot-border: 2px !default;
+$timeline-block-dot-top-offset: calc(50% - 8px) !default;
+$timeline-block-dot-horizontal-offset: -8px !default;
+$timeline-block-connector-width: 50px !default;
+$timeline-block-connector-height: 2px !default;
+$timeline-block-connector-top-offset: calc(50% - 1px) !default;
+$timeline-block-connector-horizontal-offset: 8px !default;
+$timeline-block-icon-size: 40px !default;
+$timeline-block-icon-border: 2px !default;
+$timeline-block-icon-top-offset: calc(50% - 20px) !default;
+$timeline-block-date-top-offset: calc(50% - 8px) !default;
+$timeline-block-date-offset: -75px !default;
+$timeline-block-date-letter-spacing: 1px !default;
+$timeline-block-icon-offset-odd: 56px !default;
+$timeline-block-icon-offset-even: 56px !default;
+$timeline-block-responsive-breakpoint: 767px !default;
+$timeline-block-responsive-line-left: 90px !default;
+$timeline-block-responsive-padding-left: 120px !default;
+$timeline-block-responsive-padding-right: $spacing-xl !default;
+$timeline-block-responsive-dot-left: 82px !default;
+$timeline-block-responsive-connector-left: 100px !default;
+$timeline-block-responsive-date-left: 15px !default;
+$timeline-block-responsive-icon-left: 146px !default;
+
+// Timeline - Feed variant (10px base)
+$timeline-feed-gap: $spacing-base !default;
+$timeline-feed-item-padding-bottom: $spacing-sm !default;
+$timeline-feed-border-left: 3px !default;
+$timeline-feed-padding-left: 40px !default;
+$timeline-feed-icon-size: 40px !default;
+$timeline-feed-icon-margin-left: -52px !default;
+$timeline-feed-icon-box-shadow-width: 6px !default;
+$timeline-feed-avatar-size: 28px !default;
+$timeline-feed-avatar-margin-right: $spacing-xs !default;
+$timeline-feed-comment-margin-top: $spacing-sm !default;
+$timeline-feed-comment-padding: $spacing-base !default;
+$timeline-feed-date-icon-size: $spacing-base !default;
+$timeline-feed-date-label-font-size: $font-size-sm !default;
+$timeline-feed-date-label-letter-spacing: 0.5px !default;
+$timeline-feed-date-margin-bottom: $spacing-sm !default;
+$timeline-feed-time-width: 50px !default;
+$timeline-feed-time-font-size: $font-size-xs !default;
+$timeline-feed-time-padding-top: 6px !default;
+$timeline-feed-scroll-container-max-height: 400px !default;

package/src/scss/variables/_index.scss

@@ -0,0 +1,13 @@
+// ============================================================================
+// VARIABLES INDEX
+// Central import point for all variable modules
+// ============================================================================
+
+// Core variable modules (order matters for dependencies)
+@forward 'layout';
+@forward 'typography';
+@forward 'spacing';
+@forward 'colors';
+@forward 'system';
+@forward 'components';
+@forward 'base';

package/src/scss/variables/_layout.scss

@@ -0,0 +1,65 @@
+// ============================================================================
+// LAYOUT VARIABLES
+// Dimensions, containers, breakpoints, and structural measurements
+// ============================================================================
+
+// NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
+
+// Layout dimensions
+$header-height: 4.8rem !default;           // 48px (was 3rem)
+$footer-height: $header-height !default;   // Same as header
+$sidebar-width: 28.8rem !default;          // 288px (was 18rem)
+$sidebar-max-width: 40rem !default;        // 400px (was 25rem)
+$sidebar-collapsed-width: 6.4rem !default; // 64px (was 4rem)
+$sidebar-padding: 0.8rem 1.6rem !default;  // 8px 16px (was 0.5rem 1rem)
+
+// Layout container widths
+$layout-container-sm: 76.8rem !default;    // 768px (was 48rem)
+$layout-container-md: 102.4rem !default;   // 1024px (was 64rem)
+$layout-container-lg: 128rem !default;     // 1280px (was 80rem)
+$layout-container-xl: 160rem !default;     // 1600px (was 100rem)
+$layout-container-2xl: 192rem !default;    // 1920px (was 120rem)
+
+// Icon system variables (for any icon pack)
+$sidebar-icon-size: 2.4rem !default;       // 24px (was 1.5rem)
+$sidebar-item-gap: 1.2rem !default;        // 12px (was 0.75rem)
+$sidebar-submenu-indent: 4rem !default;    // 40px (was 2.5rem)
+
+// Burger menu
+$burger-width: 2.4rem !default;            // 24px (was 1.5rem)
+$burger-height: 2.4rem !default;           // 24px (was 1.5rem)
+$burger-bar-height: 2px !default;
+$burger-bar-spacing: 4px !default;
+$burger-transform-offset: 3px !default;
+$burger-menu-margin-left: 0.3rem !default; // ~3px (was 0.2rem)
+
+// Header brand
+$header-brand-padding-left: 2.1rem !default; // ~21px (was 1.3rem)
+
+// Responsive breakpoints
+$mobile-breakpoint: 768px !default;
+$tablet-breakpoint: 1024px !default;
+$tablet-breakpoint-min: 769px !default;
+$sidebar-width-tablet: 16rem !default;     // 160px (was 10rem)
+
+// Scrollbar
+$scrollbar-width: 10px !default;
+$scrollbar-border-radius: 5px !default;
+
+// Border radius
+$border-radius-sm: 2px !default;
+$border-radius: 4px !default;
+$border-radius-lg: 8px !default;
+
+// Layout system
+$sidebar-submenu-indent-multiplier: 1.3 !default;
+$mobile-backdrop-bg: rgba(0, 0, 0, 0.5) !default;
+$mobile-sidebar-width: 90vw !default;
+
+// Utility spacing (for specific use cases not covered by main spacing system)
+$section-margin-v: 3.2rem !default;        // 32px (was 2rem)
+$section-margin-sm: 2.4rem !default;       // 24px (was 1.5rem)
+$submenu-max-height: 500px !default;
+
+// Grid system (depends on spacing, but layout-related)
+$hover-lift-offset: -2px !default;

package/src/scss/variables/_spacing.scss

@@ -0,0 +1,66 @@
+// ============================================================================
+// SPACING VARIABLES
+// Spacing system, border widths, grid configuration
+// ============================================================================
+
+// NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
+
+// Spacing system (used for padding, margin, gap) - 10px base
+$spacing-xs: 0.4rem !default;   // 4px (was 0.25rem)
+$spacing-sm: 0.8rem !default;   // 8px (was 0.5rem)
+$spacing-md: 1.2rem !default;   // 12px (was 0.75rem)
+$spacing-base: 1.6rem !default; // 16px (was 1rem)
+$spacing-lg: 2.4rem !default;   // 24px (was 1.5rem)
+$spacing-xl: 3.2rem !default;   // 32px (was 2rem)
+$spacing-2xl: 4.8rem !default;  // 48px (was 3rem)
+
+// Border widths
+$border-width-thin: 1px !default;
+$border-width-base: 1px !default;
+$border-width-medium: 2px !default;
+$border-width-thick: 3px !default;
+
+// Grid system
+$grid-gutter-base: $spacing-sm !default;
+$grid-gutter-sm: $spacing-xs !default;
+$grid-gutter-md: $spacing-md !default;
+$grid-gutter-lg: $spacing-base !default;
+$grid-breakpoints: (
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+// Standard HTML element spacing
+// Headings
+$heading-margin-top: $spacing-lg !default;
+$heading-margin-bottom: $spacing-sm !default;
+
+// Paragraphs
+$paragraph-margin-top: 0 !default;
+$paragraph-margin-bottom: $spacing-base !default;
+
+// Lists
+$list-margin-top: 0 !default;
+$list-margin-bottom: $spacing-base !default;
+$list-padding-left: $spacing-xl !default;
+$list-item-margin-bottom: $spacing-xs !default;
+
+// Blockquote
+$blockquote-margin-top: $spacing-base !default;
+$blockquote-margin-bottom: $spacing-base !default;
+$blockquote-padding-left: $spacing-lg !default;
+
+// Pre/Code blocks
+$pre-margin-top: $spacing-base !default;
+$pre-margin-bottom: $spacing-base !default;
+$pre-padding: $spacing-base !default;
+
+// Horizontal rule
+$hr-margin-top: $spacing-lg !default;
+$hr-margin-bottom: $spacing-lg !default;
+
+// Figure
+$figure-margin-top: $spacing-base !default;
+$figure-margin-bottom: $spacing-base !default;