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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +56 -0
  2. package/dist/css/main.css +183 -8
  3. package/package.json +1 -1
  4. package/snippets/layout.html +79 -38
  5. package/src/scss/core-components/_tabs.scss +3 -0
  6. package/src/scss/core-components/_utilities.scss +15 -0
  7. package/src/scss/core-components/layout/_layout-container.scss +32 -2
  8. package/src/scss/core-components/layout/_navbar-elements.scss +3 -2
  9. package/src/scss/core-components/layout/_navbar.scss +23 -0
  10. package/src/scss/themes/audi-light.scss +26 -0
  11. package/src/scss/themes/audi.scss +13 -0
  12. package/src/scss/themes/corporate.scss +26 -0
  13. package/src/scss/themes/dark-blue.scss +13 -0
  14. package/src/scss/themes/dark-green.scss +13 -0
  15. package/src/scss/themes/dark-red.scss +13 -0
  16. package/src/scss/themes/dark.scss +13 -0
  17. package/src/scss/themes/express.scss +13 -0
  18. package/src/scss/themes/minimal.scss +13 -0
package/README.md CHANGED
@@ -104,6 +104,14 @@ The Dark theme supports color accent variants:
104
104
  - `.pa-color-green` - Green accent
105
105
  - `.pa-color-red` - Red accent
106
106
 
107
+ ### Web Component Dark Mode Support
108
+
109
+ When switching theme modes, also set `data-theme` attribute on `<body>` for web component compatibility:
110
+ ```js
111
+ document.body.dataset.theme = 'dark'; // or 'light'
112
+ ```
113
+ This enables dark mode support for web components like `@keenmate/web-grid` that look for `data-theme` attribute.
114
+
107
115
  ## Component Classes
108
116
 
109
117
  ### Grid System
@@ -146,10 +154,35 @@ The Dark theme supports color accent variants:
146
154
 
147
155
  ### Layout & Sidebar
148
156
  - `.pa-layout` - Main layout container
157
+ - `.pa-layout__inner` - Inner wrapper for sidebar + content
158
+ - `.pa-layout__content` - Content wrapper
159
+ - `.pa-layout__main` - Main content area
149
160
  - `.pa-layout__sidebar` - Sidebar navigation
150
161
  - `.pa-layout__sidebar--icon-collapse` - Icon-only collapse mode (icons maintain fixed position when collapsed)
151
162
  - `.sidebar-hidden` - Body class to toggle sidebar visibility
152
163
 
164
+ ### Navbar (Header)
165
+ - `.pa-navbar` - Fixed navbar container
166
+ - `.pa-navbar__inner` - Inner content wrapper
167
+ - **Three-section layout:**
168
+ - `.pa-header__left` - Left section (burger, brand, nav) - stays anchored left
169
+ - `.pa-header__center` - Center section (page title) - flexible
170
+ - `.pa-header__right` - Right section (notifications, profile) - stays anchored right
171
+ - `.pa-header__burger` - Hamburger menu button
172
+ - `.pa-header__brand` - Brand/logo container
173
+ - `.pa-header__nav` - Navigation links container
174
+ - `.pa-header__nav--left/--right` - Navigation position
175
+ - `.pa-header__title` - Page title
176
+ - `.pa-header__profile-btn` - Profile button
177
+
178
+ ### Footer
179
+ - `.pa-layout__footer` - Footer container (uses `min-height`, can expand)
180
+ - **Three-section layout:**
181
+ - `.pa-footer__left` - Left section (copyright) - stays anchored left
182
+ - `.pa-footer__center` - Center section (optional) - flexible
183
+ - `.pa-footer__right` - Right section (version info, links) - stays anchored right
184
+ - `.pa-footer__right--vertical` - Stack items vertically with right-aligned text
185
+
153
186
  ### Forms
154
187
  - `.pa-input` - Text inputs
155
188
  - `.pa-select` - Select dropdowns
@@ -273,6 +306,29 @@ The Dark theme supports color accent variants:
273
306
  - `.pa-profile-panel__favorite-item` - Favorite link (with remove button)
274
307
  - `.pa-profile-panel__actions` - Action buttons (Sign Out, etc.)
275
308
 
309
+ ## Utility Classes
310
+
311
+ ### Flexbox Alignment
312
+ - `.self-start` - Align item to top (`align-self: flex-start`)
313
+ - `.self-center` - Align item to center (`align-self: center`)
314
+ - `.self-end` - Align item to bottom (`align-self: flex-end`)
315
+ - `.self-stretch` - Stretch item to fill (`align-self: stretch`)
316
+ - `.self-baseline` - Align item to baseline (`align-self: baseline`)
317
+
318
+ ### Spacing (Gap)
319
+ - `.gap-0` through `.gap-2xl` - Gap utilities using spacing scale
320
+ - `.gap-1` through `.gap-20` - Numeric gap utilities (in px-equivalent rem units)
321
+ - `.row-gap-*` - Row gap utilities
322
+ - `.column-gap-*` - Column gap utilities
323
+
324
+ ### Text Size
325
+ - `.text-2xs` through `.text-4xl` - Font size utilities
326
+
327
+ ### Theme Colors
328
+ - `.pa-bg-color-1` through `.pa-bg-color-9` - Background color slots
329
+ - `.pa-text-color-1` through `.pa-text-color-9` - Text color slots
330
+ - `.pa-border-color-1` through `.pa-border-color-9` - Border color slots
331
+
276
332
  ## SCSS Variables
277
333
 
278
334
  All components use SCSS variables with `!default` flags, making them fully customizable:
package/dist/css/main.css CHANGED
@@ -2113,6 +2113,28 @@ body.pa-container-2xl .pa-navbar {
2113
2113
  gap: 1.6rem;
2114
2114
  }
2115
2115
 
2116
+ .pa-header__left {
2117
+ display: flex;
2118
+ align-items: center;
2119
+ gap: 1.6rem;
2120
+ flex-shrink: 0;
2121
+ }
2122
+
2123
+ .pa-header__center {
2124
+ flex: 1;
2125
+ min-width: 0;
2126
+ display: flex;
2127
+ align-items: center;
2128
+ justify-content: center;
2129
+ }
2130
+
2131
+ .pa-header__right {
2132
+ display: flex;
2133
+ align-items: center;
2134
+ gap: 1.6rem;
2135
+ flex-shrink: 0;
2136
+ }
2137
+
2116
2138
  /* ========================================
2117
2139
  Reset and Base Styles
2118
2140
  ======================================== */
@@ -2201,15 +2223,43 @@ body.pa-layout--sticky .pa-layout__inner {
2201
2223
  }
2202
2224
 
2203
2225
  .pa-layout__footer {
2204
- height: 4.8rem;
2226
+ min-height: 4.8rem;
2205
2227
  background-color: var(--pa-footer-bg);
2206
2228
  border-top: 1px solid var(--pa-footer-border-color);
2207
2229
  display: flex;
2208
2230
  align-items: center;
2209
- padding: 0 1.6rem;
2231
+ padding: 0.4rem 1.6rem;
2232
+ flex-shrink: 0;
2233
+ gap: 1.6rem;
2234
+ }
2235
+
2236
+ .pa-footer__left {
2237
+ display: flex;
2238
+ align-items: center;
2239
+ gap: 1.6rem;
2210
2240
  flex-shrink: 0;
2211
2241
  }
2212
2242
 
2243
+ .pa-footer__center {
2244
+ flex: 1;
2245
+ min-width: 0;
2246
+ display: flex;
2247
+ align-items: center;
2248
+ justify-content: center;
2249
+ }
2250
+
2251
+ .pa-footer__right {
2252
+ display: flex;
2253
+ align-items: center;
2254
+ gap: 1.6rem;
2255
+ flex-shrink: 0;
2256
+ }
2257
+ .pa-footer__right--vertical {
2258
+ flex-direction: column;
2259
+ align-items: flex-end;
2260
+ gap: 0.4rem;
2261
+ }
2262
+
2213
2263
  /* ========================================
2214
2264
  Reset and Base Styles
2215
2265
  ======================================== */
@@ -2604,12 +2654,6 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
2604
2654
  color: var(--pa-accent);
2605
2655
  background-color: var(--pa-accent-hover);
2606
2656
  }
2607
- .pa-header__nav--left {
2608
- margin-right: auto;
2609
- }
2610
- .pa-header__nav--right {
2611
- margin-left: auto;
2612
- }
2613
2657
  .pa-header__nav-item--has-dropdown {
2614
2658
  position: static;
2615
2659
  }
@@ -4794,6 +4838,7 @@ a.pa-card p {
4794
4838
  border-radius: 8px;
4795
4839
  padding: 1.6rem 1rem;
4796
4840
  background-color: var(--pa-card-bg);
4841
+ margin-bottom: 1.6rem;
4797
4842
  }
