Skip to content

refactor: merge light/dark color config definition #31264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+39 −95
Open

refactor: merge light/dark color config definition #31264

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 39 additions & 95 deletions src/material/core/m2/_theming.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,52 +113,30 @@
@return $theme;
}

// Creates a light-themed color configuration from the specified
// primary, accent and warn palettes.
@function _mat-create-light-color-config($primary, $accent, $warn: null) {
// Creates a color configuration from the specified primary, accent and warn palettes.
@function _mat-create-color-config($primary, $accent, $warn, $is-dark) {
@return (
primary: $primary,
accent: $accent,
warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
is-dark: false,
foreground: palette.$light-theme-foreground-palette,
background: palette.$light-theme-background-palette,
warn: $warn,
is-dark: $is-dark,
foreground: if($is-dark,
palette.$dark-theme-foreground-palette,
palette.$light-theme-foreground-palette),
background: if($is-dark,
palette.$dark-theme-background-palette,
palette.$light-theme-background-palette),
system: (
surface: white,
on-surface: rgba(black, 0.87),
on-surface-variant: rgba(black, 0.54),
background: map.get(palette.$grey-palette, 50),
inverse-surface: map.get(palette.$grey-palette, 800),
inverse-on-surface: white,
outline: rgba(black, 0.12),
surface: if($is-dark, map.get(palette.$grey-palette, 800), white),
on-surface: if($is-dark, white, rgba(black, 0.87)),
on-surface-variant: if($is-dark, rgba(white, 0.7), rgba(black, 0.54)),
background: if($is-dark, #303030, map.get(palette.$grey-palette, 50)),
inverse-surface: if($is-dark, white, map.get(palette.$grey-palette, 800)),
inverse-on-surface: if($is-dark, rgba(black, 0.87), white),
outline: if($is-dark, rgba(white, 0.12), rgba(black, 0.12)),
hover-state-layer-opacity: 0.04,
focus-state-layer-opacity: 0.12,
pressed-state-layer-opacity: 0.12,
),
);
}

// Creates a dark-themed color configuration from the specified
// primary, accent and warn palettes.
@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
@return (
primary: $primary,
accent: $accent,
warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
is-dark: true,
foreground: palette.$dark-theme-foreground-palette,
background: palette.$dark-theme-background-palette,
system: (
surface: map.get(palette.$grey-palette, 800),
on-surface: white,
on-surface-variant: rgba(white, 0.7),
background: #303030,
inverse-surface: white,
inverse-on-surface: rgba(black, 0.87),
outline: rgba(white, 0.12),
hover-state-layer-opacity: 0.04,
focus-state-layer-opacity: 0.12,
pressed-state-layer-opacity: 0.12,
pressed-state-layer-opacity: 0.12
),
);
}
Expand All @@ -170,49 +148,7 @@
/// @param {Map} $primary The theme configuration object.
/// @returns {Map} A complete Angular Material theme map.
@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
// This function creates a container object for the individual component theme mixins. Consumers
// can construct such an object by calling this function, or by building the object manually.
// There are two possible ways to invoke this function in order to create such an object:
//
// (1) Passing in a map that holds optional configurations for individual parts of the
// theming system. For `color` configurations, the function only expects the palettes
// for `primary` and `accent` (and optionally `warn`). The function will expand the
// shorthand into an actual configuration that can be consumed in `-color` mixins.
// (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
// as passing in a configuration map because only the `color` system can be configured.
//
// If the legacy pattern is used, we generate a container object only with a light-themed
// configuration for the `color` theming part.
@if $accent != null {
@warn theming.$private-legacy-theme-warning;
$theme: _mat-validate-theme(
(
_is-legacy-theme: true,
color: _mat-create-light-color-config($primary, $accent, $warn),
)
);

@return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
}
// If the map pattern is used (1), we just pass-through the configurations for individual
// parts of the theming system, but update the `color` configuration if set. As explained
// above, the color shorthand will be expanded to an actual light-themed color configuration.
$result: $primary;
@if map.get($primary, color) {
$color-settings: map.get($primary, color);
$primary: map.get($color-settings, primary);
$accent: map.get($color-settings, accent);
$warn: map.get($color-settings, warn);
$result: map.merge(
$result,
(
color: _mat-create-light-color-config($primary, $accent, $warn),
)
);
}
@return _internalize-theme(
theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
);
@return _define-theme($primary, $accent, $warn, false);
}

// TODO: Remove legacy API and rename below `$primary` to `$config`. Currently it cannot be renamed
Expand All @@ -222,6 +158,13 @@
/// @param {Map} $primary The theme configuration object.
/// @returns {Map} A complete Angular Material theme map.
@function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
@return _define-theme($primary, $accent, $warn, true);
}

/// Creates a container object for a theme to be given to individual component theme mixins.
/// @param {Map} $primary The theme configuration object.
/// @returns {Map} A complete Angular Material theme map.
@function _define-theme($primary, $accent, $warn, $is-dark) {
// This function creates a container object for the individual component theme mixins. Consumers
// can construct such an object by calling this function, or by building the object manually.
// There are two possible ways to invoke this function in order to create such an object:
Expand All @@ -233,36 +176,37 @@
// (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
// as passing in a configuration map because only the `color` system can be configured.
//
// If the legacy pattern is used, we generate a container object only with a dark-themed
// If the legacy pattern is used, we generate a container object only with a themed
// configuration for the `color` theming part.
@if $accent != null {
@warn theming.$private-legacy-theme-warning;
$theme: _mat-validate-theme(
(
_is-legacy-theme: true,
color: _mat-create-dark-color-config($primary, $accent, $warn),
)
(
_is-legacy-theme: true,
color: _mat-create-color-config($primary, $accent, $warn, $is-dark),
)
);

@return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
}
// If the map pattern is used (1), we just pass-through the configurations for individual
// parts of the theming system, but update the `color` configuration if set. As explained
// above, the color shorthand will be expanded to an actual dark-themed color configuration.
// above, the color shorthand will be expanded to an actual light-themed color configuration.
$result: $primary;
@if map.get($primary, color) {
$color-settings: map.get($primary, color);
$primary: map.get($color-settings, primary);
$accent: map.get($color-settings, accent);
$warn: map.get($color-settings, warn);
$warn: map.get($color-settings, warn) or define-palette(palette.$red-palette);
$result: map.merge(
$result,
(
color: _mat-create-dark-color-config($primary, $accent, $warn),
)
$result,
(
color: _mat-create-color-config($primary, $accent, $warn, $is-dark),
)
);
}
@return _internalize-theme(
theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
);
}

Expand Down
Loading