@keenmate/pure-admin-core 1.5.1 → 2.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.
- package/README.md +19 -2
- package/dist/css/main.css +740 -19
- package/package.json +5 -1
- package/schemas/base-variables.schema.json +623 -0
- package/schemas/component-variables.schema.json +80 -0
- package/schemas/pure-admin-theme.schema.json +325 -0
- package/scripts/pack-theme.js +397 -0
- package/src/scss/_core.scss +3 -0
- package/src/scss/core-components/_cards.scss +17 -0
- package/src/scss/core-components/_data-display.scss +237 -0
- package/src/scss/core-components/_data-viz.scss +608 -0
- package/src/scss/core-components/_grid.scss +3 -2
- package/src/scss/core-components/_statistics.scss +11 -10
- package/src/scss/core-components/layout/_layout-container.scss +1 -0
- package/src/scss/variables/_components.scss +67 -0
package/README.md
CHANGED
|
@@ -150,7 +150,8 @@ Sizes: `0`, `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `auto`
|
|
|
150
150
|
- `.pa-col-1-5` (20%), `.pa-col-2-5` (40%), `.pa-col-3-5` (60%), `.pa-col-4-5` (80%)
|
|
151
151
|
- `.pa-col-1-6` (16.7%), `.pa-col-5-6` (83.3%)
|
|
152
152
|
- `.pa-col-1-12` (8.3%), `.pa-col-5-12` (41.7%), `.pa-col-7-12` (58.3%), `.pa-col-11-12` (91.7%)
|
|
153
|
-
- **Responsive breakpoints:** `.pa-col-sm-*`, `.pa-col-md-*`, `.pa-col-lg-*`, `.pa-col-xl-*`
|
|
153
|
+
- **Responsive breakpoints (container-query based):** `.pa-col-sm-*`, `.pa-col-md-*`, `.pa-col-lg-*`, `.pa-col-xl-*`
|
|
154
|
+
- These respond to the **container width**, not the viewport. Requires a containment context ancestor: `.pa-layout__main` (automatic) or `.pa-cq`
|
|
154
155
|
- **Offsets:** `.pa-offset-5`, `.pa-offset-10`, ... `.pa-offset-95`
|
|
155
156
|
- **Row modifiers:**
|
|
156
157
|
- `.pa-row--no-gutter` - Remove column gutters
|
|
@@ -182,6 +183,11 @@ Sizes: `0`, `xs`, `sm`, `md`, `base`, `lg`, `xl`, `2xl`, `auto`
|
|
|
182
183
|
- Text color automatically adjusts via `--pa-color-N-text` for readability
|
|
183
184
|
- `.pa-card--ghost` - Invisible container (no background, border, or shadow) — layout wrapper only
|
|
184
185
|
- `.pa-card--stat` - Compact padding for stat cards
|
|
186
|
+
- **Live-data states** (persistent tinted background for real-time dashboards):
|
|
187
|
+
- `.pa-card--live-up` - Green tint (value increased)
|
|
188
|
+
- `.pa-card--live-down` - Red tint (value decreased)
|
|
189
|
+
- `.pa-card--live-neutral` - Returns to default card background
|
|
190
|
+
- Smooth 0.3s transition between states; JS swaps the class on each data update
|
|
185
191
|
- **Card tabs:**
|
|
186
192
|
- `.pa-card__tabs` - Tab navigation below header
|
|
187
193
|
- `.pa-card__tab` / `.pa-card__tab--active` - Tab buttons
|
|
@@ -335,9 +341,10 @@ Works with both `pa-table` and `web-grid` component. First/last columns automati
|
|
|
335
341
|
- `.pa-stat__content` - Content wrapper
|
|
336
342
|
- `.pa-stat__number` - Large number display
|
|
337
343
|
- `.pa-stat__label` - Label text
|
|
338
|
-
- **Hero variant:** `.pa-stat--hero` -
|
|
344
|
+
- **Hero variant:** `.pa-stat--hero` - Compact centered stat with large number (~45px), tight padding, and change indicator
|
|
339
345
|
- `.pa-stat__value` - Hero number
|
|
340
346
|
- `.pa-stat__change` - Change indicator (`--positive/negative/neutral`)
|
|
347
|
+
- `.pa-stat--hero-compact` - Alias (identical to `--hero`)
|
|
341
348
|
- **Square variant:** `.pa-stat--square` - Colored square KPI card
|
|
342
349
|
- `.pa-stat__symbol` - Background symbol
|
|
343
350
|
- Color modifiers: `.pa-stat--primary/success/info/warning/danger/secondary`
|
|
@@ -462,6 +469,16 @@ Read-only label-value patterns for displaying structured data. All patterns supp
|
|
|
462
469
|
- `.pa-accent-grid__label` - Item label
|
|
463
470
|
- `.pa-accent-grid__value` - Item value
|
|
464
471
|
|
|
472
|
+
#### Bar List (horizontal bar chart)
|
|
473
|
+
- `.pa-bar-list` - Container for labeled horizontal bar chart items
|
|
474
|
+
- `.pa-bar-list__item` - Single row (header + bar)
|
|
475
|
+
- `.pa-bar-list__header` - Flex row with label and value
|
|
476
|
+
- `.pa-bar-list__label` - Left-aligned label text
|
|
477
|
+
- `.pa-bar-list__value` - Right-aligned value text
|
|
478
|
+
- `.pa-bar-list__bar` - Proportional bar (set width via `style="--value: 75%"`)
|
|
479
|
+
- `.pa-bar-list--compact` - Tighter spacing and smaller text
|
|
480
|
+
- Color variants: `.pa-bar-list--success/warning/danger/info`
|
|
481
|
+
|
|
465
482
|
#### Container Query Wrappers
|
|
466
483
|
Wrap data display components in these containers to enable responsive behavior based on the container width (not viewport):
|
|
467
484
|
- `.pa-fields-container` - Container for `.pa-fields` (collapses multi-column to single column)
|