@keenmate/pure-admin-core 1.0.0-rc01

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

@@ -0,0 +1,207 @@
+/* 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

@@ -0,0 +1,311 @@
+/* Pure Admin Visual - Audi Light Theme */
+/* Light version maintaining Audi's red accents and Fira Sans Condensed font */
+@use 'sass:color';
+
+@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: 3px;
+$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;
+
+// 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;
+    }
+  }
+}
+
+// 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;
+}