@keenmate/pure-admin-core 1.0.0 → 1.1.1

package/src/scss/core-components/forms/_form-inputs.scss

@@ -12,7 +12,7 @@
   border-radius: $border-radius;
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color $transition-fast $easing-snappy;
 
   &:focus {
@@ -30,7 +30,7 @@
   border-radius: $border-radius;
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color $transition-fast $easing-snappy;
 
   &:focus {
@@ -47,7 +47,7 @@
   border-radius: $border-radius;
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color $transition-fast $easing-snappy;
   resize: vertical;
   min-height: $textarea-min-height;
@@ -59,7 +59,7 @@
   }
 
   &::placeholder {
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
   }
 }
 
@@ -92,6 +92,35 @@
   font-size: $font-size-lg;
 }
 
+// Textarea Sizes - height sets initial size, min-height prevents shrinking below that
+.pa-textarea--xs {
+  height: 4rem;
+  min-height: 4rem;
+  padding: $input-padding-xs-v $input-padding-h;
+  font-size: $font-size-xs;
+}
+
+.pa-textarea--sm {
+  height: 6rem;
+  min-height: 6rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-sm;
+}
+
+.pa-textarea--lg {
+  height: 12rem;
+  min-height: 12rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-base;
+}
+
+.pa-textarea--xl {
+  height: 16rem;
+  min-height: 16rem;
+  padding: $input-padding-v $input-padding-h;
+  font-size: $font-size-lg;
+}
+
 // Dark mode: invert native date/time picker icons for visibility
 .pa-mode-dark {
   input[type="date"],

package/src/scss/core-components/forms/_form-layout.scss

@@ -31,7 +31,7 @@
     flex-shrink: 0;
     padding-top: $input-padding-v;
     margin-bottom: 0;
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
     font-weight: $font-weight-medium;
     font-size: $font-size-sm;
   }
@@ -51,7 +51,7 @@
       align-items: center;
       gap: $form-scale;
       margin-bottom: $form-label-margin-bottom;
-      color: var(--pa-text-primary);
+      color: var(--pa-text-color-1);
       font-weight: $font-weight-medium;
       font-size: $font-size-sm;
     }

package/src/scss/core-components/forms/_form-states.scss

@@ -77,7 +77,7 @@
   display: block;
   margin-top: $form-help-margin-top;
   font-size: $font-size-xs;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 
   &--error {
     color: var(--pa-danger-bg);
@@ -86,4 +86,30 @@
   &--success {
     color: var(--pa-success-bg);
   }
+
+  &--warning {
+    color: var(--pa-warning-bg);
+  }
+}
+
+// Theme Color Variants for Help Text (color-1 through color-9)
+@for $i from 1 through 9 {
+  .pa-form-help--color-#{$i} {
+    color: var(--pa-color-#{$i});
+  }
+}
+
+// Theme Color Variants for Inputs (color-1 through color-9)
+// These use theme-customizable colors from --pa-color-* CSS variables
+@for $i from 1 through 9 {
+  .pa-input--color-#{$i},
+  .pa-select--color-#{$i},
+  .pa-textarea--color-#{$i} {
+    border-color: var(--pa-color-#{$i});
+
+    &:focus {
+      border-color: var(--pa-color-#{$i});
+      box-shadow: 0 0 0 $focus-ring-width color-mix(in srgb, var(--pa-color-#{$i}) 25%, transparent);
+    }
+  }
 }

package/src/scss/core-components/forms/_input-wrapper.scss

@@ -28,7 +28,7 @@
     transform: translateY(-50%);
     background: transparent;
     border: none;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     cursor: pointer;
     padding: $spacing-xs;
     font-size: $font-size-base;

package/src/scss/core-components/forms/_query-editor.scss

@@ -31,7 +31,7 @@
     position: relative;
     z-index: 1;
     background: transparent;
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
   }
 
   &__field {
@@ -87,7 +87,7 @@
     &-type {
       margin-left: auto;
       font-size: $font-size-xs;
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       opacity: 0.7;
     }
   }
@@ -96,7 +96,7 @@
     padding: $spacing-xs $spacing-md;
     font-size: $font-size-xs;
     font-weight: $font-weight-medium;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     background-color: var(--pa-card-header-bg);
@@ -106,7 +106,7 @@
   &__empty {
     padding: $spacing-md;
     text-align: center;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     font-size: $font-size-sm;
   }
 }
@@ -120,7 +120,7 @@
   border-radius: $border-radius;
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   cursor: text;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -135,7 +135,7 @@
 
   &:empty::before {
     content: attr(data-placeholder);
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     opacity: 0.7;
     pointer-events: none;
   }
@@ -195,7 +195,7 @@
     font-family: $body-font-family;
     background: transparent;
     color: transparent;
-    caret-color: var(--pa-text-primary);
+    caret-color: var(--pa-text-color-1);
     resize: none;
     overflow: hidden;
     line-height: 1.5;
@@ -209,7 +209,7 @@
     }
 
     &::placeholder {
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       opacity: 0.7;
     }
   }
