mirror of
https://github.com/hamen/material-3-skill.git
synced 2026-09-19 03:34:43 +08:00
Merge pull request #3 from hamen/fix/broken-reference-urls
docs: Compose-first Material 3 skill refresh
This commit is contained in:
Ivan Morgillo
@@ -0,0 +1,48 @@
|
||||
# Contributing
|
||||
|
||||
This repo is a **Claude Code skill**: markdown that guides agents to produce **Material Design 3**–aligned UI. Keep changes **accurate**, **minimal**, and aligned with the **Compose-first** story in [README.md](README.md).
|
||||
|
||||
## Platform hierarchy (do not invert)
|
||||
|
||||
1. **Jetpack Compose** (`androidx.compose.material3`) — primary audience and most current implementation guidance.
|
||||
2. **Flutter** — secondary; `useMaterial3`, `ColorScheme.fromSeed`, etc.
|
||||
3. **Web** (`@material/web`, CSS tokens) — **limited**; [Material Web is in maintenance mode](https://m3.material.io/develop/web) and **M3 Expressive is not on Web**.
|
||||
|
||||
New examples or sections should default to **Compose** unless the change is explicitly web- or Flutter-only.
|
||||
|
||||
## M3 Expressive
|
||||
|
||||
Do **not** claim a feature is “available everywhere.” Use the **platform matrix** pattern in [SKILL.md](SKILL.md) (and mirror nuance in [references/typography-and-shape.md](references/typography-and-shape.md)): Compose vs Flutter vs Web, with opt-in / BOM caveats where APIs move quickly.
|
||||
|
||||
## Facts to double-check
|
||||
|
||||
- **Flutter:** `useMaterial3: true` — not `material3: true`.
|
||||
- **Dynamic color from wallpaper:** Android 12+ (API 31+) for system wallpaper schemes — not a generic browser feature.
|
||||
- **Contrast:** MD3 roles help; still distinguish **UI component** contrast (often 3:1) vs **body text** (typically 4.5:1) per WCAG — see audit wording in [SKILL.md](SKILL.md).
|
||||
- **Shape:** Keep dialog vs card token usage consistent across [SKILL.md](SKILL.md) and [references/typography-and-shape.md](references/typography-and-shape.md).
|
||||
- **Tonal palettes:** Do not reintroduce a wrong count for palette stops; see [references/color-system.md](references/color-system.md).
|
||||
|
||||
## Where to edit
|
||||
|
||||
| Topic | Start here |
|
||||
|-------|------------|
|
||||
| Skill entry, decision tree, audit | [SKILL.md](SKILL.md) |
|
||||
| Color roles, dynamic color | [references/color-system.md](references/color-system.md) |
|
||||
| Theming, dark mode, JS/CSS | [references/theming-and-dynamic-color.md](references/theming-and-dynamic-color.md) |
|
||||
| Type, shape, motion, elevation | [references/typography-and-shape.md](references/typography-and-shape.md) |
|
||||
| Components, Compose + web | [references/component-catalog.md](references/component-catalog.md) |
|
||||
| Navigation | [references/navigation-patterns.md](references/navigation-patterns.md) |
|
||||
| Breakpoints, insets, foldables | [references/layout-and-responsive.md](references/layout-and-responsive.md) |
|
||||
| Repo overview, install | [README.md](README.md) |
|
||||
|
||||
Keep **SKILL.md** as an index; put deep Compose or web detail in **references/** unless a short snippet in SKILL is clearly better.
|
||||
|
||||
## PR checklist
|
||||
|
||||
- [ ] Compose-first wording preserved where both Compose and web appear.
|
||||
- [ ] Web sections still mention maintenance / no Expressive parity when relevant.
|
||||
- [ ] No contradictory token tables between files.
|
||||
- [ ] Code snippets are labeled if pseudocode, BOM-dependent, or API-version-sensitive.
|
||||
- [ ] Official links updated if you change behavior claims ([m3.material.io](https://m3.material.io/), [Android Developers](https://developer.android.com/develop/ui/compose/designsystems/material3)).
|
||||
|
||||
Thank you for helping keep this skill trustworthy for readers and agents.
|
||||
@@ -7,6 +7,7 @@ A comprehensive [Claude Code](https://claude.ai/claude-code) skill for implement
|
||||
## Table of contents
|
||||
|
||||
- [What it does](#what-it-does)
|
||||
- [Platform support](#platform-support)
|
||||
- [How this skill was built](#how-this-skill-was-built)
|
||||
- [Sources](#sources)
|
||||
- [Process](#process)
|
||||
@@ -18,48 +19,60 @@ A comprehensive [Claude Code](https://claude.ai/claude-code) skill for implement
|
||||
- [Scaffold an app](#scaffold-an-app)
|
||||
- [Audit MD3 compliance](#audit-md3-compliance)
|
||||
- [What's included](#whats-included)
|
||||
- [Contributing](#contributing)
|
||||
- [License](#license)
|
||||
|
||||
## What it does
|
||||
|
||||
- Guides Claude in generating **MD3-compliant UI code** with correct design tokens, components, theming, layout, and accessibility
|
||||
- Covers **30+ components** with web element names, attributes, and code examples
|
||||
- Supports **web** (`@material/web`), **Flutter**, and **Jetpack Compose**
|
||||
- Includes an **MD3 compliance audit** mode that scores apps across 10 categories
|
||||
- Covers the **M3 Expressive** update (May 2025): spring motion, emphasized typography, shape morphing
|
||||
- Guides Claude in generating **MD3-compliant UI** with correct design tokens, components, theming, layout, and accessibility
|
||||
- **Primary focus: Jetpack Compose** — `MaterialTheme`, Material 3 composables, adaptive layouts, edge-to-edge/insets, and current Compose Material3 patterns
|
||||
- Also covers **Flutter** (`useMaterial3`, `ColorScheme.fromSeed`, etc.) at a secondary level
|
||||
- **Web (`@material/web`)** is documented as a **limited** path: [Material Web is in maintenance mode](https://m3.material.io/develop/web) and **M3 Expressive is not implemented on Web**; use tokens and components knowing the ecosystem is not receiving active feature work
|
||||
- Covers **30+ components** with Compose-oriented mappings plus web element names where applicable, attributes, and examples in `references/component-catalog.md`
|
||||
- Includes an **MD3 compliance audit** mode that scores apps across 10 categories (works for Compose/Kotlin, Flutter/Dart, and web/CSS)
|
||||
- Covers **M3 Expressive** (May 2025) with an explicit **per-platform** matrix — see [SKILL.md](SKILL.md) and [references/typography-and-shape.md](references/typography-and-shape.md)
|
||||
|
||||
## Platform support
|
||||
|
||||
| Platform | Role in this skill | Notes |
|
||||
|----------|---------------------|--------|
|
||||
| **Jetpack Compose** | **Primary** | Best match for current Material 3 implementation APIs, Expressive motion where available, adaptive navigation |
|
||||
| **Flutter** | Secondary | `ThemeData(useMaterial3: true)`, `ColorScheme.fromSeed`, community packages for dynamic color |
|
||||
| **Web** | Limited | `@material/web` + CSS custom properties; maintenance mode; no full Expressive parity |
|
||||
|
||||
## How this skill was built
|
||||
|
||||
This skill was created collaboratively between a human and [Claude Code](https://claude.ai/claude-code) (Anthropic's coding agent). The information in the skill files is **distilled from publicly available sources** — it is not original design system documentation, but a curated reference assembled from what exists on the web and in Claude's training data.
|
||||
This skill was created collaboratively between a human and [Claude Code](https://claude.ai/claude-code) (Anthropic's coding agent). The information in the skill files is **distilled from publicly available sources** — it is not original design system documentation, but a curated reference assembled from official docs, library references, and training data.
|
||||
|
||||
### Sources
|
||||
|
||||
All design token values, component specs, layout breakpoints, color roles, typography scales, and implementation patterns in this skill were gathered from:
|
||||
Design token values, component specs, layout breakpoints, color roles, typography scales, and implementation patterns were gathered from:
|
||||
|
||||
- **[m3.material.io](https://m3.material.io/)** — Google's official Material Design 3 documentation site, browsed live using Claude Code's Chrome browser automation tools
|
||||
- **Claude's training data** — which includes publicly available Material Design documentation, `@material/web` API references, Flutter and Jetpack Compose documentation, and community guides published before the training cutoff
|
||||
- **[@material/web](https://github.com/material-components/material-web) source code** — the official web component library for MD3, used to verify element names, attributes, and import paths
|
||||
- **[m3.material.io](https://m3.material.io/)** — Google's official Material Design 3 documentation
|
||||
- **[Android Developers — Material Design 3 in Compose](https://developer.android.com/develop/ui/compose/designsystems/material3)** and **AndroidX Compose Material3** API references
|
||||
- **Claude's training data** — publicly available Material Design documentation, Flutter and Jetpack Compose documentation, `@material/web` references, and community guides
|
||||
- **[@material/web](https://github.com/material-components/material-web)** — used to verify web component element names, attributes, and import paths where web guidance is included
|
||||
|
||||
### Process
|
||||
|
||||
1. **Planning phase** — We outlined the skill structure: a main `SKILL.md` covering philosophy, decision trees, token overview, component tables, implementation patterns, and an audit procedure, plus 6 focused reference files.
|
||||
1. **Planning phase** — Main `SKILL.md` plus focused reference files under `references/`.
|
||||
|
||||
2. **Live site research** — Because m3.material.io is a JavaScript-rendered single-page application (standard `fetch`/`curl` returns an empty shell), we used Claude Code's **Chrome browser automation** (via MCP tools) to navigate the live site, read rendered content, take screenshots, and click through tabbed sections. This was essential for verifying current token values, the full component list, elevation levels, color roles, and the M3 Expressive update details (May 2025) that may not yet be reflected in training data.
|
||||
2. **Live site research** — m3.material.io is often a JavaScript-rendered SPA; browser automation helps verify current token values, component lists, and Expressive updates.
|
||||
|
||||
3. **Cross-referencing with training data** — The live site content was cross-referenced with Claude's existing knowledge of Material Design 3 to fill in implementation details, code examples, CSS custom property names, Flutter/Compose APIs, and patterns that the site covers at a conceptual level but doesn't always spell out as copy-paste code.
|
||||
3. **Cross-referencing** — Official Compose and Flutter docs fill in copy-paste APIs; web sections stay secondary.
|
||||
|
||||
4. **Distillation into skill format** — The raw information was condensed into the skill's markdown files. Token values were organized into lookup tables. Component specs were normalized into a consistent template (element name, import path, attributes, code example, customization properties, accessibility notes). Layout and navigation patterns were turned into complete, working code examples.
|
||||
4. **Distillation** — Token tables, component templates, and layout examples normalized for consistency.
|
||||
|
||||
5. **Audit system design** — We designed a 10-category MD3 compliance audit (color, typography, shape, elevation, components, layout, navigation, motion, accessibility, theming) that can analyze both source code and live applications, producing a scored report with specific remediation steps.
|
||||
5. **Audit system** — 10-category MD3 compliance audit adaptable to Compose, Flutter, or web source trees.
|
||||
|
||||
### What this means for accuracy
|
||||
|
||||
The skill represents a **best-effort distillation** of Material Design 3 as of early 2025. Because it was assembled from public web sources and training data:
|
||||
The skill is a **best-effort distillation** and may drift as Google updates the spec.
|
||||
|
||||
- Token values and component specs reflect what was published on m3.material.io at the time of creation
|
||||
- Code examples use `@material/web` APIs that were current at the time — some components (marked with `—` in the catalog) don't have official web component implementations yet
|
||||
- The M3 Expressive update (spring motion, emphasized typography, shape morphing) is covered, but some features (like shape morphing on web) are noted as unavailable on certain platforms
|
||||
- If Google updates the spec, this skill may drift — contributions and corrections are welcome
|
||||
- **Compose** guidance is prioritized for currency; prefer official Android docs for exact API signatures and BOM versions.
|
||||
- **Web**: Material Web is [in maintenance mode](https://m3.material.io/develop/web); M3 Expressive is **not** on Web. Examples may lag; verify against the [material-web](https://github.com/material-components/material-web) repo.
|
||||
- **M3 Expressive** (motion, emphasized type, shape morphing, new radii) varies by platform — see the Expressive sections in [SKILL.md](SKILL.md).
|
||||
- Contributions and corrections are welcome.
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -105,19 +118,24 @@ ln -s /path/to/material-3-skill ~/.claude/skills/material-3
|
||||
/material-3 audit [URL or file path]
|
||||
```
|
||||
|
||||
The audit scores your app across 10 categories (color tokens, typography, shape, elevation, components, layout, navigation, motion, accessibility, theming) and produces a detailed report with specific fixes.
|
||||
The audit scores your app across 10 categories (color tokens, typography, shape, elevation, components, layout, navigation, motion, accessibility, theming) and produces a detailed report with specific fixes. Targets may be **Compose/Kotlin**, **Flutter**, or **web** — see [SKILL.md](SKILL.md) for per-stack checks.
|
||||
|
||||
## What's included
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `SKILL.md` | Main skill: philosophy, decision trees, token overview, component table, web implementation patterns, audit procedure |
|
||||
| `references/color-system.md` | All 29+ color roles, tonal palettes, dynamic color, baseline scheme CSS |
|
||||
| `references/component-catalog.md` | All 30+ components with `@material/web` elements, attributes, code examples |
|
||||
| `references/theming-and-dynamic-color.md` | Theme generation, brand colors, dark mode, runtime switching |
|
||||
| `references/typography-and-shape.md` | Type scale (30 styles), shape corner tokens, elevation levels, motion tokens |
|
||||
| `references/navigation-patterns.md` | Nav component selection, responsive transitions, complete responsive shell |
|
||||
| `references/layout-and-responsive.md` | 5 breakpoints, 3 canonical layouts, CSS Grid implementation |
|
||||
| `SKILL.md` | Main skill: philosophy, decision trees, token overview, component table, Compose-first notes, limited web patterns, audit procedure |
|
||||
| `references/color-system.md` | Color roles, tonal palettes, dynamic color, baseline schemes (Compose + CSS) |
|
||||
| `references/component-catalog.md` | Components with Compose mappings and `@material/web` where applicable |
|
||||
| `references/theming-and-dynamic-color.md` | Theme generation, brand colors, dark mode — Compose first, then Flutter and web |
|
||||
| `references/typography-and-shape.md` | Type scale, shape, elevation, motion — including Expressive platform notes |
|
||||
| `references/navigation-patterns.md` | Nav selection, Compose-first patterns, responsive shell |
|
||||
| `references/layout-and-responsive.md` | Breakpoints, canonical layouts, edge-to-edge/insets, foldables |
|
||||
| `CONTRIBUTING.md` | How to contribute without drifting the Compose-first story |
|
||||
|
||||
## Contributing
|
||||
|
||||
See [CONTRIBUTING.md](CONTRIBUTING.md) for platform hierarchy (Compose-first), Expressive rules, and a PR checklist so documentation stays consistent.
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
---
|
||||
name: material-3
|
||||
description: >
|
||||
Implement Google's Material Design 3 (Material You) UI system. Covers design tokens
|
||||
(color, typography, shape, elevation, motion), 30+ components, responsive layout,
|
||||
dynamic color theming, and accessibility. Supports web (@material/web), Flutter,
|
||||
and Jetpack Compose. Use when: "material design", "MD3", "material you",
|
||||
"material component", "material theme", "@material/web", "md3 button",
|
||||
"material card", "material navigation".
|
||||
Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose
|
||||
Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web
|
||||
(@material/web, maintenance mode). Covers tokens, 30+ components, layout, theming,
|
||||
M3 Expressive (platform matrix), and accessibility. Use when: "material design", "MD3",
|
||||
"material you", "Jetpack Compose", "MaterialTheme", "material component", "md3 button".
|
||||
user-invokable: true
|
||||
argument-hint: "[component|theme|layout|scaffold|audit] [description or URL]"
|
||||
---
|
||||
@@ -46,16 +45,16 @@ Data display → See references/component-catalog.md § Data Display
|
||||
|
||||
**What platform?**
|
||||
```
|
||||
Web (vanilla JS) → @material/web components + CSS custom properties
|
||||
Jetpack Compose → Primary: androidx.compose.material3, MaterialTheme, references/*
|
||||
Flutter → useMaterial3: true in ThemeData, ColorScheme.fromSeed()
|
||||
Web (vanilla JS) → @material/web (limited; maintenance mode) + CSS custom properties
|
||||
Web (React/Vue/Svelte) → CSS custom properties + wrapper components (no official React lib)
|
||||
Web (CSS-only) → Use MD3 token values as CSS custom properties (no <md-*> elements)
|
||||
Flutter → material3: true in ThemeData, ColorScheme.fromSeed()
|
||||
Jetpack Compose → MaterialTheme with Material3 dependencies
|
||||
Web (CSS-only) → MD3 token values as CSS custom properties (no <md-*> elements)
|
||||
```
|
||||
|
||||
## Design Token System
|
||||
|
||||
All MD3 tokens use the `md.sys` namespace. On the web, these map to CSS custom properties:
|
||||
All MD3 tokens use the `md.sys` namespace. **Jetpack Compose** maps roles to `MaterialTheme.colorScheme`, `MaterialTheme.typography`, and `MaterialTheme.shapes` (same semantic roles as the spec). **On the web**, these map to CSS custom properties (`--md-sys-*`):
|
||||
|
||||
### Color Tokens (`--md-sys-color-*`)
|
||||
| Token | Purpose |
|
||||
@@ -105,10 +104,10 @@ Full details: `references/typography-and-shape.md`
|
||||
| `none` | 0dp | — |
|
||||
| `extra-small` | 4dp | Chips, snackbars |
|
||||
| `small` | 8dp | Text fields, menus |
|
||||
| `medium` | 12dp | Cards, dialogs |
|
||||
| `medium` | 12dp | Cards |
|
||||
| `large` | 16dp | FABs, navigation drawer |
|
||||
| `large-increased` | 20dp | (Expressive) |
|
||||
| `extra-large` | 28dp | Bottom sheets |
|
||||
| `extra-large` | 28dp | Dialogs, bottom sheets |
|
||||
| `extra-large-increased` | 32dp | (Expressive) |
|
||||
| `extra-extra-large` | 48dp | (Expressive) |
|
||||
| `full` | 9999px | Buttons, chips, badges |
|
||||
@@ -186,11 +185,32 @@ CSS easing values:
|
||||
| Toolbar | — | — | Navigation |
|
||||
| List | `md-list`, `md-list-item` | One-line, Two-line, Three-line | Data Display |
|
||||
|
||||
**Note:** Components marked with `—` for web element don't have @material/web implementations yet. Use CSS custom properties with standard HTML for these.
|
||||
**Note:** Components marked with `—` for web element don't have @material/web implementations yet. Use CSS custom properties with standard HTML for these. **Compose** mappings and examples live in `references/component-catalog.md`.
|
||||
|
||||
Full component details with code examples: `references/component-catalog.md`
|
||||
|
||||
## Web Implementation with @material/web
|
||||
## Jetpack Compose (primary)
|
||||
|
||||
Use **`androidx.compose.material3`** with `MaterialTheme` and Material 3 composables (`Scaffold`, `Button`, `NavigationBar`, top app bars, etc.).
|
||||
|
||||
- **Theming**: `MaterialTheme(colorScheme = …, typography = …, shapes = …)`. Prefer `dynamicLightColorScheme` / `dynamicDarkColorScheme` on **Android 12+ (API 31+)** when dynamic color is desired; otherwise `lightColorScheme` / `darkColorScheme` or generated theme code from Material Theme Builder.
|
||||
- **Adaptive UI**: Window size classes, list-detail and supporting-pane layouts, foldables — see `references/layout-and-responsive.md` and `references/navigation-patterns.md`.
|
||||
- **Edge-to-edge & insets**: Lay out content with `WindowInsets` / scaffold padding so bars and IME behave correctly — see `references/layout-and-responsive.md`.
|
||||
- **Experimental APIs**: Some Material 3 APIs require `@OptIn(ExperimentalMaterial3Api::class)` or expressive opt-ins; match your BOM and compiler.
|
||||
|
||||
```kotlin
|
||||
MaterialTheme(
|
||||
colorScheme = colorScheme, // from dynamicLightColorScheme / lightColorScheme / etc.
|
||||
typography = Typography(),
|
||||
shapes = Shapes(),
|
||||
) {
|
||||
// M3 content — prefer references for Scaffold, navigation, text fields
|
||||
}
|
||||
```
|
||||
|
||||
## Web (limited): @material/web
|
||||
|
||||
**Important:** Per [Material Design 3 for Web](https://m3.material.io/develop/web), **Material Web Components are in maintenance mode** and **M3 Expressive is not implemented on Web**. Use `@material/web` for token-backed web UIs when appropriate, but do not treat it as equivalent to Compose for current Expressive features.
|
||||
|
||||
### Setup
|
||||
|
||||
@@ -481,7 +501,7 @@ More patterns: `references/navigation-patterns.md`, `references/layout-and-respo
|
||||
- **Import all of @material/web**: Always import individual component modules. Barrel imports include every component and destroy bundle size.
|
||||
- **Use `border-radius` directly**: Use shape tokens (`var(--md-sys-shape-corner-medium)`) so shapes stay consistent with theming.
|
||||
- **Use shadows for elevation by default**: MD3 communicates elevation through tonal surface color, not shadows. Only add shadows when elements need extra separation from busy backgrounds.
|
||||
- **Apply frontend-design "avoid Roboto" rule**: Roboto Flex is the intended MD3 typeface. It's correct here. Replace it only if intentionally customizing the type scale.
|
||||
- **Apply frontend-design "avoid Roboto" rule**: On **Android**, **Roboto** is the default Material typeface; **web** often uses Roboto or Roboto Flex with MD3 tokens. Replace only when intentionally customizing the type scale.
|
||||
- **Assume SSR compatibility**: `@material/web` uses Web Components (custom elements) which require JavaScript to render. They won't produce meaningful HTML in SSR without additional hydration strategies.
|
||||
- **Ignore foldables and large screens**: MD3 is designed for all screen sizes. Don't ship phone-only layouts — use canonical layouts, multi-pane at 600dp+, and test on foldable/tablet emulators. Place no interactive content across the fold/hinge.
|
||||
- **Stretch content to fill wide screens**: On Large (1200dp+) and Extra-large (1600dp+) windows, constrain content to a max width (840–1040dp). Endless-width text lines are unreadable.
|
||||
@@ -499,15 +519,7 @@ MaterialApp(
|
||||
```
|
||||
|
||||
### Jetpack Compose
|
||||
```kotlin
|
||||
MaterialTheme(
|
||||
colorScheme = dynamicLightColorScheme(context), // or dynamicDarkColorScheme
|
||||
typography = Typography(),
|
||||
shapes = Shapes(),
|
||||
) {
|
||||
// Content
|
||||
}
|
||||
```
|
||||
See **[Jetpack Compose (primary)](#jetpack-compose-primary)** above. Use `LocalContext.current` with `dynamicLightColorScheme` / `dynamicDarkColorScheme` only when `Build.VERSION.SDK_INT >= Build.VERSION_CODES.S` and dynamic color is enabled; otherwise supply static light/dark schemes.
|
||||
|
||||
### Component Name Mapping
|
||||
| Concept | Web | Flutter | Compose |
|
||||
@@ -520,15 +532,20 @@ MaterialTheme(
|
||||
|
||||
## M3 Expressive (May 2025)
|
||||
|
||||
The Expressive update adds visual richness while maintaining usability:
|
||||
- **Spring-based motion**: Components now use spring physics instead of fixed easing curves. More natural and responsive. (Easing/duration still used for transitions.)
|
||||
- **Emphasized typography**: 15 new emphasized type styles for selection states, actions, and headlines. Higher weight than baseline.
|
||||
- **Shape morphing**: Components can morph between shapes on interaction (press, select). Currently Compose-only; web unavailable.
|
||||
- **New button sizes**: XS, S (default), M, L, XL with toggle (selection) support.
|
||||
- **New corner radii**: large-increased (20dp), extra-large-increased (32dp), extra-extra-large (48dp).
|
||||
- **3 contrast levels**: Standard, medium, and high contrast — user-controlled.
|
||||
The Expressive update adds visual richness while maintaining usability. **Availability differs by platform** — do not assume one stack implements everything.
|
||||
|
||||
When targeting web, note that many Expressive features (shape morph, spring physics) aren't yet available in @material/web. Use the CSS easing/duration tokens as fallback.
|
||||
| Capability | Jetpack Compose | Flutter | Web (`@material/web`) |
|
||||
|------------|-----------------|---------|------------------------|
|
||||
| Spring / motion physics | Supported in Material 3 (see `MotionScheme`, expressive APIs per BOM) | Varies by Flutter Material version | **Not** in Material Web; use easing/duration or custom motion |
|
||||
| Emphasized typography | Via theme / type scale | Via theme | Token/CSS only; no full Expressive component set |
|
||||
| Shape morphing | Compose-first in Google’s expressive rollout | Check current Flutter docs | **Not** in `@material/web` |
|
||||
| New button sizes (XS–XL), toggle | Follow Compose Material3 components | Follow Flutter MD3 | Height/CSS approximations only |
|
||||
| Extra corner tokens (e.g. large-increased) | `MaterialTheme.shapes` / tokens | Theme shapes | CSS `--md-sys-shape-*` |
|
||||
| 3 contrast levels | Scheme builders / system | Plugins / manual | `SchemeContent` contrast parameter in JS utilities |
|
||||
|
||||
**Web:** [Material Web is maintenance-only; M3 Expressive is not on Web](https://m3.material.io/develop/web). Use CSS easing/duration tokens as fallback for motion, not spring parity.
|
||||
|
||||
**Legacy easing/duration** remains valid for **transitions** (enter/exit/shared-axis) where the spec still references them; see the Motion table below.
|
||||
|
||||
## MD3 Compliance Audit
|
||||
|
||||
@@ -541,16 +558,16 @@ When invoked with `audit` as the argument (e.g., `/material-3 audit`), or when a
|
||||
|
||||
| Category | What to check |
|
||||
|----------|--------------|
|
||||
| **Color tokens** | Uses `--md-sys-color-*` tokens (not hardcoded hex). Proper tonal pairing (on-X with X). Dark mode support. No arbitrary color combinations that break contrast. |
|
||||
| **Typography** | Uses MD3 type scale tokens. Correct scale usage (Display for heroes, Body for text, Label for buttons). Consistent font family. |
|
||||
| **Shape** | Uses shape tokens for border-radius. Correct token per component (full for buttons, medium for cards). No raw pixel values. |
|
||||
| **Elevation** | Tonal surface colors used instead of shadows. Correct elevation levels per component. Hover/focus raises by 1 level. |
|
||||
| **Components** | Uses `@material/web` elements or correctly implements MD3 component specs. Correct variants for context. Proper slot usage. |
|
||||
| **Layout** | Responsive breakpoints match MD3 (compact/medium/expanded/large/extra-large). Uses canonical layouts where appropriate. Proper margins and spacing. Multi-pane layouts on medium+ screens. Content constrained to readable widths on large screens. Foldable hinge avoidance if targeting foldables. |
|
||||
| **Navigation** | Correct nav component for screen size (bar on mobile, rail on tablet, drawer on desktop). Responsive transitions. Hover states for pointer devices on large screens. |
|
||||
| **Motion** | Transitions use MD3 easing/duration tokens. Appropriate easing type for transition direction (enter/exit/persist). |
|
||||
| **Accessibility** | Color contrast meets 3:1 minimum (MD3 built-in). Proper ARIA labels. Keyboard navigation. Focus indicators. |
|
||||
| **Theming** | Theme is applied via CSS custom properties. Supports dark mode. Dynamic color ready (tokens not hardcoded). Component-level overrides use proper token names. |
|
||||
| **Color tokens** | **Web:** `--md-sys-color-*` / generated CSS. **Compose:** `MaterialTheme.colorScheme` roles (no arbitrary `Color(...)` for surfaces without reason). Proper tonal pairing (`onX` on `X`). Dark theme. **Flutter:** `ColorScheme` roles. |
|
||||
| **Typography** | MD3 type scale: **Compose** `MaterialTheme.typography`; **web** typescale tokens; correct roles (Display, Headline, Title, Body, Label). |
|
||||
| **Shape** | **Compose** `MaterialTheme.shapes` / component `Shape`; **web** `var(--md-sys-shape-*)`. Buttons: full; cards: medium; avoid magic numbers. |
|
||||
| **Elevation** | Tonal elevation (`Surface` tonal/shadow as appropriate). **Web:** hover/focus where relevant. |
|
||||
| **Components** | **Compose:** Material3 composables (`Button`, `Scaffold`, etc.). **Web:** `@material/web` or spec-aligned HTML/CSS. Correct variants. |
|
||||
| **Layout** | Canonical layouts; **Compose** window size class / adaptive APIs; readable max width on large widths; foldable hinge avoidance. |
|
||||
| **Navigation** | Bar / rail / drawer / drawers+**Compose** `NavHost` patterns per size class; predictive back where applicable. |
|
||||
| **Motion** | **Compose** `MotionScheme` / expressive APIs when used; transitions may still use easing/duration. **Web:** CSS motion tokens fallback. |
|
||||
| **Accessibility** | MD3 roles help, but **verify contrast**: UI components often need **3:1** for large text/borders and **4.5:1** for normal text (WCAG 2.x). TalkBack/semantics (Compose), focus order, touch targets (~48dp). **Web:** ARIA, keyboard. |
|
||||
| **Theming** | **Compose:** `MaterialTheme` + light/dark/dynamic as designed. **Web:** CSS custom properties on `:root` or subtree. **Flutter:** `ThemeData` + `ColorScheme`. |
|
||||
|
||||
3. **Generate the report**:
|
||||
|
||||
@@ -591,40 +608,31 @@ Overall Score: [X/100]
|
||||
|
||||
### Audit Methods
|
||||
|
||||
**For a live URL** (browser tools available):
|
||||
- Navigate to the page with `mcp__claude-in-chrome__navigate`
|
||||
- Read the page DOM with `mcp__claude-in-chrome__read_page`
|
||||
- Extract CSS custom properties with `mcp__claude-in-chrome__javascript_tool`
|
||||
- Check computed styles for MD3 token usage
|
||||
- Test responsive behavior by resizing with `mcp__claude-in-chrome__resize_window`
|
||||
- Screenshot at different breakpoints
|
||||
**For a live URL** (browser or devtools):
|
||||
- Inspect computed styles and CSS variables (`--md-sys-*`)
|
||||
- Resize viewport or use responsive mode for breakpoints
|
||||
- Capture screenshots at key widths if helpful
|
||||
|
||||
**For source code** (file paths provided):
|
||||
- Read HTML/JSX/template files for component usage
|
||||
- Read CSS/SCSS files for token usage and hardcoded values
|
||||
- Check imports for @material/web components
|
||||
- Search for hardcoded colors, border-radius values, box-shadows
|
||||
- Verify responsive breakpoints in media queries
|
||||
- **Compose/Kotlin:** `.kt` files — `MaterialTheme`, composables, `Color(0x…)` abuse, hard-coded `Dp`, missing `Modifier.semantics` where needed
|
||||
- **Flutter:** `.dart` — `ThemeData`, `ColorScheme`
|
||||
- **Web:** HTML/JSX/Vue/Svelte; CSS/SCSS for tokens
|
||||
- Check **web** imports for `@material/web` vs `@material/mdc-*` (MD2)
|
||||
|
||||
**Quick checks** (grep patterns for common violations):
|
||||
**Quick checks** (adapt paths to your stack):
|
||||
```
|
||||
# Hardcoded colors (should use tokens)
|
||||
# Web: hardcoded colors
|
||||
grep -rn '#[0-9a-fA-F]\{3,8\}' --include='*.css' --include='*.scss'
|
||||
grep -rn 'rgb\(|rgba\(' --include='*.css' --include='*.scss'
|
||||
|
||||
# Raw border-radius (should use shape tokens)
|
||||
grep -rn 'border-radius:' --include='*.css' | grep -v 'var(--md-sys-shape'
|
||||
# Compose: raw Color(...) audits (sample — tune for your codebase)
|
||||
grep -rn 'Color(0x' --include='*.kt'
|
||||
|
||||
# Raw box-shadow (MD3 uses tonal elevation)
|
||||
grep -rn 'box-shadow:' --include='*.css'
|
||||
|
||||
# MD2 imports (should be @material/web)
|
||||
# MD2 on web
|
||||
grep -rn '@material/mdc-' --include='*.js' --include='*.ts'
|
||||
|
||||
# Missing dark mode
|
||||
grep -rn 'prefers-color-scheme' --include='*.css'
|
||||
```
|
||||
|
||||
**Browser automation** (if your environment exposes MCP browser tools): navigate, snapshot DOM/CSS variables, resize for breakpoints — optional, not required.
|
||||
|
||||
### Scoring Guide
|
||||
|
||||
- **9-10**: Fully MD3 compliant, uses correct tokens and patterns
|
||||
@@ -637,9 +645,9 @@ Status thresholds: **pass** (7+), **warn** (4-6), **fail** (0-3)
|
||||
|
||||
## Reference Documents
|
||||
|
||||
- `references/color-system.md` — Complete color role catalog, tonal palettes, dynamic color, light/dark scheme mapping
|
||||
- `references/typography-and-shape.md` — Type scale values, shape corner scale, elevation levels, motion tokens
|
||||
- `references/component-catalog.md` — All 30+ components with web element names, attributes, code examples, a11y notes
|
||||
- `references/navigation-patterns.md` — Which navigation component to use, responsive nav transitions
|
||||
- `references/layout-and-responsive.md` — Breakpoints, canonical layouts, CSS Grid implementation
|
||||
- `references/theming-and-dynamic-color.md` — Theme generation, brand color integration, dark mode, runtime switching
|
||||
- `references/color-system.md` — Color roles, tonal palettes, dynamic color, Compose + CSS mapping
|
||||
- `references/typography-and-shape.md` — Type scale, shape corners, elevation, motion, Expressive notes
|
||||
- `references/component-catalog.md` — Components: Compose + `@material/web` where applicable
|
||||
- `references/navigation-patterns.md` — Navigation selection, Compose-first adaptive patterns
|
||||
- `references/layout-and-responsive.md` — Breakpoints, canonical layouts, insets, foldables
|
||||
- `references/theming-and-dynamic-color.md` — Theming: Compose first, then Flutter and web
|
||||
|
||||
@@ -4,7 +4,7 @@ Complete reference for Material Design 3's color system: roles, tonal palettes,
|
||||
|
||||
## Color Roles
|
||||
|
||||
MD3 defines 29+ color roles organized into groups. Every role exists as a CSS custom property: `--md-sys-color-{role-name}`.
|
||||
MD3 defines 29+ color roles organized into groups. **Jetpack Compose:** map to `MaterialTheme.colorScheme` (e.g. `primary`, `onPrimary`). **Web:** each role exists as a CSS custom property `--md-sys-color-{role-name}`.
|
||||
|
||||
### Accent Colors
|
||||
|
||||
@@ -108,7 +108,7 @@ MD3 generates colors from a **seed color** through the tonal palette system:
|
||||
|
||||
1. A **seed color** (hex value) is chosen
|
||||
2. The seed generates **5 tonal palettes**: Primary, Secondary, Tertiary, Neutral, Neutral-Variant
|
||||
3. Each palette has **13 tonal values**: 0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100
|
||||
3. Each palette uses tonal stops along **0–100** (commonly 16 key stops: 0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100)
|
||||
4. Color roles are mapped to specific tonal values depending on light or dark scheme
|
||||
|
||||
### Tonal Value Mapping (Light Scheme)
|
||||
@@ -172,7 +172,7 @@ Colors must only be used in their intended pairs to ensure accessible contrast:
|
||||
Dynamic color creates personalized color schemes from external sources:
|
||||
|
||||
### User-Generated (Wallpaper)
|
||||
The system extracts a seed color from the user's wallpaper and generates a full scheme. Available on Android 12+ and supported web implementations.
|
||||
The OS extracts a seed color from the user's wallpaper and generates a scheme. **Android:** `dynamicLightColorScheme` / `dynamicDarkColorScheme` on **Android 12+ (API 31+)**. **Web:** there is **no** browser wallpaper dynamic-color API equivalent; you can derive a seed from **content** (e.g. images) with libraries, but that is app-specific, not system wallpaper theming.
|
||||
|
||||
### Content-Based
|
||||
A seed color is extracted from in-app content (album art, book cover, etc.) to create a contextual scheme.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# MD3 Component Catalog
|
||||
|
||||
Complete reference for all Material Design 3 components with web element names, attributes, code examples, and accessibility notes.
|
||||
Complete reference for Material Design 3 components. **Primary mappings:** Jetpack Compose (`androidx.compose.material3`) where most users ship UIs today; **web** uses `@material/web` element names and imports — [Material Web is maintenance-only](https://m3.material.io/develop/web).
|
||||
|
||||
## Actions
|
||||
|
||||
@@ -581,6 +581,23 @@ Two types:
|
||||
|
||||
**Customize**: `--md-outlined-text-field-container-shape`, `--md-outlined-text-field-focus-outline-color`, `--md-filled-text-field-container-color`
|
||||
|
||||
#### Jetpack Compose
|
||||
|
||||
Use **`OutlinedTextField`** / **`TextField`** from **`androidx.compose.material3`**. Prefer **state-based** APIs (`TextFieldState`, `rememberTextFieldState()`) when targeting current Material3 releases — see the [package overview](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary). Map labels, supporting text, and error state to MD3 roles (`MaterialTheme.colorScheme`, `TextFieldDefaults`).
|
||||
|
||||
```kotlin
|
||||
// Illustrative — API names vary slightly by Material3 version
|
||||
val state = rememberTextFieldState("")
|
||||
|
||||
OutlinedTextField(
|
||||
state = state,
|
||||
label = { Text("Email") },
|
||||
supportingText = { if (isError) Text("Invalid email") },
|
||||
isError = isError,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
)
|
||||
```
|
||||
|
||||
### Date Picker
|
||||
**No @material/web element yet.** Three configurations:
|
||||
- **Docked**: Inline calendar attached to input
|
||||
@@ -604,6 +621,8 @@ Two types:
|
||||
| Medium | 112dp | Left, bottom | Collapse to small on scroll |
|
||||
| Large | 152dp | Left, bottom | Collapse to small on scroll |
|
||||
|
||||
**Jetpack Compose:** `TopAppBar`, `CenterAlignedTopAppBar`, `MediumTopAppBar`, `LargeTopAppBar`, and expressive variants (e.g. large flexible) may require **`@OptIn(ExperimentalMaterial3ExpressiveApi::class)`** depending on BOM — check your `material3` version.
|
||||
|
||||
```html
|
||||
<header class="md3-top-app-bar md3-top-app-bar--small">
|
||||
<md-icon-button aria-label="Menu"><md-icon>menu</md-icon></md-icon-button>
|
||||
|
||||
@@ -2,6 +2,16 @@
|
||||
|
||||
Reference for Material Design 3's layout system: breakpoints, canonical layouts, and responsive implementation.
|
||||
|
||||
## Jetpack Compose and Android
|
||||
|
||||
The **breakpoint table** below is a **design** reference. In **Jetpack Compose**, prefer **`calculateWindowSizeClass`** (`androidx.compose.material3:material3-window-size-class`) and/or **`androidx.compose.material3.adaptive`** APIs (e.g. `currentWindowAdaptiveInfo`, list-detail scaffolds) instead of hand-rolling raw `BoxWithConstraints` width checks everywhere.
|
||||
|
||||
**Edge-to-edge:** Use **`enableEdgeToEdge()`** on your `Activity` (AndroidX) when you draw behind the system bars. Apply **`WindowInsets`** (`Modifier.statusBarsPadding()`, `navigationBarsPadding()`, **`imePadding()`**, `displayCutoutPadding()`, etc.) and **`Scaffold`** `contentWindowInsets` so content and **IME** behave correctly.
|
||||
|
||||
**Foldables:** Use **`WindowInfoTracker`**, **`FoldingFeature`**, or Jetpack WindowManager APIs — see the foldable section below; verify APIs against your dependency versions.
|
||||
|
||||
---
|
||||
|
||||
## Window Size Classes
|
||||
|
||||
MD3 defines 5 breakpoint classes:
|
||||
@@ -14,7 +24,9 @@ MD3 defines 5 breakpoint classes:
|
||||
| Large | 1200–1599dp | Desktop | 12 |
|
||||
| Extra-large | 1600dp+ | Ultra-wide, large desktop | 12 |
|
||||
|
||||
### CSS Media Queries
|
||||
### CSS Media Queries (web)
|
||||
|
||||
Use these for **CSS layouts**. **Compose** apps should use window size classes / adaptive APIs rather than duplicating this logic only in CSS.
|
||||
|
||||
```css
|
||||
/* Compact (default — mobile-first) */
|
||||
|
||||
@@ -2,6 +2,40 @@
|
||||
|
||||
Guide for choosing and implementing Material Design 3 navigation components.
|
||||
|
||||
## Jetpack Compose (primary)
|
||||
|
||||
Use **`androidx.compose.material3`**: `NavigationBar`, `NavigationRail`, `NavigationDrawerItem`, `ModalNavigationDrawer`, `DismissibleNavigationDrawer`, `PermanentNavigationDrawer`, `NavigationBarItem`, `NavigationRailItem`, top app bars (`TopAppBar`, `CenterAlignedTopAppBar`, `LargeTopAppBar`, expressive variants per BOM), and **`Scaffold`** (`bottomBar`, `floatingActionButton`, `snackbarHost`).
|
||||
|
||||
Wire destinations with **Navigation Compose** (`NavHost`, `composable`, `rememberNavController`). For **adaptive** UIs, use **`calculateWindowSizeClass`**, **`androidx.compose.material3.adaptive`**, or **`currentWindowAdaptiveInfo`** / **`NavigableListDetailPaneScaffold`** (names and packages depend on your BOM — check [Android Developers](https://developer.android.com/jetpack/androidx/releases/compose-material3)).
|
||||
|
||||
```kotlin
|
||||
// Conceptual — adapt routes and selection to your app
|
||||
Scaffold(
|
||||
bottomBar = {
|
||||
NavigationBar {
|
||||
destinations.forEach { dest ->
|
||||
NavigationBarItem(
|
||||
selected = currentRoute == dest.route,
|
||||
onClick = { navController.navigate(dest.route) },
|
||||
icon = { Icon(dest.icon, contentDescription = dest.label) },
|
||||
label = { Text(dest.label) }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
) { innerPadding ->
|
||||
NavHost(
|
||||
navController = navController,
|
||||
startDestination = "home",
|
||||
modifier = Modifier.padding(innerPadding)
|
||||
) { /* composable routes */ }
|
||||
}
|
||||
```
|
||||
|
||||
**Web (limited):** The HTML/`@material/web` sections below remain useful for token-backed sites; [Material Web is maintenance-only](https://m3.material.io/develop/web).
|
||||
|
||||
---
|
||||
|
||||
## Navigation Component Selection
|
||||
|
||||
### Decision Tree
|
||||
|
||||
@@ -4,14 +4,109 @@ Complete guide to creating, applying, and managing Material Design 3 themes.
|
||||
|
||||
## Theme Architecture
|
||||
|
||||
An MD3 theme is a set of CSS custom properties applied to a document or subtree. The theme controls:
|
||||
- **Color scheme**: All `--md-sys-color-*` tokens
|
||||
- **Typography**: All `--md-sys-typescale-*` tokens
|
||||
- **Shape**: All `--md-sys-shape-corner-*` tokens
|
||||
The same **semantic roles** (primary, onSurface, surface containers, etc.) appear on every platform:
|
||||
|
||||
Components read these tokens automatically. Change the tokens, and every MD3 component updates.
|
||||
| Platform | Theme surface |
|
||||
|----------|----------------|
|
||||
| **Jetpack Compose** | `MaterialTheme(colorScheme, typography, shapes, …)` |
|
||||
| **Flutter** | `ThemeData` + `ColorScheme`, `useMaterial3: true` |
|
||||
| **Web** | CSS custom properties `--md-sys-*` on `:root` or a subtree |
|
||||
|
||||
## Theme Builder Workflow
|
||||
**Web:** [Material Web is maintenance-only; M3 Expressive is not implemented on Web](https://m3.material.io/develop/web). Use `@material/web` + CSS knowing the stack is limited.
|
||||
|
||||
---
|
||||
|
||||
## Jetpack Compose Theming
|
||||
|
||||
Use `androidx.compose.material3.MaterialTheme`. Prefer **dynamic color** on **Android 12+ (API 31+)** when enabled; otherwise use `lightColorScheme` / `darkColorScheme` or Kotlin generated by [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/).
|
||||
|
||||
```kotlin
|
||||
import androidx.compose.material3.*
|
||||
import android.os.Build
|
||||
import androidx.compose.foundation.isSystemInDarkTheme
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
|
||||
@Composable
|
||||
fun MyAppTheme(
|
||||
darkTheme: Boolean = isSystemInDarkTheme(),
|
||||
dynamicColor: Boolean = true,
|
||||
content: @Composable () -> Unit
|
||||
) {
|
||||
val colorScheme = when {
|
||||
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
|
||||
val context = LocalContext.current
|
||||
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
|
||||
}
|
||||
darkTheme -> darkColorScheme(
|
||||
primary = Color(0xFFD0BCFF),
|
||||
onPrimary = Color(0xFF381E72),
|
||||
// … add remaining roles or use generated Theme.kt
|
||||
)
|
||||
else -> lightColorScheme(
|
||||
primary = Color(0xFF6750A4),
|
||||
onPrimary = Color(0xFFFFFFFF),
|
||||
// … add remaining roles or use generated Theme.kt
|
||||
)
|
||||
}
|
||||
|
||||
MaterialTheme(
|
||||
colorScheme = colorScheme,
|
||||
typography = Typography(),
|
||||
shapes = Shapes(),
|
||||
content = content
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Flutter Theming
|
||||
|
||||
```dart
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
// Basic MD3 theme from seed
|
||||
MaterialApp(
|
||||
theme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: Colors.deepPurple,
|
||||
brightness: Brightness.light,
|
||||
),
|
||||
),
|
||||
darkTheme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: Colors.deepPurple,
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
// Dynamic color (Android 12+)
|
||||
// Requires package:dynamic_color
|
||||
DynamicColorBuilder(
|
||||
builder: (lightDynamic, darkDynamic) {
|
||||
return MaterialApp(
|
||||
theme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: lightDynamic ?? ColorScheme.fromSeed(seedColor: Colors.deepPurple),
|
||||
),
|
||||
darkTheme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: darkDynamic ?? ColorScheme.fromSeed(
|
||||
seedColor: Colors.deepPurple,
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Web: Theme Builder and CSS
|
||||
|
||||
### 1. Choose a Seed Color
|
||||
Start with a single hex color that represents your brand. The entire scheme generates from this seed.
|
||||
@@ -268,9 +363,9 @@ const high = new SchemeContent(hct, isDark, 1.0);
|
||||
|
||||
Higher contrast increases the tonal distance between paired color roles (e.g., `primary` and `on-primary`), making text more legible without fundamentally changing the color feel.
|
||||
|
||||
## Component-Level Overrides
|
||||
## Component-Level Overrides (web)
|
||||
|
||||
Override individual component appearance using component-specific CSS custom properties:
|
||||
Override individual **web** component appearance using component-specific CSS custom properties. **Compose** uses `TextFieldDefaults`, `ButtonDefaults`, `MaterialTheme`, etc.
|
||||
|
||||
```css
|
||||
/* Override specific button colors */
|
||||
@@ -353,88 +448,6 @@ const seed = await themeFromImage('/album-cover.jpg');
|
||||
applyTheme(seed);
|
||||
```
|
||||
|
||||
## Flutter Theming
|
||||
|
||||
```dart
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
// Basic MD3 theme from seed
|
||||
MaterialApp(
|
||||
theme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: Colors.deepPurple,
|
||||
brightness: Brightness.light,
|
||||
),
|
||||
),
|
||||
darkTheme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: Colors.deepPurple,
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
// Dynamic color (Android 12+)
|
||||
// Requires package:dynamic_color
|
||||
DynamicColorBuilder(
|
||||
builder: (lightDynamic, darkDynamic) {
|
||||
return MaterialApp(
|
||||
theme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: lightDynamic ?? ColorScheme.fromSeed(seedColor: Colors.deepPurple),
|
||||
),
|
||||
darkTheme: ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: darkDynamic ?? ColorScheme.fromSeed(
|
||||
seedColor: Colors.deepPurple,
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
## Jetpack Compose Theming
|
||||
|
||||
```kotlin
|
||||
import androidx.compose.material3.*
|
||||
import android.os.Build
|
||||
|
||||
@Composable
|
||||
fun MyAppTheme(
|
||||
darkTheme: Boolean = isSystemInDarkTheme(),
|
||||
dynamicColor: Boolean = true,
|
||||
content: @Composable () -> Unit
|
||||
) {
|
||||
val colorScheme = when {
|
||||
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
|
||||
val context = LocalContext.current
|
||||
if (darkTheme) dynamicDarkColorScheme(context)
|
||||
else dynamicLightColorScheme(context)
|
||||
}
|
||||
darkTheme -> darkColorScheme(
|
||||
primary = Color(0xFFD0BCFF),
|
||||
onPrimary = Color(0xFF381E72),
|
||||
// ... other colors
|
||||
)
|
||||
else -> lightColorScheme(
|
||||
primary = Color(0xFF6750A4),
|
||||
onPrimary = Color(0xFFFFFFFF),
|
||||
// ... other colors
|
||||
)
|
||||
}
|
||||
|
||||
MaterialTheme(
|
||||
colorScheme = colorScheme,
|
||||
typography = Typography(),
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Scoped Themes
|
||||
|
||||
Apply different themes to different sections of the UI:
|
||||
|
||||
@@ -165,10 +165,10 @@ Examples: 10sp = 0.625rem, 12sp = 0.75rem, 14sp = 0.875rem, 16sp = 1rem, 24sp =
|
||||
| `none` | 0 | 0px | — |
|
||||
| `extra-small` | 4 | 4px | Snackbar |
|
||||
| `small` | 8 | 8px | Text fields, menus, chips |
|
||||
| `medium` | 12 | 12px | Cards, dialogs |
|
||||
| `medium` | 12 | 12px | Cards |
|
||||
| `large` | 16 | 16px | FAB, extended FAB, nav drawer |
|
||||
| `large-increased` | 20 | 20px | (Expressive update) |
|
||||
| `extra-large` | 28 | 28px | Bottom sheets, side sheets |
|
||||
| `extra-large` | 28 | 28px | Dialogs, bottom sheets, side sheets |
|
||||
| `extra-large-increased` | 32 | 32px | (Expressive update) |
|
||||
| `extra-extra-large` | 48 | 48px | (Expressive update) |
|
||||
| `full` | — | 9999px | Buttons, badges, pills, sliders |
|
||||
@@ -219,7 +219,7 @@ In the M3 Expressive update, components can morph between shapes on interaction:
|
||||
- Selected states can change shape
|
||||
- Loading indicators use shape morphing to show progress
|
||||
|
||||
**Web availability**: Shape morphing is currently only available in Jetpack Compose. Web implementation is not yet available. For web, use CSS transitions on `border-radius` as an approximation.
|
||||
**Platform notes**: Shape morphing is **not** in `@material/web` ([Material Web is maintenance-only; Expressive not on Web](https://m3.material.io/develop/web)). **Jetpack Compose** is where Google documents expressive shape/motion behavior for Android. **Flutter:** check current Material 3 / expressive docs for your SDK. **Web:** approximate with CSS transitions on `border-radius`.
|
||||
|
||||
## Elevation
|
||||
|
||||
@@ -292,7 +292,7 @@ MD3 Expressive (May 2025) introduced spring-based motion physics for component a
|
||||
|
||||
- Springs have no fixed duration — they respond dynamically to input
|
||||
- Two schemes: **standard** (utilitarian) and **expressive** (bouncy)
|
||||
- Currently available in Jetpack Compose; web uses easing/duration fallback
|
||||
- **Jetpack Compose** exposes motion schemes / spring-oriented APIs in current Material3 (see `MotionScheme` and your BOM). **MDC-Android** may differ by version. **Web:** Material Web does not implement Expressive motion physics — use easing/duration or custom CSS/JS. **Flutter:** check your Flutter/Material version for parity.
|
||||
|
||||
### Easing and Duration (Transitions)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user