@keenmate/web-multiselect 1.3.0 → 1.4.0

package/README.md

@@ -1504,6 +1504,64 @@ interface MultiSelectOption {
 
 The component uses Shadow DOM for style encapsulation, but exposes CSS custom properties (CSS variables) that you can override to customize the appearance.
 
+### Theme Designer
+
+The easiest way to customize the appearance of this component is using the **KeenMate Theme Designer** at:
+
+**[theme-designer.keenmate.dev](https://theme-designer.keenmate.dev)**
+
+#### How It Works
+
+1. **Choose 3 base colors** - background, text, and accent
+2. **Preview changes live** - see your theme applied instantly
+3. **Fine-tune individual variables** - lock specific values while adjusting others
+4. **Export your theme** - copy CSS, JSON, or SCSS to your project
+
+#### CSS Variable Layers
+
+KeenMate components support a **two-layer theming architecture**:
+
+**Standalone Mode (Simple)** - Just override the component-specific variables you need:
+
+```css
+:root {
+  --ms-accent-color: #your-brand-color;
+  --ms-primary-bg: #your-background;
+  --ms-text-primary: #your-text-color;
+}
+```
+
+**Cascading Mode (Multi-Component)** - When using multiple KeenMate components, you can define a shared base layer:
+
+```css
+:root {
+  /* Base layer - single source of truth */
+  --base-accent-color: #3b82f6;
+  --base-primary-bg: #ffffff;
+  --base-text-primary: #111827;
+
+  /* Components reference base layer */
+  --ms-accent-color: var(--base-accent-color);
+  --drp-accent-color: var(--base-accent-color);
+}
+```
+
+Change `--base-accent-color` once → all components update automatically.
+
+#### Unified Variable Naming
+
+All KeenMate components follow a consistent naming convention for **Tier 1 variables** (core theming):
+
+| Purpose | web-multiselect | web-daterangepicker |
+|---------|-----------------|---------------------|
+| Brand color | `--ms-accent-color` | `--drp-accent-color` |
+| Background | `--ms-primary-bg` | `--drp-primary-bg` |
+| Text color | `--ms-text-primary` | `--drp-text-primary` |
+| Text on accent | `--ms-text-on-accent` | `--drp-text-on-accent` |
+| Border color | `--ms-border-color` | `--drp-border-color` |
+
+Learn the pattern once, apply it across all components.
+
 ### CSS Variables (No Build System Required)
 
 You can customize the component using CSS variables even with just a `<script>` tag: