mcpField
M
material-3-to-material-2-theme-adapter

material-3-to-material-2-theme-adapter

github.com/rodydavisDesign & UI6042 installsUpdated 2w ago
Repository

About material-3-to-material-2-theme-adapter

A CSS theme adapter pattern for styling Material 2 components with Material 3 color tokens. It provides variable mappings that let projects apply Material 3 values to Material 2 theme properties.

Key features

  1. 01Map Material 3 tokens to Material 2 variables

Use cases

  1. 01Apply Material 3 colors to Material 2 components

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/rodydavis/skills --skill material-3-to-material-2-theme-adapter

After installing, type/material-3-to-material-2-theme-adapterin Claude Code to confirm it loaded.

Details

From the project README

Material 3 to Material 2 Theme Adapter

Overview 

How to style Material 2 components with Material 3 in CSS:

:root {
  --mdc-theme-primary: var(--md-sys-color-primary);
  --mdc-theme-on-primary: var(--md-sys--coloron-primary);
  --mdc-theme-background: var(--md-sys--colorbackground);
  --mdc-theme-on-background: var(--md-sys--coloron-background);
  --mdc-theme-on-surface-variant: var(--md-sys--coloron-surface-variant);
  --mdc-theme-surface-variant: var(--md-sys--colorsurface-variant);
  --mdc-theme-on-surface: var(--md-sys--coloron-surface);
  --mdc-theme-surface: var(--md-sys--colorsurface);
  --mdc-theme-text-primary-on-background: var(--md-sys--coloron-surface-variant);
  --mdc-theme-outline: var(--md-sys-color-outline);
}

Comments

Markdown supported