mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-26 14:54:55 +00:00
68 lines
2.0 KiB
Markdown
68 lines
2.0 KiB
Markdown
# DEPRECATED: Legacy Styles
|
|
|
|
> **This folder is deprecated.** New components should use the M3 token system.
|
|
|
|
## Migration Guide
|
|
|
|
The styles in this folder use legacy CSS custom properties (`--color-*`, `--spacing-*`) that are **not** part of the Material Design 3 specification.
|
|
|
|
### New Architecture
|
|
|
|
All FakeMUI components should now use:
|
|
|
|
1. **`scss/theme.scss`** - Generates official M3 CSS custom properties (`--mat-sys-*`) from Google's Angular Material M3 SCSS
|
|
2. **`components/_tokens.scss`** - SCSS variables that reference M3 CSS custom properties
|
|
3. **`scss/m3-scss/`** - Official Google Angular Material M3 SCSS source
|
|
|
|
### Token Mapping
|
|
|
|
| Legacy Token | M3 Token |
|
|
|--------------|----------|
|
|
| `--color-primary` | `--mat-sys-primary` |
|
|
| `--color-text` | `--mat-sys-on-surface` |
|
|
| `--color-bg` | `--mat-sys-surface` |
|
|
| `--color-border` | `--mat-sys-outline` |
|
|
| `--spacing-*` | Use fixed values (4px, 8px, 12px, 16px, 24px, 32px) |
|
|
| `--radius-*` | `--mat-sys-corner-*` |
|
|
| `--shadow-*` | `--mat-sys-level*` |
|
|
|
|
### Migration Steps
|
|
|
|
1. Replace `@use '../styles/variables'` with `@use '../_tokens' as m3`
|
|
2. Update color references: `var(--color-primary)` → `m3.$primary`
|
|
3. Update shape references: `var(--radius-md)` → `m3.$corner-medium`
|
|
4. Use the typography mixin: `@include m3.typography(label-large)`
|
|
|
|
### Files to Migrate
|
|
|
|
Components still using legacy styles should be refactored to use the M3 system:
|
|
|
|
- `styles/atoms/` - Flat selector styles (can be removed after component migration)
|
|
- `styles/mixins/` - Custom mixins (replaced by M3 patterns)
|
|
- `styles/global/` - Global resets (keep as-is if needed)
|
|
|
|
### Example Migration
|
|
|
|
**Before (Legacy):**
|
|
```scss
|
|
@use '../styles/variables';
|
|
|
|
.button {
|
|
background: var(--color-primary);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
```
|
|
|
|
**After (M3):**
|
|
```scss
|
|
@use '../_tokens' as m3;
|
|
|
|
.button {
|
|
background: m3.$primary;
|
|
border-radius: m3.$corner-full;
|
|
padding: 0 24px;
|
|
@include m3.typography(label-large);
|
|
}
|
|
```
|