@keenmate/pure-css 1.0.0-rc01

package/src/scss/variables/_index.scss

@@ -0,0 +1,23 @@
+// ============================================================================
+// VARIABLES INDEX
+// Central import point for all variable modules
+// ============================================================================
+
+// IMPORTANT: Order matters for dependencies!
+// 1. Base variables are the SOURCE OF TRUTH (standalone, no imports)
+// 2. All other modules can import from base and derive their values
+//
+// NOTE: We use @import (not @forward) to ensure variables share the global
+// scope. This allows themes to set variables BEFORE importing, and the
+// !default flags will skip already-defined variables.
+
+// Base variables FIRST - single source of truth for theming
+@import 'base';
+
+// Derived framework variables (can use base values)
+@import 'typography';
+@import 'spacing';
+@import 'colors';
+@import 'layout';
+@import 'system';
+@import 'components';

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: 6px !default;
+$scrollbar-border-radius: 3px !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,78 @@
+// ============================================================================
+// 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)
+
+// Semantic spacers map (for utility class generation)
+$semantic-spacers: (
+  '0': 0,
+  'xs': $spacing-xs,
+  'sm': $spacing-sm,
+  'md': $spacing-md,
+  'base': $spacing-base,
+  'lg': $spacing-lg,
+  'xl': $spacing-xl,
+  '2xl': $spacing-2xl
+) !default;
+
+// 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;

package/src/scss/variables/_system.scss

@@ -0,0 +1,89 @@
+// ============================================================================
+// SYSTEM VARIABLES
+// Z-index, opacity, transitions, animations, shadows
+// ============================================================================
+
+// Theme color-scheme signal to the browser. Drives native UA elements
+// (scrollbars, form controls) and the `light-dark()` CSS function. Themes
+// override BEFORE `@import variables/index`. Values: `light`, `dark`,
+// `light dark` (let OS preference decide), or `only light` / `only dark`
+// to ignore OS preference. Per-mode overrides (e.g. `color-scheme: dark;`
+// inside a `.pa-mode-dark` block) take precedence via the cascade.
+$theme-color-scheme: light !default;
+
+// Z-index scale (increments of 1000 for easy adjustment)
+$z-index-base: 0 !default;
+$z-index-content: 1000 !default;
+$z-index-sidebar: 2000 !default;
+$z-index-sidebar-fixed: 3000 !default;
+$z-index-detail-panel-card: 3500 !default;  // Card overlay detail panel (below header)
+$z-index-header: 4000 !default;
+$z-index-profile-panel: 5000 !default;
+$z-index-modal-backdrop: 6000 !default;
+$z-index-modal: 7000 !default;
+$z-index-toast: 8000 !default;
+$z-index-tooltip: 9000 !default;
+
+// Additional z-index values
+$z-index-dropdown: 7500 !default;
+$z-index-popover: 7600 !default;
+$z-index-loader: 10 !default;
+$z-index-command-palette: 10500 !default;
+$z-index-settings-panel: 10000 !default;
+
+// Transitions & Animation
+$transition-speed: 1 !default;
+$transition-fast: calc(0.1s * $transition-speed) !default;
+$transition-normal: calc(0.15s * $transition-speed) !default;
+$transition-medium: calc(0.25s * $transition-speed) !default;
+$transition-slow: calc(0.3s * $transition-speed) !default;
+$easing-snappy: ease-out !default;
+$easing-smooth: ease !default;
+$easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
+
+// Opacity system
+$opacity-disabled: 0.65 !default;
+$opacity-muted: 0.5 !default;
+$opacity-hover: 0.8 !default;
+$opacity-light: 0.1 !default;
+$opacity-subtle: 0.08 !default;
+$opacity-border: 0.2 !default;
+$opacity-shadow: 0.12 !default;
+$opacity-shadow-md: 0.15 !default;
+
+// Component-specific opacities
+$alert-secondary-bg-opacity: 0.05 !default;
+$alert-light-bg-opacity: 0.03 !default;
+$card-tab-hover-opacity: 0.05 !default;
+$bg-pattern-opacity: 0.03 !default;
+$popover-code-bg-opacity: 0.1 !default;
+$modal-warning-hover-bg-opacity: $opacity-light !default;
+
+// Shadow system
+$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1) !default;
+$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1) !default;
+$shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15) !default;
+$shadow-xl: 0 0 60px rgba(0, 0, 0, 0.12) !default;
+$shadow-2xl: 0 0 80px rgba(0, 0, 0, 0.15) !default;
+$shadow-sidebar: -2px 2px 10px rgba(0, 0, 0, 0.1) !default;
+$shadow-sidebar-open: -5px 0 20px rgba(0, 0, 0, 0.1) !default;
+$shadow-profile-panel: -4px 0 20px rgba(0, 0, 0, 0.15) !default;
+
+// Focus outline
+$focus-outline-width: 2px !default;
+$focus-outline-offset: 2px !default;
+$focus-ring-width: 3px !default;
+
+// Background pattern (for body background)
+$bg-pattern-circle-1-x: 20% !default;
+$bg-pattern-circle-1-y: 80% !default;
+$bg-pattern-circle-2-x: 80% !default;
+$bg-pattern-circle-2-y: 20% !default;
+$bg-pattern-gradient-start: 0% !default;
+$bg-pattern-gradient-stop: 50% !default;
+
+// Animation
+$animation-spin-duration: 1s !default;
+$ripple-color: rgba(255, 255, 255, 0.3) !default;
+$ripple-transition-duration: 0.6s !default;
+$ripple-size: 300px !default;

package/src/scss/variables/_typography.scss

@@ -0,0 +1,37 @@
+// ============================================================================
+// TYPOGRAPHY VARIABLES
+// Font families, sizes, weights, and line heights
+// ============================================================================
+
+// NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
+
+// Font system (comprehensive system font stacks)
+$font-stack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
+$font-stack-serif: Georgia, "Times New Roman", Times, serif !default;
+$font-stack-mono: "Courier New", Courier, monospace !default;
+
+// Body font (derived from $base-font-family, themes override that)
+$body-font-family: $base-font-family !default;
+
+// Font sizes (all in rem for consistency) - 10px base
+$font-size-2xs: 1rem !default;    // 10px (was 0.625rem)
+$font-size-xs: 1.2rem !default;   // 12px (was 0.75rem)
+$font-size-sm: 1.4rem !default;   // 14px (was 0.875rem)
+$font-size-md: 1.5rem !default;   // 15px (was 0.9375rem)
+$font-size-base: 1.6rem !default; // 16px (was 1rem)
+$font-size-lg: 1.8rem !default;   // 18px (was 1.125rem)
+$font-size-xl: 2rem !default;     // 20px (was 1.25rem)
+$font-size-2xl: 2.4rem !default;  // 24px (was 1.5rem)
+$font-size-3xl: 2.8rem !default;  // 28px (was 1.75rem)
+$font-size-4xl: 3.2rem !default;  // 32px (was 2rem)
+
+// Line height
+$line-height-base: 1.5 !default;
+$line-height-tight: 1.2 !default;
+$line-height-relaxed: 1.8 !default;
+
+// Font weights
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;