4798
4843
  .pa-tabs__container--bordered .pa-tabs {
4799
4844
  border-bottom: none;
@@ -4810,6 +4855,7 @@ a.pa-card p {
4810
4855
  border-radius: 8px;
4811
4856
  background-color: var(--pa-card-bg);
4812
4857
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
4858
+ margin-bottom: 1.6rem;
4813
4859
  }
4814
4860
  .pa-tabs__container--card .pa-tabs {
4815
4861
  height: 4rem;
@@ -4918,6 +4964,7 @@ a.pa-card p {
4918
4964
  border-radius: 8px;
4919
4965
  padding: 1.6rem 1rem;
4920
4966
  background-color: var(--pa-card-bg);
4967
+ margin-bottom: 1.6rem;
4921
4968
  }
4922
4969
  .pa-tabs__vertical-layout--bordered .pa-tabs--vertical {
4923
4970
  border-right: 1px solid var(--pa-border-color);
@@ -12848,6 +12895,26 @@ html.font-size-4xl {
12848
12895
  column-gap: 2.4rem;
12849
12896
  }
12850
12897
 
12898
+ .self-start {
12899
+ align-self: flex-start;
12900
+ }
12901
+
12902
+ .self-center {
12903
+ align-self: center;
12904
+ }
12905
+
12906
+ .self-end {
12907
+ align-self: flex-end;
12908
+ }
12909
+
12910
+ .self-stretch {
12911
+ align-self: stretch;
12912
+ }
12913
+
12914
+ .self-baseline {
12915
+ align-self: baseline;
12916
+ }
12917
+
12851
12918
  .text-2xs {
12852
12919
  font-size: 1rem;
12853
12920
  }
@@ -12926,3 +12993,111 @@ html.font-size-4xl {
12926
12993
  flex-direction: column;
12927
12994
  align-items: flex-start;
12928
12995
  }
12996
+
12997
+ .pa-bg-color-1 {
12998
+ background-color: var(--pa-color-1);
12999
+ }
13000
+
13001
+ .pa-text-color-1 {
13002
+ color: var(--pa-color-1);
13003
+ }
13004
+
13005
+ .pa-border-color-1 {
13006
+ border-color: var(--pa-color-1);
13007
+ }
13008
+
13009
+ .pa-bg-color-2 {
13010
+ background-color: var(--pa-color-2);
13011
+ }
13012
+
13013
+ .pa-text-color-2 {
13014
+ color: var(--pa-color-2);
13015
+ }
13016
+
13017
+ .pa-border-color-2 {
13018
+ border-color: var(--pa-color-2);
13019
+ }
13020
+
13021
+ .pa-bg-color-3 {
13022
+ background-color: var(--pa-color-3);
13023
+ }
13024
+
13025
+ .pa-text-color-3 {
13026
+ color: var(--pa-color-3);
13027
+ }
13028
+
13029
+ .pa-border-color-3 {
13030
+ border-color: var(--pa-color-3);
13031
+ }
13032
+
13033
+ .pa-bg-color-4 {
13034
+ background-color: var(--pa-color-4);
13035
+ }
13036
+
13037
+ .pa-text-color-4 {
13038
+ color: var(--pa-color-4);
13039
+ }
13040
+
13041
+ .pa-border-color-4 {
13042
+ border-color: var(--pa-color-4);
13043
+ }
13044
+
13045
+ .pa-bg-color-5 {
13046
+ background-color: var(--pa-color-5);
13047
+ }
13048
+
13049
+ .pa-text-color-5 {
13050
+ color: var(--pa-color-5);
13051
+ }
13052
+
13053
+ .pa-border-color-5 {
13054
+ border-color: var(--pa-color-5);
13055
+ }
13056
+
13057
+ .pa-bg-color-6 {
13058
+ background-color: var(--pa-color-6);
13059
+ }
13060
+
13061
+ .pa-text-color-6 {
13062
+ color: var(--pa-color-6);
13063
+ }
13064
+
13065
+ .pa-border-color-6 {
13066
+ border-color: var(--pa-color-6);
13067
+ }
13068
+
13069
+ .pa-bg-color-7 {
13070
+ background-color: var(--pa-color-7);
13071
+ }
13072
+
13073
+ .pa-text-color-7 {
13074
+ color: var(--pa-color-7);
13075
+ }
13076
+
13077
+ .pa-border-color-7 {
13078
+ border-color: var(--pa-color-7);
13079
+ }
13080
+
13081
+ .pa-bg-color-8 {
13082
+ background-color: var(--pa-color-8);
13083
+ }
13084
+
13085
+ .pa-text-color-8 {
13086
+ color: var(--pa-color-8);
13087
+ }
13088
+
13089
+ .pa-border-color-8 {
13090
+ border-color: var(--pa-color-8);
13091
+ }
13092
+
13093
+ .pa-bg-color-9 {
13094
+ background-color: var(--pa-color-9);
13095
+ }
13096
+
13097
+ .pa-text-color-9 {
13098
+ color: var(--pa-color-9);
13099
+ }
13100
+
13101
+ .pa-border-color-9 {
13102
+ border-color: var(--pa-color-9);
13103
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenmate/pure-admin-core",
3
- "version": "1.0.0-rc05",
3
+ "version": "1.0.0-rc06",
4
4
  "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
5
5
  "style": "dist/css/main.css",
6
6
  "exports": {
package/snippets/layout.html CHANGED
@@ -42,10 +42,24 @@
42
42
  </div>
43
43
 
44
44
  <!-- Footer (outside inner, inside layout) -->
45
+ <!-- Three-section layout: Left / Center / Right -->
45
46
  <footer class="pa-layout__footer">
46
- <div class="pa-layout__footer__content">
47
+ <!-- Left Section (stays anchored left) -->
48
+ <div class="pa-footer__left">
47
49
  <p>&copy; 2024 Pure Admin Framework</p>
48
50
  </div>
51
+
52
+ <!-- Center Section (flexible, fills space) -->
53
+ <div class="pa-footer__center">
54
+ <!-- Optional center content -->
55
+ </div>
56
+
57
+ <!-- Right Section (stays anchored right) -->
58
+ <div class="pa-footer__right">
59
+ <span>App version: 1.2.1</span>
60
+ <span>Database version: 2.3.1</span>
61
+ <a href="#">Open Source Licenses</a>
62
+ </div>
49
63
  </footer>
50
64
  </div>
51
65
 
@@ -368,50 +382,67 @@
368
382
 
369
383
  <!-- ================================
370
384
  NAVBAR/HEADER (with burger menu and navigation)
385
+ Three-section layout: Left / Center / Right
371
386
  ================================ -->
372
387
 
373
388
  <!-- Complete Navbar Example (hybrid: pa-navbar wrapper, pa-header__ elements) -->
374
389
  <nav class="pa-navbar">
375
390
  <div class="pa-navbar__inner">
376
- <!-- Hamburger Menu (burger) -->
377
- <button class="pa-header__burger burger-menu" onclick="toggleSidebar()" aria-label="Toggle sidebar">
378
- <span></span>
379
- <span></span>
380
- <span></span>
381
- </button>
382
-
383
- <!-- Brand -->
384
- <div class="pa-header__brand">
385
- <h1>Pure Admin</h1>
391
+ <!-- Left Section: Burger, Brand, Left Nav (stays anchored left) -->
392
+ <div class="pa-header__left">
393
+ <!-- Hamburger Menu (burger) -->
394
+ <button class="pa-header__burger burger-menu" onclick="toggleSidebar()" aria-label="Toggle sidebar">
395
+ <span></span>
396
+ <span></span>
397
+ <span></span>
398
+ </button>
399
+
400
+ <!-- Brand -->
401
+ <div class="pa-header__brand">
402
+ <h1>Pure Admin</h1>
403
+ </div>
404
+
405
+ <!-- Left Navigation Links -->
406
+ <nav class="pa-header__nav pa-header__nav--left">
407
+ <ul>
408
+ <li><a href="/">Dashboard</a></li>
409
+ <li><a href="/components">Components</a></li>
410
+ <li><a href="/forms">Forms</a></li>
411
+ </ul>
412
+ </nav>
386
413
  </div>
387
414
 
388
- <!-- Left Navigation Links -->
389
- <nav class="pa-header__nav pa-header__nav--left">
390
- <ul>
391
- <li><a href="/">📊 Dashboard</a></li>
392
- <li><a href="/components">🧩 Components</a></li>
393
- <li><a href="/forms">📝 Forms</a></li>
394
- </ul>
395
- </nav>
396
-
397
- <!-- Page Title (flexible, with ellipsis) -->
398
- <div class="pa-header__title">
399
- <h2>Dashboard</h2>
415
+ <!-- Center Section: Page Title (flexible, fills space between left/right) -->
416
+ <div class="pa-header__center">
417
+ <div class="pa-header__title">
418
+ <h2>Dashboard</h2>
419
+ </div>
400
420
  </div>
401
421
 
402
- <!-- Right Navigation Links -->
403
- <nav class="pa-header__nav pa-header__nav--right">
404
- <ul>
405
- <li><a href="/alerts">⚠️ Alerts</a></li>
406
- <li><a href="/tables">📋 Tables</a></li>
407
- </ul>
408
- </nav>
409
-
410
- <!-- Profile Button -->
411
- <button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
412
- <span class="pa-btn__icon">👤</span>
413
- <span class="pa-header__profile-name">John Doe</span>
414
- </button>
422
+ <!-- Right Section: Right Nav, Notifications, Profile (stays anchored right) -->
423
+ <div class="pa-header__right">
424
+ <!-- Right Navigation Links -->
425
+ <nav class="pa-header__nav pa-header__nav--right">
426
+ <ul>
427
+ <li><a href="/alerts">Alerts</a></li>
428
+ <li><a href="/tables">Tables</a></li>
429
+ </ul>
430
+ </nav>
431
+
432
+ <!-- Notification Bell -->
433
+ <div class="pa-notifications">
434
+ <button class="pa-notifications__btn" onclick="toggleNotifications()" aria-label="Notifications">
435
+ <span class="pa-notifications__icon">🔔</span>
436
+ <span class="pa-notifications__badge">3</span>
437
+ </button>
438
+ </div>
439
+
440
+ <!-- Profile Button -->
441
+ <button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
442
+ <span class="pa-btn__icon">👤</span>
443
+ <span class="pa-header__profile-name">John Doe</span>
444
+ </button>
445
+ </div>
415
446
  </div>
416
447
  </nav>
417
448
 
@@ -518,13 +549,19 @@ NAVBAR CLASSES:
518
549
  - .pa-navbar - Navbar outer wrapper (outside layout container)
519
550
  - .pa-navbar__inner - Navbar inner container
520
551
 
521
- HEADER/NAVBAR ELEMENT CLASSES (inside pa-navbar__inner):
552
+ HEADER SECTION CONTAINERS (inside pa-navbar__inner):
553
+ - .pa-header__left - Left section (burger, brand, nav--left) - stays anchored left
554
+ - .pa-header__center - Center section (title) - flexible, fills space
555
+ - .pa-header__right - Right section (nav--right, notifications, profile) - stays anchored right
556
+
557
+ HEADER/NAVBAR ELEMENT CLASSES (inside section containers):
522
558
  - .pa-header__burger - Burger menu button
523
559
  - .burger-menu - Burger menu class (same as __burger)
524
560
  - .pa-header__brand - Brand/logo area
525
561
  - .pa-header__nav - Navigation container
526
562
  - .pa-header__nav--left/right - Navigation alignment
527
563
  - .pa-header__title - Page title area (flexible, with ellipsis)
564
+ - .pa-notifications - Notification bell container
528
565
  - .pa-header__profile-btn - Profile button
529
566
  - .pa-header__profile-name - Profile name text
530
567
 
@@ -536,7 +573,11 @@ LAYOUT CLASSES:
536
573
  - .pa-layout__main - Main content area
537
574
  - .pa-layout__main__inner - Main content inner wrapper
538
575
  - .pa-layout__footer - Footer container
539
- - .pa-layout__footer__content - Footer content wrapper
576
+
577
+ FOOTER SECTION CONTAINERS (inside pa-layout__footer):
578
+ - .pa-footer__left - Left section (copyright, etc.) - stays anchored left
579
+ - .pa-footer__center - Center section (optional) - flexible, fills space
580
+ - .pa-footer__right - Right section (version info, links) - stays anchored right
540
581
 
541
582
  LAYOUT WIDTH VARIANTS (applied to body tag):
542
583
  - No class - Fluid layout (full width)
package/src/scss/core-components/_tabs.scss CHANGED
@@ -322,6 +322,7 @@
322
322
  border-radius: $border-radius-lg;
323
323
  padding: $card-body-padding-v $card-body-padding-h;
324
324
  background-color: var(--pa-card-bg);
325
+ margin-bottom: $spacing-base; // Match pa-card margin
325
326
 
326
327
  // Remove bottom border from tabs since wrapper has border
327
328
  .pa-tabs {
@@ -344,6 +345,7 @@
344
345
  border-radius: $card-border-radius;
345
346
  background-color: var(--pa-card-bg);
346
347
  box-shadow: $shadow-sm;
348
+ margin-bottom: $spacing-base; // Match pa-card margin
347
349
 
348
350
  .pa-tabs {
349
351
  height: $card-header-min-height;
@@ -474,6 +476,7 @@
474
476
  border-radius: $border-radius-lg;
475
477
  padding: $card-body-padding-v $card-body-padding-h;
476
478
  background-color: var(--pa-card-bg);
479
+ margin-bottom: $spacing-base; // Match pa-card margin
477
480
 
478
481
  // Add divider between tabs and content (gap already provides spacing)
479
482
  .pa-tabs--vertical {
package/src/scss/core-components/_utilities.scss CHANGED
@@ -235,6 +235,13 @@ html.font-size-4xl {
235
235
  .column-gap-base { column-gap: $spacing-base; }
236
236
  .column-gap-lg { column-gap: $spacing-lg; }
237
237
 
238
+ // Align-self utilities (for flex/grid children)
239
+ .self-start { align-self: flex-start; }
240
+ .self-center { align-self: center; }
241
+ .self-end { align-self: flex-end; }
242
+ .self-stretch { align-self: stretch; }
243
+ .self-baseline { align-self: baseline; }
244
+
238
245
  // Font-size utilities (10px rem base)
239
246
  // Direct font-size classes using typography variables
240
247
  .text-2xs { font-size: $font-size-2xs; } // 1rem = 10px
@@ -292,3 +299,11 @@ html.font-size-4xl {
292
299
  }
293
300
  }
294
301
 
302
+ // Theme color utilities (color-1 through color-9)
303
+ // Use these to apply theme colors to any element
304
+ @for $i from 1 through 9 {
305
+ .pa-bg-color-#{$i} { background-color: var(--pa-color-#{$i}); }
306
+ .pa-text-color-#{$i} { color: var(--pa-color-#{$i}); }
307
+ .pa-border-color-#{$i} { border-color: var(--pa-color-#{$i}); }
308
+ }
309
+
package/src/scss/core-components/layout/_layout-container.scss CHANGED
@@ -95,11 +95,41 @@ body.pa-layout--sticky .pa-layout__inner {
95
95
 
96
96
  // Footer - outside inner, sibling to inner
97
97
  .pa-layout__footer {
98
- height: $footer-height;
98
+ min-height: $footer-height;
99
99
  background-color: var(--pa-footer-bg);
100
100
  border-top: $border-width-base solid var(--pa-footer-border-color);
101
101
  display: flex;
102
102
  align-items: center;
103
- padding: 0 $spacing-base;
103
+ padding: $spacing-xs $spacing-base;
104
104
  flex-shrink: 0; // Don't shrink footer
105
+ gap: $spacing-base;
106
+ }
107
+
108
+ // Footer sections - Left/Center/Right layout (mirrors navbar structure)
109
+ .pa-footer__left {
110
+ display: flex;
111
+ align-items: center;
112
+ gap: $spacing-base;
113
+ flex-shrink: 0;
114
+ }
115
+
116
+ .pa-footer__center {
117
+ flex: 1;
118
+ min-width: 0; // Allow shrinking for ellipsis
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ }
123
+
124
+ .pa-footer__right {
125
+ display: flex;
126
+ align-items: center;
127
+ gap: $spacing-base;
128
+ flex-shrink: 0;
129
+
130
+ &--vertical {
131
+ flex-direction: column;
132
+ align-items: flex-end;
133
+ gap: $spacing-xs;
134
+ }
105
135
  }
package/src/scss/core-components/layout/_navbar-elements.scss CHANGED
@@ -60,12 +60,13 @@
60
60
  }
61
61
  }
62
62
 
63
+ // Note: margin auto no longer needed with pa-header__left/center/right structure
63
64
  &--left {
64
- margin-right: auto;
65
+ // Elements in left section
65
66
  }
66
67
 
67
68
  &--right {
68
- margin-left: auto;
69
+ // Elements in right section
69
70
  }
70
71
  }
71
72
 
package/src/scss/core-components/layout/_navbar.scss CHANGED
@@ -69,3 +69,26 @@ body.pa-container-2xl .pa-navbar {
69
69
  align-items: center;
70
70
  gap: $spacing-base;
71
71
  }
72
+
73
+ // Header sections - Left/Center/Right layout
74
+ .pa-header__left {
75
+ display: flex;
76
+ align-items: center;
77
+ gap: $spacing-base;
78
+ flex-shrink: 0;
79
+ }
80
+
81
+ .pa-header__center {
82
+ flex: 1;
83
+ min-width: 0; // Allow shrinking for ellipsis
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ }
88
+
89
+ .pa-header__right {
90
+ display: flex;
91
+ align-items: center;
92
+ gap: $spacing-base;
93
+ flex-shrink: 0;
94
+ }
package/src/scss/themes/audi-light.scss CHANGED
@@ -2,6 +2,19 @@
2
2
  /* Light version maintaining Audi's red accents and Fira Sans Condensed font */
3
3
  @use 'sass:color';
4
4
 
5
+ // =============================================================================
6
+ // THEME COLOR SLOTS (1-9) - Audi-inspired palette
7
+ // =============================================================================
8
+ $color-1: #bb0a30; // Audi Red (classic)
9
+ $color-2: #ff4444; // Light Red
10
+ $color-3: #ff6600; // Orange (warning tone)
11
+ $color-4: #d4af37; // Gold (premium)
12
+ $color-5: #00a0a0; // Teal (contrast)
13
+ $color-6: #0066cc; // Blue (professional)
14
+ $color-7: #8c8c8c; // Silver (metallic)
15
+ $color-8: #404040; // Charcoal (neutral)
16
+ $color-9: #6b3fa0; // Purple (luxury)
17
+
5
18
  @import '../variables';
6
19
 
7
20
  // Audi Light theme configuration
@@ -304,6 +317,19 @@ $card-border-radius: 0; // Sharp edges
304
317
  }
305
318
  }
306
319
 
320
+ // Footer - light text on dark background
321
+ .pa-layout__footer {
322
+ color: #cccccc;
323
+
324
+ a {
325
+ color: #ffffff;
326
+
327
+ &:hover {
328
+ color: $audi-red;
329
+ }
330
+ }
331
+ }
332
+
307
333
  // CSS Variables for page loader (FOUC prevention) and base theme variables
308
334
  :root {
309
335
  --page-loader-bg: rgba(240, 240, 240, 0.95);
package/src/scss/themes/audi.scss CHANGED
@@ -1,6 +1,19 @@
1
1
  /* Pure Admin Visual - Audi Theme (Pure SCSS Variables) */
2
2
  @use 'sass:color';
3
3
 
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Audi-inspired palette
6
+ // =============================================================================
7
+ $color-1: #bb0a30; // Audi Red (classic)
8
+ $color-2: #ff4444; // Light Red
9
+ $color-3: #ff6600; // Orange (warning tone)
10
+ $color-4: #d4af37; // Gold (premium)
11
+ $color-5: #00a0a0; // Teal (contrast)
12
+ $color-6: #0066cc; // Blue (professional)
13
+ $color-7: #8c8c8c; // Silver (metallic)
14
+ $color-8: #404040; // Charcoal (neutral)
15
+ $color-9: #6b3fa0; // Purple (luxury)
16
+
4
17
  // 1. Import framework variables first (all defaults with !default flags)
5
18
  @import '../variables';
6
19
 
package/src/scss/themes/corporate.scss CHANGED
@@ -1,5 +1,18 @@
1
1
  /* Corporate Theme for Pure Admin Visual - Professional blue/gray palette */
2
2
 
3
+ // =============================================================================
4
+ // THEME COLOR SLOTS (1-9) - Corporate professional palette
5
+ // =============================================================================
6
+ $color-1: #0284c7; // Corporate Blue (primary)
7
+ $color-2: #0ea5e9; // Sky Blue (lighter)
8
+ $color-3: #10b981; // Emerald (success)
9
+ $color-4: #f59e0b; // Amber (attention)
10
+ $color-5: #6366f1; // Indigo (accent)
11
+ $color-6: #8b5cf6; // Violet (creative)
12
+ $color-7: #64748b; // Slate (neutral)
13
+ $color-8: #334155; // Dark Slate (contrast)
14
+ $color-9: #ec4899; // Pink (highlight)
15
+
3
16
  @import '../variables';
4
17
 
5
18
  // Corporate color palette
@@ -192,6 +205,19 @@ $modal-content-bg: #ffffff;
192
205
  }
193
206
  }
194
207
 
208
+ // Footer - light text on dark background
209
+ .pa-layout__footer {
210
+ color: $corporate-slate-300;
211
+
212
+ a {
213
+ color: #ffffff;
214
+
215
+ &:hover {
216
+ color: $corporate-blue-500;
217
+ }
218
+ }
219
+ }
220
+
195
221
  // CSS Variables for page loader (FOUC prevention) and base theme variables
196
222
  :root {
197
223
  --page-loader-bg: rgba(26, 26, 26, 0.95);
package/src/scss/themes/dark-blue.scss CHANGED
@@ -1,6 +1,19 @@
1
1
  /* Dark Blue Theme for Pure Admin Visual */
2
2
  @use 'sass:color';
3
3
 
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Dark blue palette
6
+ // =============================================================================
7
+ $color-1: #3b82f6; // Blue 500 (primary)
8
+ $color-2: #60a5fa; // Blue 400 (lighter)
9
+ $color-3: #22c55e; // Green 500 (success)
10
+ $color-4: #eab308; // Yellow 500 (warning)
11
+ $color-5: #a855f7; // Purple 500 (accent)
12
+ $color-6: #06b6d4; // Cyan 500 (info)
13
+ $color-7: #94a3b8; // Slate 400 (neutral)
14
+ $color-8: #f1f5f9; // Slate 100 (light)
15
+ $color-9: #f43f5e; // Rose 500 (highlight)
16
+
4
17
  @import '../variables';
5
18
 
6
19
  // Dark blue theme color palette
package/src/scss/themes/dark-green.scss CHANGED
@@ -1,6 +1,19 @@
1
1
  /* Dark Green Theme for Pure Admin Visual */
2
2
  @use 'sass:color';
3
3
 
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Dark green palette
6
+ // =============================================================================
7
+ $color-1: #22c55e; // Green 500 (primary)
8
+ $color-2: #4ade80; // Green 400 (lighter)
9
+ $color-3: #84cc16; // Lime 500 (accent)
10
+ $color-4: #eab308; // Yellow 500 (warning)
11
+ $color-5: #14b8a6; // Teal 500 (info)
12
+ $color-6: #3b82f6; // Blue 500 (contrast)
13
+ $color-7: #a3e635; // Lime 400 (highlight)
14
+ $color-8: #f0fdf4; // Green 50 (light)
15
+ $color-9: #f97316; // Orange 500 (alert)
16
+
4
17
  @import '../variables';
5
18
 
6
19
  // Dark green theme color palette
package/src/scss/themes/dark-red.scss CHANGED
@@ -1,6 +1,19 @@
1
1
  /* Dark Red Theme for Pure Admin Visual */
2
2
  @use 'sass:color';
3
3
 
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Dark red palette
6
+ // =============================================================================
7
+ $color-1: #ef4444; // Red 500 (primary)
8
+ $color-2: #f87171; // Red 400 (lighter)
9
+ $color-3: #f97316; // Orange 500 (accent)
10
+ $color-4: #eab308; // Yellow 500 (warning)
11
+ $color-5: #ec4899; // Pink 500 (secondary)
12
+ $color-6: #8b5cf6; // Violet 500 (contrast)
13
+ $color-7: #fca5a5; // Red 300 (muted)
14
+ $color-8: #fef2f2; // Red 50 (light)
15
+ $color-9: #06b6d4; // Cyan 500 (cool contrast)
16
+
4
17
  @import '../variables';
5
18
 
6
19
  // Dark red theme color palette
package/src/scss/themes/dark.scss CHANGED
@@ -1,6 +1,19 @@
1
1
  /* Dark Theme for Pure Admin Visual */
2
2
  @use 'sass:color';
3
3
 
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Dark theme vibrant palette
6
+ // =============================================================================
7
+ $color-1: #4dabf7; // Light Blue (primary)
8
+ $color-2: #69db7c; // Light Green (success)
9
+ $color-3: #ffd43b; // Yellow (warning)
10
+ $color-4: #ff6b6b; // Light Red (danger)
11
+ $color-5: #da77f2; // Light Purple (accent)
12
+ $color-6: #38d9a9; // Teal (info)
13
+ $color-7: #adb5bd; // Gray (neutral)
14
+ $color-8: #f8f9fa; // Light (contrast)
15
+ $color-9: #ffa94d; // Orange (highlight)
16
+
4
17
  @import '../variables';
5
18
 
6
19
  // Dark theme color palette
package/src/scss/themes/express.scss CHANGED
@@ -1,6 +1,19 @@
1
1
  /* Express Theme - Bold yellow and red palette inspired by logistics brands */
2
2
  @use 'sass:color';
3
3
 
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Express logistics palette
6
+ // =============================================================================
7
+ $color-1: #D40511; // Express Red (primary)
8
+ $color-2: #FFCC00; // Express Yellow (brand)
9
+ $color-3: #ff6b00; // Orange (urgent)
10
+ $color-4: #00a651; // Green (delivered)
11
+ $color-5: #0066cc; // Blue (tracking)
12
+ $color-6: #6b3fa0; // Purple (premium)
13
+ $color-7: #8C8C8C; // Gray (neutral)
14
+ $color-8: #333333; // Dark (contrast)
15
+ $color-9: #00b4d8; // Cyan (info)
16
+
4
17
  @import '../variables';
5
18
 
6
19
  // Express color palette - Bold yellow and red
package/src/scss/themes/minimal.scss CHANGED
@@ -1,6 +1,19 @@
1
1
  /* Minimal Theme for Pure Admin Visual - Ultra clean, monochrome approach */
2
2
  @use 'sass:color';
3
3
 
4
+ // =============================================================================
5
+ // THEME COLOR SLOTS (1-9) - Minimal muted palette
6
+ // =============================================================================
7
+ $color-1: #374151; // Gray 700 (primary)
8
+ $color-2: #6b7280; // Gray 500 (secondary)
9
+ $color-3: #059669; // Emerald 600 (muted success)
10
+ $color-4: #d97706; // Amber 600 (muted warning)
11
+ $color-5: #4f46e5; // Indigo 600 (accent)
12
+ $color-6: #7c3aed; // Violet 600 (subtle)
13
+ $color-7: #9ca3af; // Gray 400 (light)
14
+ $color-8: #1f2937; // Gray 800 (dark)
15
+ $color-9: #db2777; // Pink 600 (highlight)
16
+
4
17
  @import '../variables';
5
18
 
6
19
  // Minimal theme color palette - grayscale focused