@@ -222,28 +222,28 @@
 
   &--field {
     background-color: rgba($accent-color, 0.15);
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
 
     &.pa-inline-query-token--invalid {
       background-color: rgba($danger-bg, 0.15);
-      color: var(--pa-text-primary);
+      color: var(--pa-text-color-1);
       text-decoration: wavy underline;
     }
   }
 
   &--operator {
-    background-color: rgba(var(--pa-text-secondary), 0.15);
-    color: var(--pa-text-primary);
+    background-color: rgba(var(--pa-text-color-2), 0.15);
+    color: var(--pa-text-color-1);
   }
 
   &--value {
     background-color: rgba($success-bg, 0.15);
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
   }
 
   &--keyword {
     background-color: rgba($warning-bg, 0.15);
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
     font-style: italic;
   }
 }
@@ -295,7 +295,7 @@
     &-type {
       display: block;
       font-size: $font-size-xs;
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       opacity: 0.7;
       line-height: 1.3;
     }
@@ -304,8 +304,8 @@
       flex-shrink: 0;
       font-size: $font-size-xs;
       padding: 0.2rem 0.6rem;
-      background-color: rgba(var(--pa-text-secondary), 0.1);
-      color: var(--pa-text-secondary);
+      background-color: rgba(var(--pa-text-color-2), 0.1);
+      color: var(--pa-text-color-2);
       border-radius: 0.4rem;
       font-family: $body-font-family;
     }

package/src/scss/core-components/layout/_layout-container.scss

@@ -14,7 +14,7 @@ body.pa-layout--sticky {
 .pa-layout {
   max-width: 100%;
   margin: $header-height auto 0;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   overflow: visible; // Allow tooltips to escape
   display: flex;
   flex-direction: column;

package/src/scss/core-components/layout/_navbar-elements.scss

@@ -128,7 +128,7 @@
       a {
         display: block;
         padding: $spacing-sm $spacing-base;
-        color: var(--pa-text-primary);
+        color: var(--pa-text-color-1);
         border-radius: 0;
         white-space: nowrap;
         text-decoration: none;

package/src/scss/core-components/layout/_sidebar.scss

@@ -4,16 +4,16 @@
    ======================================== */
 @use '../../variables' as *;
 
-// CSS variable for sidebar width (allows JS resize)
+// Local CSS variables for sidebar (runtime state, modified by JS for resize)
 :root {
-  --pa-sidebar-width: #{$sidebar-width};
-  --pa-sidebar-min-width: 18rem;
-  --pa-sidebar-max-width: 50rem;
+  --pa-local-sidebar-width: #{$sidebar-width};
+  --pa-local-sidebar-min-width: 18rem;
+  --pa-local-sidebar-max-width: 50rem;
 }
 
 // Sidebar layout element - width in :where() for low specificity (utility classes can override)
 :where(.pa-layout__sidebar) {
-  width: var(--pa-sidebar-width);
+  width: var(--pa-local-sidebar-width);
 }
 
 .pa-layout__sidebar {

package/src/scss/utilities.scss

@@ -2,6 +2,8 @@
 // Spacing utilities similar to Bootstrap/Tailwind
 // Based on rem units: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5
 
+@use './variables' as *;
+
 // Spacing scale
 $spacers: (
   0: 0,
@@ -129,6 +131,28 @@ $spacers: (
   margin-bottom: auto !important;
 }
 
+// Semantic margin utilities (using spacing variables)
+@each $name, $value in $semantic-spacers {
+  .m-#{$name} { margin: #{$value} !important; }
+  .mt-#{$name} { margin-top: #{$value} !important; }
+  .mr-#{$name} { margin-right: #{$value} !important; }
+  .mb-#{$name} { margin-bottom: #{$value} !important; }
+  .ml-#{$name} { margin-left: #{$value} !important; }
+  .mx-#{$name} { margin-left: #{$value} !important; margin-right: #{$value} !important; }
+  .my-#{$name} { margin-top: #{$value} !important; margin-bottom: #{$value} !important; }
+}
+
+// Semantic padding utilities (using spacing variables)
+@each $name, $value in $semantic-spacers {
+  .p-#{$name} { padding: #{$value} !important; }
+  .pt-#{$name} { padding-top: #{$value} !important; }
+  .pr-#{$name} { padding-right: #{$value} !important; }
+  .pb-#{$name} { padding-bottom: #{$value} !important; }
+  .pl-#{$name} { padding-left: #{$value} !important; }
+  .px-#{$name} { padding-left: #{$value} !important; padding-right: #{$value} !important; }
+  .py-#{$name} { padding-top: #{$value} !important; padding-bottom: #{$value} !important; }
+}
+
 // Display utilities
 .d-none {
   display: none !important;

package/src/scss/variables/_base.scss

@@ -33,20 +33,30 @@ $base-text-color-4: #a3b1bf !default;  // Quaternary text (lightest)
 $base-text-color-on-accent: #ffffff !default;  // Text on accent backgrounds
 
 // =============================================================================
-// SURFACE COLORS
-// Background colors for different surface levels
+// BACKGROUND COLORS
+// Semantic background colors for different purposes
 // =============================================================================
 
-$base-surface-1: #ffffff !default;     // Primary surface (cards, modals)
-$base-surface-2: #f8f9fa !default;     // Secondary surface (subtle backgrounds)
-$base-surface-3: #e9ecef !default;     // Tertiary surface (dividers, borders)
-$base-surface-inverse: #2c3e50 !default;  // Inverse surface (tooltips, dark elements)
+$base-main-bg: #ffffff !default;          // Primary background (cards, modals, content)
+$base-page-bg: #f8f9fa !default;          // Page background, subtle sections
+$base-subtle-bg: #e9ecef !default;        // Muted areas, dividers
+$base-inverse-bg: #2c3e50 !default;       // Inverse background (tooltips, dark elements)
 $base-overlay-bg: rgba(0, 0, 0, 0.5) !default;  // Modal/overlay background
 $base-shadow-color: rgba(0, 0, 0, 0.15) !default;  // Shadow color for elevation
-
-// Backward compatibility mappings
-$base-primary-bg: $base-surface-1 !default;
-$base-primary-bg-hover: color.adjust($base-primary-bg, $lightness: -5%) !default;
+$base-elevated-bg: #f5f5f5 !default;  // Header row, striped rows, elevated surfaces
+
+// Interactive state backgrounds
+$base-hover-bg: $base-subtle-bg !default;         // Hover state background
+$base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;  // Active/pressed state
+$base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
+
+// Legacy aliases (backward compatibility)
+$base-surface-1: $base-main-bg !default;
+$base-surface-2: $base-page-bg !default;
+$base-surface-3: $base-subtle-bg !default;
+$base-surface-inverse: $base-inverse-bg !default;
+$base-primary-bg: $base-main-bg !default;
+$base-primary-bg-hover: color.adjust($base-main-bg, $lightness: -5%) !default;
 
 // =============================================================================
 // BORDER COLORS

package/src/scss/variables/_colors.scss

@@ -5,18 +5,19 @@
 // ============================================================================
 
 @use 'sass:color';
-@use 'base' as *;
+// NOTE: Base variables are available in global scope via @import in _index.scss
+// No @use 'base' needed since we use @import for proper !default cascading
 
 // =============================================================================
 // LAYOUT COLORS (derived from base)
 // =============================================================================
 
-$primary-bg: $base-surface-2 !default;
-$bg-secondary: $base-surface-2 !default;
-$text-primary: $base-text-color-1 !default;
-$text-secondary: $base-text-color-2 !default;
+$main-bg: $base-page-bg !default;
+$page-bg: $base-page-bg !default;
+$subtle-bg: $base-main-bg !default;
+$text-color-1: $base-text-color-1 !default;
+$text-color-2: $base-text-color-2 !default;
 $border-color: $base-border-color !default;
-$content-background-color: $base-surface-1 !default;
 
 // Header colors
 $header-bg: $base-surface-1 !default;

package/src/scss/variables/_components.scss

@@ -3,12 +3,9 @@
 // Component-specific dimensions, paddings, and settings
 // ============================================================================
 
-@use 'base' as *;
-@use 'layout' as *;
-@use 'typography' as *;
-@use 'spacing' as *;
-@use 'colors' as *;
-@use 'system' as *;
+// NOTE: All base, layout, typography, spacing, colors, and system variables
+// are available in global scope via @import in _index.scss
+// No @use needed since we use @import for proper !default cascading
 
 // NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
 
@@ -229,9 +226,9 @@ $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: $secondary-bg !default;
-$input-group-prepend-text: $text-secondary !default;
+$input-group-prepend-text: $text-color-2 !default;
 $input-group-append-bg: $secondary-bg !default;
-$input-group-append-text: $text-secondary !default;
+$input-group-append-text: $text-color-2 !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)
@@ -260,15 +257,15 @@ $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-text: $text-color-1 !default;
 $multiselect-dropdown-shadow: $shadow-lg !default;
 $multiselect-dropdown-max-height: 32rem !default;  // 320px (was 20rem)
-$multiselect-hint-bg: $primary-bg !default;
+$multiselect-hint-bg: $main-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-option-hover-bg: $main-bg !default;
 $multiselect-pill-bg: $accent-light !default;
 $multiselect-pill-border: $accent-color !default;
 $multiselect-pill-padding: $spacing-xs $spacing-sm !default;

package/src/scss/variables/_index.scss

@@ -6,14 +6,18 @@
 // 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
-@forward 'base';
+@import 'base';
 
 // Derived framework variables (can use base values)
-@forward 'typography';
-@forward 'spacing';
-@forward 'colors';
-@forward 'layout';
-@forward 'system';
-@forward 'components';
+@import 'typography';
+@import 'spacing';
+@import 'colors';
+@import 'layout';
+@import 'system';
+@import 'components';

package/src/scss/variables/_spacing.scss

@@ -14,6 +14,18 @@ $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;

package/src/scss/variables/_typography.scss

@@ -10,8 +10,8 @@ $font-stack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxyge
 $font-stack-serif: Georgia, "Times New Roman", Times, serif !default;
 $font-stack-mono: "Courier New", Courier, monospace !default;
 
-// Body font (defaults to system, themes can override)
-$body-font-family: $font-stack-system !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)