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

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 (25) hide show
  1. package/README.md +56 -0
  2. package/dist/css/main.css +703 -28
  3. package/package.json +1 -1
  4. package/snippets/layout.html +145 -38
  5. package/src/scss/core-components/_grid.scss +25 -0
  6. package/src/scss/core-components/_notifications.scss +67 -0
  7. package/src/scss/core-components/_profile.scss +12 -2
  8. package/src/scss/core-components/_scrollbars.scss +3 -4
  9. package/src/scss/core-components/_tabs.scss +3 -0
  10. package/src/scss/core-components/_utilities.scss +39 -0
  11. package/src/scss/core-components/forms/_input-groups.scss +13 -11
  12. package/src/scss/core-components/layout/_layout-container.scss +64 -2
  13. package/src/scss/core-components/layout/_navbar-elements.scss +3 -2
  14. package/src/scss/core-components/layout/_navbar.scss +23 -0
  15. package/src/scss/core-components/layout/_sidebar.scss +53 -2
  16. package/src/scss/themes/audi-light.scss +26 -0
  17. package/src/scss/themes/audi.scss +13 -0
  18. package/src/scss/themes/corporate.scss +26 -0
  19. package/src/scss/themes/dark-blue.scss +13 -0
  20. package/src/scss/themes/dark-green.scss +13 -0
  21. package/src/scss/themes/dark-red.scss +13 -0
  22. package/src/scss/themes/dark.scss +13 -0
  23. package/src/scss/themes/express.scss +13 -0
  24. package/src/scss/themes/minimal.scss +13 -0
  25. package/src/scss/utilities.scss +57 -2
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: