Skip to content

Commit

Permalink
fix(material-experimental/theming): Update M3 palettes (#28109)
Browse files Browse the repository at this point in the history
Last time I checked, the M3 theme generator generated the same neutral
palette regardless of the primary color used. That didn't really make
much sense, because it caused the neutral colors to always have a
purplish tint. It seems like maybe a bug that was fixed, because now it
generates different neutral colors depending on the primary.

I've updated our pre-defined palettes to capture these different
neutrals. I created a script to convert the MDC theme builder exports to
our palette CSS format. I'm not including it as part of this commit, but
just FYI that it'll be cheap to add to / update our predefined palettes
in the future. If we want the script checked in I can clean it up and
make a separate PR for it.
  • Loading branch information
mmalerba authored Nov 15, 2023
1 parent 7a7434a commit 1735032
Show file tree
Hide file tree
Showing 5 changed files with 390 additions and 196 deletions.
16 changes: 8 additions & 8 deletions src/material-experimental/theming/_definition.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ $theme-version: 1;
}

$type: map.get($config, theme-type) or light;
$primary: map.get($config, primary) or m3-palettes.$indigo-palette;
$primary: map.get($config, primary) or m3-palettes.$purple-palette;
$secondary: map.get($config, secondary) or $primary;
$tertiary: map.get($config, tertiary) or $secondary;

Expand All @@ -47,15 +47,15 @@ $theme-version: 1;
theme-version: $theme-version,
theme-type: $type,
palettes: (
primary: map.remove($primary, neutral-variant),
secondary: map.remove($secondary, neutral-variant),
tertiary: map.remove($tertiary, neutral-variant),
neutral: m3-palettes.$neutral-palette,
primary: map.remove($primary, neutral, neutral-variant),
secondary: map.remove($secondary, neutral, neutral-variant),
tertiary: map.remove($tertiary, neutral, neutral-variant),
neutral: map.get($primary, neutral),
neutral-variant: map.get($primary, neutral-variant),
error: m3-palettes.$red-palette
error: map.remove(m3-palettes.$red-palette, neutral, neutral-variant),
),
color-tokens: m3-tokens.generate-color-tokens($type, $primary, $secondary, $tertiary,
m3-palettes.$neutral-palette, m3-palettes.$red-palette)
color-tokens: m3-tokens.generate-color-tokens(
$type, $primary, $secondary, $tertiary, m3-palettes.$red-palette)
)
);
}
Expand Down
Loading

0 comments on commit 1735032

Please sign in to comment.