mirror of https://github.com/johndoe6345789/metabuilder.git synced 2026-05-03 18:24:53 +00:00

Files

T

git b57ac8d895 Add initial M3 component library and update styles

Introduces a new 'fakemui' component library with Button, Card, Table, and Tabs components, including supporting SCSS and utility files. Adds extensive Material 3 SCSS theme files and updates various style modules and atom styles for improved consistency and compatibility.

2026-01-22 05:42:33 +00:00

2.0 KiB

Raw Blame History

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:

scss/theme.scss - Generates official M3 CSS custom properties (--mat-sys-*) from Google's Angular Material M3 SCSS
components/_tokens.scss - SCSS variables that reference M3 CSS custom properties
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

Replace @use '../styles/variables' with @use '../_tokens' as m3
Update color references: var(--color-primary) → m3.$primary
Update shape references: var(--radius-md) → m3.$corner-medium
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);
}

2.0 KiB Raw Blame History