@keenmate/pure-admin-theme-audi 1.0.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-theme-audi",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Audi theme for Pure Admin - includes dark and light variants",
   "style": "dist/audi.css",
   "exports": {
@@ -18,7 +18,12 @@
     "build": "sass src/scss:dist --no-source-map --silence-deprecation=import --load-path=../../node_modules",
     "prepublishOnly": "npm run build"
   },
-  "keywords": ["pure-admin", "theme", "audi", "css"],
+  "keywords": [
+    "pure-admin",
+    "theme",
+    "audi",
+    "css"
+  ],
   "author": "KeenMate",
   "license": "MIT",
   "peerDependencies": {

package/src/scss/audi.scss

@@ -40,13 +40,22 @@ $base-text-color-3: #999999;
 $base-text-color-4: #666666;
 $base-text-color-on-accent: #ffffff;
 
-// Surface colors (dark mode)
-$base-surface-1: $audi-dark;
-$base-surface-2: $audi-near-black;
-$base-surface-3: $audi-gray-light;
-$base-surface-inverse: #ffffff;
+// Background colors (dark mode - semantic naming)
+$base-main-bg: $audi-dark;              // Cards, modals (primary background)
+$base-page-bg: $audi-near-black;        // Page background
+$base-subtle-bg: $audi-gray;            // Subtle/muted areas
+$base-inverse-bg: #ffffff;              // Inverse (light elements on dark)
+$base-hover-bg: $audi-gray;             // Hover state background
+$base-active-bg: $audi-gray-light;      // Active/pressed state
+$base-disabled-bg: $audi-gray;          // Disabled state background
 $base-overlay-bg: rgba($audi-black, 0.8);
 
+// Legacy surface aliases (for backward compatibility)
+$base-surface-1: $base-main-bg;
+$base-surface-2: $base-page-bg;
+$base-surface-3: $audi-gray-light;
+$base-surface-inverse: $base-inverse-bg;
+
 // Border
 $base-border-color: $audi-gray-light;
 
@@ -104,6 +113,9 @@ $color-7: #8c8c8c;  // Silver (metallic)
 $color-8: #404040;  // Charcoal (neutral)
 $color-9: #6b3fa0;  // Purple (luxury)
 
+// Typography - Fira Sans Condensed for Audi brand
+$base-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+
 // =============================================================================
 // IMPORT CORE VARIABLES (with base variables already set)
 // =============================================================================
@@ -122,9 +134,9 @@ $table-hover-accent-width: 0.3rem;  // 3px in 10px base
 $table-hover-accent-position: left;
 
 // Dark mode theme colors
-$primary-bg: $audi-near-black;
-$bg-secondary: $audi-near-black;
-$content-background-color: $audi-dark;
+$main-bg: $audi-near-black;
+$page-bg: $audi-near-black;
+$subtle-bg: $audi-dark;
 $header-bg: $audi-black;
 $header-border-color: $audi-gray-light;
 $header-text: #ffffff;
@@ -256,8 +268,6 @@ $btn-dark-text: #ffffff;
   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;
 }
 
-$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
@@ -272,7 +282,7 @@ $card-border-radius: 0; // Sharp edges
 // =============================================================================
 // AUDI-SPECIFIC COMPONENT OVERRIDES
 // =============================================================================
-.pa-btn--primary {
+.pa-btn--color-1 {
   font-weight: $font-weight-bold;
   color: #ffffff !important;
   border-radius: 0 !important;
@@ -330,13 +340,16 @@ $card-border-radius: 0; // Sharp edges
   @include output-base-css-variables;
   @include output-pa-css-variables;
 
+  // Override base-elevated-bg for dark mode (web-grid striped rows, headers)
+  --base-elevated-bg: #{$audi-gray};
+
   // Daterangepicker overrides (dark mode)
   --drp-dropdown-bg: #{$audi-dark};
   --drp-border-color: #{$audi-gray-light};
   --drp-primary-bg: #{$audi-gray};
   --drp-primary-bg-hover: #{$audi-gray-light};
-  --drp-text-primary: #ffffff;
-  --drp-text-secondary: #999999;
+  --drp-text-color-1: #ffffff;
+  --drp-text-color-2: #999999;
   --drp-button-bg: transparent;
   --drp-button-color: #ffffff;
   --drp-button-accent-text-color: #ffffff;
@@ -379,11 +392,11 @@ $card-border-radius: 0; // Sharp edges
   --page-loader-spinner-accent: #ff0000;
 
   // Core colors
-  --pa-primary-bg: #{$light-gray-100};
-  --pa-bg-secondary: #{$light-gray-50};
-  --pa-content-bg: #{$light-gray-100};
-  --pa-text-primary: #{$light-gray-900};
-  --pa-text-secondary: #{$light-gray-600};
+  --pa-main-bg: #{$light-gray-100};
+  --pa-page-bg: #{$light-gray-50};
+  --pa-subtle-bg: #{$light-gray-100};
+  --pa-text-color-1: #{$light-gray-900};
+  --pa-text-color-2: #{$light-gray-600};
   --pa-accent: #ff0000;
   --pa-accent-hover: rgba(255, 0, 0, 0.1);
   --pa-accent-light: rgba(255, 0, 0, 0.05);
@@ -450,11 +463,19 @@ $card-border-radius: 0; // Sharp edges
   --pa-info-bg-light: rgba(0, 153, 255, 0.1);
 
   // Base variables for web components (light mode)
+  // Semantic names (preferred)
+  --base-main-bg: #{$light-white};
+  --base-page-bg: #{$light-gray-100};
+  --base-subtle-bg: #{$light-gray-200};
+  --base-hover-bg: #{$light-gray-200};
+  --base-active-bg: #{$light-gray-300};
+  --base-disabled-bg: #{$light-gray-100};
+  --base-elevated-bg: #{$light-gray-100};
+  // Legacy aliases
   --base-surface-1: #{$light-white};
   --base-surface-2: #{$light-gray-100};
   --base-surface-3: #{$light-gray-200};
-  --base-primary-bg: #{$light-gray-100};
-  --base-primary-bg-hover: #{$light-gray-200};
+  // Text colors
   --base-text-color-1: #{$light-gray-900};
   --base-text-color-2: #{$light-gray-600};
   --base-text-color-3: #{$light-gray-500};
@@ -475,8 +496,8 @@ $card-border-radius: 0; // Sharp edges
     --drp-border-color: #{$light-gray-300};
     --drp-primary-bg: #{$light-gray-100};
     --drp-primary-bg-hover: #{$light-gray-200};
-    --drp-text-primary: #{$light-gray-900};
-    --drp-text-secondary: #{$light-gray-600};
+    --drp-text-color-1: #{$light-gray-900};
+    --drp-text-color-2: #{$light-gray-600};
     --drp-button-bg: transparent;
     --drp-button-color: #{$light-gray-900};
     --drp-button-accent-text-color: #ffffff;