metabuilder/scss/docs/DEPRECATED.md

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):

@use '../styles/variables';

.button {
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

After (M3):

@use '../_tokens' as m3;

.button {
  background: m3.$primary;
  border-radius: m3.$corner-full;
  padding: 0 24px;
  @include m3.typography(label-large);
}