@keenmate/pure-admin-core 1.0.0 → 1.1.0

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);

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)

package/src/scss/themes/_dark-base.scss

@@ -1,207 +0,0 @@
-/* Dark Theme Base Template - Reusable mixin for dark theme variants */
-
-@mixin dark-theme-base(
-  $theme-name,
-  $primary-bg,
-  $content-bg,
-  $header-bg,
-  $sidebar-bg,
-  $footer-bg,
-  $border-color,
-  $text-primary,
-  $text-secondary,
-  $accent-color,
-  $accent-hover,
-  $accent-light,
-  $card-bg,
-  $card-header-bg,
-  $card-footer-bg,
-  $card-tabs-bg,
-  $input-bg,
-  $table-bg,
-  $table-header-bg,
-  $table-hover-bg,
-  $table-stripe,
-  $btn-colors,
-  $modal-overlay-bg,
-  $modal-content-bg
-) {
-  [data-theme="#{$theme-name}"] {
-    // Layout dimensions (same across themes)
-    --header-height: 2.5rem;
-    --footer-height: 2rem;
-    --sidebar-width: 12rem;
-
-    // Theme colors
-    --primary-bg: #{$primary-bg};
-    --content-background-color: #{$content-bg};
-    --header-bg: #{$header-bg};
-    --sidebar-bg: #{$sidebar-bg};
-    --footer-bg: #{$footer-bg};
-    --border-color: #{$border-color};
-    --text-primary: #{$text-primary};
-    --text-secondary: #{$text-secondary};
-    --accent-color: #{$accent-color};
-    --accent-hover: #{$accent-hover};
-    --accent-light: #{$accent-light};
-
-    // Card colors
-    --card-bg: #{$card-bg};
-    --card-header-bg: #{$card-header-bg};
-    --card-footer-bg: #{$card-footer-bg};
-    --card-tabs-bg: #{$card-tabs-bg};
-
-    // Input colors
-    --input-bg: #{$input-bg};
-    --input-border: var(--border-color);
-    --input-text: var(--text-primary);
-
-    // Table colors
-    --table-bg: #{$table-bg};
-    --table-header-bg: #{$table-header-bg};
-    --table-hover-bg: #{$table-hover-bg};
-    --table-stripe: #{$table-stripe};
-
-    // Button colors
-    --btn-primary-bg: #{map-get($btn-colors, primary)};
-    --btn-primary-bg-hover: #{map-get($btn-colors, primary-hover)};
-    --btn-secondary-bg: #{map-get($btn-colors, secondary)};
-    --btn-secondary-bg-hover: #{map-get($btn-colors, secondary-hover)};
-    --btn-success-bg: #{map-get($btn-colors, success)};
-    --btn-success-bg-hover: #{map-get($btn-colors, success-hover)};
-    --btn-warning-bg: #{map-get($btn-colors, warning)};
-    --btn-warning-text: #ffffff;
-    --btn-danger-bg: #{map-get($btn-colors, danger)};
-    --btn-danger-bg-hover: #{map-get($btn-colors, danger-hover)};
-    --btn-info-bg: #{map-get($btn-colors, info)};
-    --btn-info-bg-hover: #{map-get($btn-colors, info-hover)};
-    --btn-light-bg: #{map-get($btn-colors, light)};
-    --btn-light-text: #{map-get($btn-colors, light-text)};
-    --btn-light-bg-hover: #{map-get($btn-colors, light-hover)};
-    --btn-dark-bg: #{map-get($btn-colors, dark)};
-    --btn-dark-bg-hover: #{map-get($btn-colors, dark-hover)};
-
-    // Modal colors
-    --modal-overlay-bg: #{$modal-overlay-bg};
-    --modal-content-bg: #{$modal-content-bg};
-  }
-
-  [data-theme="#{$theme-name}"] {
-    body {
-      background-color: var(--content-background-color);
-    }
-
-    .admin-content {
-      background-color: var(--content-background-color);
-    }
-
-    .content-section {
-      background: #{$card-bg};
-      border: 1px solid var(--border-color);
-    }
-
-    .long-content .content-block {
-      background: #{$card-bg};
-      border: 1px solid var(--border-color);
-    }
-
-    .pa-card {
-      background: var(--card-bg);
-      border-color: var(--border-color);
-
-      &__header {
-        background: var(--card-header-bg);
-        border-color: var(--border-color);
-      }
-
-      &__footer {
-        background: var(--card-footer-bg);
-        border-color: var(--border-color);
-      }
-    }
-
-    .pa-input,
-    .pa-select,
-    .pa-textarea {
-      background-color: var(--input-bg);
-      border-color: var(--border-color);
-      color: var(--text-primary);
-
-      &:focus {
-        border-color: var(--accent-color);
-        box-shadow: 0 0 0 3px var(--accent-light);
-      }
-    }
-
-    /* Table styling - comprehensive overrides */
-    .pa-table {
-      background-color: var(--table-bg);
-      color: var(--text-primary);
-
-      th {
-        background-color: var(--table-header-bg);
-        color: var(--text-primary);
-        border-color: var(--border-color);
-      }
-
-      td {
-        background-color: var(--table-bg);
-        color: var(--text-primary);
-        border-color: var(--border-color);
-      }
-
-      tr {
-        background-color: var(--table-bg);
-
-        &:hover {
-          background-color: var(--table-hover-bg);
-        }
-      }
-
-      tbody {
-        tr {
-          background-color: var(--table-bg) !important;
-
-          &:hover {
-            background-color: var(--table-hover-bg) !important;
-          }
-        }
-
-        td {
-          background-color: transparent !important;
-          color: var(--text-primary);
-        }
-      }
-    }
-
-    /* Pure CSS table overrides */
-    .pure-table {
-      background-color: var(--table-bg);
-      color: var(--text-primary);
-
-      td,
-      th {
-        background-color: var(--table-bg);
-        color: var(--text-primary);
-        border-color: var(--border-color);
-      }
-
-      thead th {
-        background-color: var(--table-header-bg);
-      }
-
-      &-striped tr:nth-child(2n-1) td {
-        background-color: var(--table-stripe);
-      }
-
-      tr:hover td {
-        background-color: var(--table-hover-bg);
-      }
-    }
-
-    .component-card {
-      background: var(--card-bg);
-      border-color: var(--border-color);
-    }
-  }
-}