41 lines
2.8 KiB
Markdown
41 lines
2.8 KiB
Markdown
# Model Resolver - CSS Architecture & Design Tokens
|
|
|
|
This directory contains the core stylesheets and token system for the `comfyui-model-resolver` extension.
|
|
|
|
## Stylesheet Structure
|
|
|
|
- **`css-variables.css`**: Central design system token registry (`:root`). Structured into 5 clear sections:
|
|
1. *Base Palette & Overlays* (grayscale, primary colors, dark/light overlays)
|
|
2. *Typography, Spacing, Transitions & Z-Index* (font families, spacing scale, radii, transitions, z-index hierarchy)
|
|
3. *Theme Semantic Colors & Surfaces* (main background shades, card/panel backgrounds, text hierarchy, action colors)
|
|
4. *Model & Node Type Badges* (RGB/text tokens for model types: LoRA, VAE, CLIP, ControlNet, etc.)
|
|
5. *Component Tokens, Badges, Shadows & Layout Dimensions* (buttons, inputs, status badges, shadows, gradients, scrollbars, and drawer widths)
|
|
- **`resolver-main.css`**: Styles for the main dialog, missing models browser, tab contents, lists, search tables, and model details views.
|
|
- **`resolver-shell.css`**: Styles for the outer modal shell, sidebar docking panel, window controls, and queue drawer.
|
|
- **`missing-type-filter.css`**: Styles for the Missing Models type filter control and menu.
|
|
|
|
## Usage Guidelines
|
|
|
|
1. **Always Use CSS Variables**:
|
|
Avoid using raw hex colors (e.g. `#111111`, `#4caf50`) or hardcoded pixel values when a variable exists.
|
|
- **Backgrounds & Surfaces**: `var(--mr-bg)`, `var(--mr-bg-soft)`, `var(--mr-card-bg)`, `var(--mr-panel-bg)`
|
|
- **Text Colors**: `var(--mr-text)`, `var(--mr-text-muted)`, `var(--mr-text-dim)`, `var(--mr-text-soft)`
|
|
- **Accent & Status**: `var(--mr-accent)`, `var(--mr-warning)`, `var(--mr-color-civitai)`, `var(--mr-color-blue-info)`, `var(--mr-color-success-action)`
|
|
- **Typography**: `var(--mr-font-family-sans)`, `var(--mr-font-family-mono)`
|
|
- **Shadows**: `var(--mr-shadow-dialog)`, `var(--mr-shadow-card)`, `var(--mr-shadow-floating)`, `var(--mr-shadow-focus-ring)`
|
|
- **Button & Layout Dimensions**: `var(--mr-button-height-sm)` (26px), `var(--mr-button-height-md)` (30px), `var(--mr-missing-row-height)` (70px), `var(--mr-queue-drawer-width)` (320px), `var(--mr-splitter-width)` (10px)
|
|
|
|
2. **Standardized Transitions**:
|
|
Use smooth transition tokens instead of inline timing strings:
|
|
- Multi-property smooth: `var(--mr-transition-smooth)`
|
|
- Popovers & Modals: `var(--mr-transition-popover)`
|
|
- Transforms: `var(--mr-transition-transform)`
|
|
- Width changes: `var(--mr-transition-width)`
|
|
- Form Controls: `var(--mr-missing-control-transition)`
|
|
|
|
3. **Fallbacks in `var(...)`**:
|
|
When specifying a fallback value inside `var(--mr-variable, fallback)`, ensure the fallback matches the exact value defined in `css-variables.css`.
|
|
|
|
4. **Node / Model Type Chips**:
|
|
Use `--mr-type-<model_type>-text` and `--mr-type-<model_type>-rgb` for model type badges, borders, and glow highlights.
|