@keenmate/pure-admin-theme-express 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-theme-express",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Express theme for Pure Admin",
   "style": "dist/express.css",
   "exports": {

package/src/scss/express.scss

@@ -14,6 +14,17 @@ $color-7: #8C8C8C;  // Gray (neutral)
 $color-8: #333333;  // Dark (contrast)
 $color-9: #00b4d8;  // Cyan (info)
 
+// Contrast text colors for color slots
+$color-1-text: #ffffff;  // White on Express Red
+$color-2-text: #1a1a1a;  // Dark on Express Yellow (light background)
+$color-3-text: #ffffff;  // White on Orange
+$color-4-text: #ffffff;  // White on Green
+$color-5-text: #ffffff;  // White on Blue
+$color-6-text: #ffffff;  // White on Purple
+$color-7-text: #ffffff;  // White on Gray
+$color-8-text: #ffffff;  // White on Dark
+$color-9-text: #ffffff;  // White on Cyan
+
 // ============================================================================
 // EXPRESS COLOR PALETTE
 // ============================================================================
@@ -111,6 +122,12 @@ $base-focus-ring-color: rgba($express-red, 0.25);
 // Typography
 $base-font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
 
+// ============================================================================
+// ALERT COLOR DERIVATION - Express wants saturated, high-contrast alerts
+// ============================================================================
+$alert-bg-opacity-light: 68;  // Saturated backgrounds for light mode
+$alert-bg-opacity-dark: 30;   // Standard dark mode backgrounds
+
 // ============================================================================
 // FRAMEWORK VARIABLES - Import and let them derive from base
 // ============================================================================
@@ -189,23 +206,6 @@ $modal-content-bg: #ffffff;
 // Profile name in header
 $header-profile-name-color: $express-black;  // Black text on yellow header
 
-// Alert colors - Vibrant and punchy with semi-transparent backgrounds
-$alert-success-text: $base-success-text;
-$alert-success-bg: rgba(16, 185, 129, 0.68);
-$alert-success-border: $base-success-color;
-
-$alert-danger-text: $base-danger-text;
-$alert-danger-bg: rgba(212, 5, 17, 0.58);
-$alert-danger-border: $express-red;
-
-$alert-warning-text: $base-warning-text;
-$alert-warning-bg: rgba(255, 193, 7, 0.58);
-$alert-warning-border: #ffc107;
-
-$alert-info-text: $base-info-text;
-$alert-info-bg: rgba(6, 182, 212, 0.58);
-$alert-info-border: $base-info-color;
-
 // ============================================================================
 // FONTS - Fira Sans Condensed
 // ============================================================================
@@ -437,6 +437,7 @@ $alert-info-border: $base-info-color;
 
   // Pure Admin theme CSS variables
   @include output-pa-css-variables;
+  @include output-pa-alert-variables-light;
 
   // Input group - light gray background for light mode
   --pa-input-group-prepend-bg: #{$express-gray-lightest};
@@ -444,32 +445,12 @@ $alert-info-border: $base-info-color;
   --pa-input-group-append-bg: #{$express-gray-lightest};
   --pa-input-group-append-text: #{$express-dark};
 
-  // Web component overrides (light mode)
-  --drp-dropdown-bg: #ffffff;
-  --drp-border-color: #{$express-gray-lighter};
-  --drp-primary-bg: #{$express-bg};
-  --drp-primary-bg-hover: #{$express-gray-lightest};
-  --drp-text-color-1: #{$express-dark};
-  --drp-text-bg: #{$express-gray};
-  --drp-button-bg: transparent;
-  --drp-button-color: #{$express-dark};
-  --drp-button-accent-text-color: #ffffff;
-  --drp-button-today-color: #{$express-red};
-  --drp-button-clear-color: #{$express-gray};
-  --drp-button-cancel-color: #{$express-gray};
-
-  --ms-dropdown-bg: #ffffff;
-  --ms-input-bg: #ffffff;
-  --ms-primary-bg: #{$express-bg};
-  --ms-primary-bg-hover: #{$express-gray-lightest};
-  --ms-border-color: #{$express-gray-lighter};
-  --ms-text-color-1: #{$express-dark};
-  --ms-text-color-2: #{$express-gray};
-  --ms-text-color-3: #{$express-gray-light};
-  --ms-text-color-4: #{$express-gray-lighter};
-  --ms-hint-bg: #{$express-gray-lightest};
-  --ms-actions-bg: #{$express-gray-lightest};
-  --ms-selected-popover-bg: #ffffff;
+  // Override alert text to white for saturated backgrounds (Express brand)
+  --pa-alert-success-text: #ffffff;
+  --pa-alert-warning-text: #ffffff;
+  --pa-alert-danger-text: #ffffff;
+  --pa-alert-info-text: #ffffff;
+
 }
 
 // ============================================================================
@@ -536,10 +517,10 @@ $alert-info-border: $base-info-color;
   --pa-input-text: #{$dark-text};
   --pa-input-focus-border-color: #{$express-red};
 
-  // Input group - use muted yellow for Express branding
-  --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.15);
+  // Input group - vibrant yellow for Express branding
+  --pa-input-group-prepend-bg: rgba(255, 204, 0, 0.35);
   --pa-input-group-prepend-text: #{$express-yellow};
-  --pa-input-group-append-bg: rgba(255, 204, 0, 0.15);
+  --pa-input-group-append-bg: rgba(255, 204, 0, 0.35);
   --pa-input-group-append-text: #{$express-yellow};
 
   // Input group buttons
@@ -580,15 +561,8 @@ $alert-info-border: $base-info-color;
   --pa-command-palette-item-active-bg: rgba(212, 5, 17, 0.2);
   --pa-command-palette-highlight-bg: rgba(212, 5, 17, 0.3);
 
-  // Alerts - light text for dark mode visibility
-  --pa-alert-info-text: #ffffff;
-  --pa-alert-info-bg: rgba(6, 182, 212, 0.3);
-  --pa-alert-success-text: #ffffff;
-  --pa-alert-success-bg: rgba(16, 185, 129, 0.3);
-  --pa-alert-warning-text: #ffffff;
-  --pa-alert-warning-bg: rgba(255, 193, 7, 0.3);
-  --pa-alert-danger-text: #ffffff;
-  --pa-alert-danger-bg: rgba(212, 5, 17, 0.3);
+  // Alert colors - derived from semantic colors
+  @include output-pa-alert-variables-dark;
 
   // Code inside alerts - inherit alert text color
   .pa-alert code {
@@ -604,14 +578,14 @@ $alert-info-border: $base-info-color;
   --pa-btn-light-bg-hover: #{$dark-border};
   --pa-btn-light-text: #{$dark-text};
 
-  // Semantic colors - slightly brighter for dark mode
-  --pa-success-bg: #10b981;
+  // Semantic colors - brighter for dark mode visibility
+  --pa-success-bg: #34d399;
   --pa-success-bg-light: rgba(16, 185, 129, 0.2);
-  --pa-warning-bg: #f59e0b;
+  --pa-warning-bg: #fbbf24;
   --pa-warning-bg-light: rgba(245, 158, 11, 0.2);
-  --pa-danger-bg: #{$express-red-dark};
-  --pa-danger-bg-light: rgba(180, 5, 14, 0.2);
-  --pa-info-bg: #06b6d4;
+  --pa-danger-bg: #f87171;
+  --pa-danger-bg-light: rgba(248, 113, 113, 0.2);
+  --pa-info-bg: #22d3ee;
   --pa-info-bg-light: rgba(6, 182, 212, 0.2);
 
   // Base variables for web components (dark mode)
@@ -651,37 +625,6 @@ $alert-info-border: $base-info-color;
   --base-tooltip-bg: #{$dark-border};
   --base-tooltip-text-color: #{$dark-text};
 
-  // Daterangepicker overrides (dark mode)
-  web-daterangepicker {
-    --drp-dropdown-bg: #{$dark-card};
-    --drp-border-color: #{$dark-border};
-    --drp-primary-bg: #{$dark-bg};
-    --drp-primary-bg-hover: #{$dark-surface};
-    --drp-text-color-1: #{$dark-text};
-    --drp-text-bg: #{$dark-text-bg};
-    --drp-button-bg: transparent;
-    --drp-button-color: #{$dark-text};
-    --drp-button-accent-text-color: #ffffff;
-    --drp-button-today-color: #{$express-red};
-    --drp-button-clear-color: #{$dark-text-bg};
-    --drp-button-cancel-color: #{$dark-text-bg};
-  }
-
-  // Multiselect overrides (dark mode)
-  web-multiselect {
-    --ms-dropdown-bg: #{$dark-card};
-    --ms-input-bg: #{$dark-surface};
-    --ms-primary-bg: #{$dark-bg};
-    --ms-primary-bg-hover: #{$dark-surface};
-    --ms-border-color: #{$dark-border};
-    --ms-text-color-1: #{$dark-text};
-    --ms-text-color-2: #{$dark-text-bg};
-    --ms-text-color-3: #888888;
-    --ms-text-color-4: #666666;
-    --ms-hint-bg: #{$dark-bg};
-    --ms-actions-bg: #{$dark-bg};
-    --ms-selected-popover-bg: #{$dark-card};
-  }
 }
 
 // ============================================================================