@keenmate/pure-admin-core 1.0.0 → 1.1.1

package/README.md

@@ -38,7 +38,7 @@ npm install @keenmate/pure-admin-theme-audi
 
 ```scss
 // Override variables before importing
-$primary-bg: #your-color;
+$main-bg: #your-color;
 $btn-primary-bg: #your-button-color;
 
 // Import the framework
@@ -189,6 +189,14 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.pa-textarea` - Textareas
 - `.pa-checkbox` - Checkboxes
 - `.pa-radio` - Radio buttons
+- **Size modifiers:** `--xs`, `--sm`, `--lg`, `--xl`
+- **Validation states:** `--success`, `--warning`, `--error`
+- **Color variants:** `--color-1` through `--color-9` (theme color slots)
+- `.pa-form-group` - Form group wrapper
+- `.pa-form-group--horizontal` - Horizontal label/input layout
+- `.pa-form-help` - Help text below inputs
+  - `--success`, `--warning`, `--error` - Validation state colors
+  - `--color-1` through `--color-9` - Theme color variants
 
 ### Tables
 - `.pa-table` - Base table
@@ -315,11 +323,17 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.self-stretch` - Stretch item to fill (`align-self: stretch`)
 - `.self-baseline` - Align item to baseline (`align-self: baseline`)
 
+### Spacing (Margin & Padding)
+- **Semantic:** `.m-xs`, `.m-sm`, `.m-md`, `.m-base`, `.m-lg`, `.m-xl`, `.m-2xl`
+- **Directional:** `.mt-*`, `.mr-*`, `.mb-*`, `.ml-*`, `.mx-*`, `.my-*`
+- **Padding:** `.p-xs`, `.p-sm`, `.p-md`, `.p-base`, `.p-lg`, `.p-xl`, `.p-2xl` (and directional variants)
+- **Numeric:** `.m-0` through `.m-20`, `.p-0` through `.p-20` (in px-equivalent rem units)
+
 ### Spacing (Gap)
-- `.gap-0` through `.gap-2xl` - Gap utilities using spacing scale
-- `.gap-1` through `.gap-20` - Numeric gap utilities (in px-equivalent rem units)
-- `.row-gap-*` - Row gap utilities
-- `.column-gap-*` - Column gap utilities
+- **Semantic:** `.gap-0`, `.gap-xs`, `.gap-sm`, `.gap-md`, `.gap-base`, `.gap-lg`, `.gap-xl`, `.gap-2xl`
+- **Numeric:** `.gap-1` through `.gap-20` (in px-equivalent rem units)
+- **Row gap:** `.row-gap-0` through `.row-gap-2xl`
+- **Column gap:** `.column-gap-0` through `.column-gap-2xl`
 
 ### Text Size
 - `.text-2xs` through `.text-4xl` - Font size utilities
@@ -333,12 +347,76 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 
 All components use SCSS variables with `!default` flags, making them fully customizable:
 
-- **Colors**: `$primary-bg`, `$accent-color`, `$text-primary`, etc.
+- **Colors**: `$main-bg`, `$page-bg`, `$subtle-bg`, `$accent-color`, `$text-color-1`, `$text-color-2`, etc.
 - **Spacing**: `$spacing-xs` through `$spacing-2xl`
 - **Typography**: `$font-size-*`, `$line-height-*`, `$font-weight-*`
 - **Components**: `$btn-*`, `$card-*`, `$table-*`, etc.
 
-See `src/scss/_variables.scss` for the complete list.
+See `src/scss/variables/` for the complete list.
+
+## Base CSS Variables (Web Components)
+
+Pure Admin exports `--base-*` CSS custom properties for theming web components (datepickers, multiselects, grids, etc.).
+
+### Background Colors (Semantic)
+| Variable | Default | Usage |
+|----------|---------|-------|
+| `--base-main-bg` | `#ffffff` | Cards, modals, primary content |
+| `--base-page-bg` | `#f8f9fa` | Page background, subtle sections |
+| `--base-subtle-bg` | `#e9ecef` | Muted areas, dividers |
+| `--base-inverse-bg` | `#2c3e50` | Tooltips, dark elements |
+| `--base-overlay-bg` | `rgba(0,0,0,0.5)` | Modal overlays, backdrops |
+| `--base-hover-bg` | (subtle-bg) | Hover state background |
+| `--base-active-bg` | (darker) | Active/pressed state |
+| `--base-disabled-bg` | (subtle-bg) | Disabled elements |
+
+### Accent Colors
+| Variable | Default | Usage |
+|----------|---------|-------|
+| `--base-accent-color` | `#3b82f6` | Primary accent |
+| `--base-accent-color-hover` | (lighter) | Hover state |
+| `--base-accent-color-active` | (darker) | Active state |
+| `--base-accent-color-light` | (10% opacity) | Subtle highlights |
+
+### Text Colors
+| Variable | Default | Usage |
+|----------|---------|-------|
+| `--base-text-color-1` | `#1f2937` | Primary text |
+| `--base-text-color-2` | `#4b5563` | Secondary text |
+| `--base-text-color-3` | `#6b7280` | Tertiary/muted text |
+| `--base-text-color-4` | `#a3b1bf` | Disabled text |
+| `--base-text-color-on-accent` | `#ffffff` | Text on accent backgrounds |
+
+### Input Fields
+| Variable | Usage |
+|----------|-------|
+| `--base-input-background` | Input background |
+| `--base-input-color` | Input text color |
+| `--base-input-border` | Border shorthand |
+| `--base-input-border-hover` | Hover border |
+| `--base-input-border-focus` | Focus border |
+| `--base-input-placeholder-color` | Placeholder text |
+
+### Legacy Aliases (Backward Compatibility)
+The following legacy variables are still exported for backward compatibility:
+- `--base-surface-1` → `--base-main-bg`
+- `--base-surface-2` → `--base-page-bg`
+- `--base-surface-3` → `--base-subtle-bg`
+- `--base-surface-inverse` → `--base-inverse-bg`
+
+### Usage in Web Components
+```css
+/* Web components consume via fallback chains */
+.my-component {
+  background: var(--base-main-bg, #ffffff);
+  color: var(--base-text-color-1, #1f2937);
+  border: 1px solid var(--base-border-color, #e5e7eb);
+}
+
+.my-component:hover {
+  background: var(--base-hover-bg, var(--base-subtle-bg, #e9ecef));
+}
+```
 
 ## License