@keenmate/pure-admin-core 1.0.0-rc06 → 1.1.0

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

package/src/scss/themes/audi-light.scss

@@ -1,341 +0,0 @@
-/* Pure Admin Visual - Audi Light Theme */
-/* Light version maintaining Audi's red accents and Fira Sans Condensed font */
-@use 'sass:color';
-
-// =============================================================================
-// THEME COLOR SLOTS (1-9) - Audi-inspired palette
-// =============================================================================
-$color-1: #bb0a30;  // Audi Red (classic)
-$color-2: #ff4444;  // Light Red
-$color-3: #ff6600;  // Orange (warning tone)
-$color-4: #d4af37;  // Gold (premium)
-$color-5: #00a0a0;  // Teal (contrast)
-$color-6: #0066cc;  // Blue (professional)
-$color-7: #8c8c8c;  // Silver (metallic)
-$color-8: #404040;  // Charcoal (neutral)
-$color-9: #6b3fa0;  // Purple (luxury)
-
-@import '../variables';
-
-// Audi Light theme configuration
-$sidebar-width: 29rem; // 290px (10px base)
-$border-radius: 1px;        // Keep Audi's sharp edges
-$border-radius-lg: 2px;
-
-// Audi Light color palette
-// Grays - light palette
-$audi-white: #ffffff;
-$audi-gray-50: #f8f9fa;
-$audi-gray-100: #f1f3f5;
-$audi-gray-200: #e9ecef;
-$audi-gray-300: #dee2e6;
-$audi-gray-400: #ced4da;
-$audi-gray-500: #adb5bd;
-$audi-gray-600: #6c757d;
-$audi-gray-700: #495057;
-$audi-gray-800: #343a40;
-$audi-gray-900: #212529;
-
-// Dark sidebar colors (for contrast)
-$audi-sidebar-dark: #1a1a1a;
-$audi-sidebar-darker: #0a0a0a;
-$audi-sidebar-gray: #2a2a2a;
-$audi-sidebar-gray-light: #333333;
-
-// Audi signature red (unchanged)
-$audi-red: #ff0000;
-$audi-red-dark: #cc0000;
-$audi-red-light: rgba(255, 0, 0, 0.1);
-
-// Layout colors - light with dark sidebar
-$primary-bg: $audi-gray-100;
-$bg-secondary: $audi-gray-50;
-$content-background-color: $audi-gray-100;
-$header-bg: $audi-sidebar-dark;           // Dark header
-$header-border-color: $audi-gray-300;
-$header-profile-name-color: #ffffff;      // Light text on dark header
-$sidebar-bg: $audi-sidebar-dark;          // Dark sidebar for contrast
-$sidebar-submenu-bg: $audi-sidebar-gray;
-$sidebar-submenu-hover-bg: rgba($audi-red, 0.25); // Match level 1 hover (red accent)
-$sidebar-submenu-active-bg: rgba($audi-red, 0.3); // Match level 1 active (red accent)
-$footer-bg: $audi-sidebar-dark;           // Dark footer
-$border-color: $audi-gray-300;
-$text-primary: $audi-gray-900;
-$text-secondary: $audi-gray-600;
-$accent-color: $audi-red;
-$accent-hover: rgba($audi-red, 0.1);
-$accent-light: rgba($audi-red, 0.05);
-
-// Sync base variables with theme colors
-$base-accent-color: $accent-color;
-$base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%);
-$base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%);
-$base-accent-color-light: $accent-light;
-$base-accent-color-light-hover: rgba($base-accent-color, 0.08);
-
-// Form focus colors - must match accent color
-$input-focus-border-color: $accent-color;
-$select-focus-border-color: $accent-color;
-$textarea-focus-border-color: $accent-color;
-
-// Checkbox colors - must match accent color
-$checkbox-border-color-hover: $accent-color;
-$checkbox-border-color-checked: $accent-color;
-$checkbox-bg-checked: $accent-color;
-$checkbox-bg-indeterminate: $accent-color;
-$checkbox-focus-shadow: 0 0 0 2px rgba($accent-color, 0.25);
-
-// Card colors
-$card-bg: $audi-white;
-$card-header-bg: $audi-gray-50;
-$card-footer-bg: $audi-gray-50;
-$card-tabs-bg: $audi-gray-200;
-
-// Input colors
-$input-bg: $audi-white;
-$input-border: $audi-gray-300;
-$input-text: $audi-gray-900;
-
-// Table colors
-$table-stripe: $audi-gray-50;
-$table-bg: $audi-white;
-$table-header-bg: $audi-gray-100;
-$table-hover-bg: $audi-gray-50;
-
-// Enable red accent on table row hover (Audi signature detail)
-$table-hover-accent-width: 0.3rem;  // 3px in 10px base
-$table-hover-accent-color: $accent-color;
-$table-hover-accent-position: left;
-
-// Modal colors
-$modal-content-bg: $audi-white;
-$modal-overlay-bg: rgba($audi-sidebar-darker, 0.75);
-
-// Button colors - Keep Audi's red primary/danger, adjust others for light theme
-$btn-primary-bg: $audi-red;
-$btn-primary-bg-hover: $audi-red-dark;
-$btn-primary-text: #ffffff;
-$btn-secondary-bg: $audi-gray-600;
-$btn-secondary-bg-hover: $audi-gray-700;
-$btn-secondary-text: #ffffff;
-$btn-success-bg: #00cc44;
-$btn-success-bg-hover: #009933;
-$btn-success-text: #ffffff;
-$btn-danger-bg: $audi-red;
-$btn-danger-bg-hover: $audi-red-dark;
-$btn-danger-text: #ffffff;
-$btn-warning-bg: #ff6600;
-$btn-warning-bg-hover: #e55a00;
-$btn-warning-text: #ffffff;
-$btn-info-bg: #0099ff;
-$btn-info-bg-hover: #0077cc;
-$btn-info-text: #ffffff;
-$btn-light-bg: $audi-gray-200;
-$btn-light-bg-hover: $audi-gray-300;
-$btn-light-text: $audi-gray-900;
-$btn-dark-bg: $audi-gray-900;
-$btn-dark-bg-hover: $audi-gray-800;
-$btn-dark-text: #ffffff;
-
-// Validation shadow colors - match button colors
-$success-bg: $btn-success-bg;
-$success-bg-light: rgba(0, 204, 68, 0.1);
-$warning-bg: $btn-warning-bg;
-$warning-bg-light: rgba(255, 102, 0, 0.1);
-$danger-bg: $btn-danger-bg;
-$danger-bg-light: rgba(255, 0, 0, 0.1);
-
-// Fira Sans Condensed fonts (local, same as Audi dark theme)
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fira Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-// Set body font
-$body-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
-
-// Card styling - thicker border for Audi design language
-$card-border-width: $border-width-medium;
-$card-border-radius: 0; // Sharp edges
-
-// Import core styles with overridden variables
-@import '../core';
-@import '../utilities';
-@import '../base-css-variables';
-
-// Audi Light specific overrides
-// Sidebar text should be light on dark background
-.pa-sidebar {
-  color: #ffffff;
-
-  &__link {
-    color: #cccccc;
-
-    &:hover {
-      color: #ffffff;
-      background-color: rgba($audi-red, 0.1);
-    }
-
-    &--active {
-      color: #ffffff;
-      background-color: rgba($audi-red, 0.15);
-      border-left: 3px solid $audi-red;
-    }
-  }
-
-  &__toggle {
-    color: #cccccc;
-
-    &:hover {
-      color: #ffffff;
-    }
-  }
-}
-
-// Header text visibility - light text on dark header
-.pa-header {
-  &__brand h1 {
-    color: #ffffff !important;
-  }
-
-  &__nav > ul > li > a {
-    color: #cccccc !important;
-
-    &:hover {
-      color: $audi-red !important;
-      background-color: rgba($audi-red, 0.1) !important;
-    }
-  }
-
-  // Dropdown menu items - dark text on light background
-  &__dropdown li a {
-    color: $audi-gray-900 !important;
-
-    &:hover {
-      color: $audi-red !important;
-      background-color: rgba($audi-red, 0.05) !important;
-    }
-  }
-
-  &__title h2 {
-    color: #cccccc !important;
-  }
-
-  &__profile-btn {
-    color: #ffffff !important;
-
-    &:hover {
-      background-color: rgba($audi-red, 0.2) !important;
-    }
-  }
-}
-
-// Burger menu - light bars on dark header
-.burger-menu {
-  span {
-    background-color: #ffffff !important;
-  }
-
-  &:hover span {
-    background-color: $audi-red !important;
-  }
-}
-
-// Theme switcher in header
-.theme-switcher {
-  label {
-    color: #cccccc !important;
-  }
-
-  select {
-    background-color: $audi-sidebar-gray !important;
-    color: #ffffff !important;
-    border-color: $audi-sidebar-gray-light !important;
-
-    &:focus {
-      border-color: $audi-red !important;
-    }
-  }
-}
-
-// Footer - light text on dark background
-.pa-layout__footer {
-  color: #cccccc;
-
-  a {
-    color: #ffffff;
-
-    &:hover {
-      color: $audi-red;
-    }
-  }
-}
-
-// CSS Variables for page loader (FOUC prevention) and base theme variables
-:root {
-  --page-loader-bg: rgba(240, 240, 240, 0.95);
-  --page-loader-spinner-border: #d0d0d0;
-  --page-loader-spinner-accent: #bb0a30; // Audi red
-
-  // Base CSS variables for web components (daterangepicker, multiselect, etc.)
-  @include output-base-css-variables;
-}