Skip to content

Commit

Permalink
fix(material-experimental/theming): Update M3 palettes
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 committed Nov 10, 2023
1 parent 59c8bb9 commit 64b6399
Show file tree
Hide file tree
Showing 3 changed files with 385 additions and 191 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 64b6399

Please sign in to comment.