Skip to content

Commit

Permalink
fixup! feat(material-experimental/theming): add ability to use sys va…
Browse files Browse the repository at this point in the history 
…riables
  • Loading branch information
@wagnermaciel
wagnermaciel committed Apr 19, 2024
1 parent d55ad8e commit db4058d
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 95 deletions.
9 changes: 8 additions & 1 deletion src/material-experimental/theming/_config-validation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,14 @@
@if $err {
@return (#{'$config should be a typography configuration object. Got:'} $config);
}
$allowed: (brand-family, plain-family, bold-weight, medium-weight, regular-weight, use-system-variables);
$allowed: (
brand-family,
plain-family,
bold-weight,
medium-weight,
regular-weight,
use-system-variables
);
$err: mat.private-validate-allowed-values(map.keys($config or ()), $allowed...);
@if $err {
@return (
Expand Down
187 changes: 94 additions & 93 deletions src/material-experimental/theming/_m3-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,8 @@
@if(meta.type-of($color) == 'color') {
$result: map.remove($result, $opacity-key);
$result: map.set($result, $color-key, rgba($color, $opacity));
} @else if($color != null) {
}
@else if($color != null) {
$result: map.remove($result, $opacity-key);
$result: map.set($result, $color-key, #{color(from #{$color} srgb r g b / #{$opacity})});
}
Expand Down Expand Up @@ -1089,98 +1090,98 @@
@function _get-sys-typeface($use-sys-vars, $ref) {
@if ($use-sys-vars) {
@return (
"body-large": var(--sys-body-large),
"body-large-font": var(--sys-body-large-font),
"body-large-line-height": var(--sys-body-large-line-height),
"body-large-size": var(--sys-body-large-size),
"body-large-tracking": var(--sys-body-large-tracking),
"body-large-weight": var(--sys-body-large-weight),
"body-medium": var(--sys-body-medium),
"body-medium-font": var(--sys-body-medium-font),
"body-medium-line-height": var(--sys-body-medium-line-height),
"body-medium-size": var(--sys-body-medium-size),
"body-medium-tracking": var(--sys-body-medium-tracking),
"body-medium-weight": var(--sys-body-medium-weight),
"body-small": var(--sys-body-small),
"body-small-font": var(--sys-body-small-font),
"body-small-line-height": var(--sys-body-small-line-height),
"body-small-size": var(--sys-body-small-size),
"body-small-tracking": var(--sys-body-small-tracking),
"body-small-weight": var(--sys-body-small-weight),
"display-large": var(--sys-display-large),
"display-large-font": var(--sys-display-large-font),
"display-large-line-height": var(--sys-display-large-line-height),
"display-large-size": var(--sys-display-large-size),
"display-large-tracking": var(--sys-display-large-tracking),
"display-large-weight": var(--sys-display-large-weight),
"display-medium": var(--sys-display-medium),
"display-medium-font": var(--sys-display-medium-font),
"display-medium-line-height": var(--sys-display-medium-line-height),
"display-medium-size": var(--sys-display-medium-size),
"display-medium-tracking": var(--sys-display-medium-tracking),
"display-medium-weight": var(--sys-display-medium-weight),
"display-small": var(--sys-display-small),
"display-small-font": var(--sys-display-small-font),
"display-small-line-height": var(--sys-display-small-line-height),
"display-small-size": var(--sys-display-small-size),
"display-small-tracking": var(--sys-display-small-tracking),
"display-small-weight": var(--sys-display-small-weight),
"headline-large": var(--sys-headline-large),
"headline-large-font": var(--sys-headline-large-font),
"headline-large-line-height": var(--sys-headline-large-line-height),
"headline-large-size": var(--sys-headline-large-size),
"headline-large-tracking": var(--sys-headline-large-tracking),
"headline-large-weight": var(--sys-headline-large-weight),
"headline-medium": var(--sys-headline-medium),
"headline-medium-font": var(--sys-headline-medium-font),
"headline-medium-line-height": var(--sys-headline-medium-line-height),
"headline-medium-size": var(--sys-headline-medium-size),
"headline-medium-tracking": var(--sys-headline-medium-tracking),
"headline-medium-weight": var(--sys-headline-medium-weight),
"headline-small": var(--sys-headline-small),
"headline-small-font": var(--sys-headline-small-font),
"headline-small-line-height": var(--sys-headline-small-line-height),
"headline-small-size": var(--sys-headline-small-size),
"headline-small-tracking": var(--sys-headline-small-tracking),
"headline-small-weight": var(--sys-headline-small-weight),
"label-large": var(--sys-label-large),
"label-large-font": var(--sys-label-large-font),
"label-large-line-height": var(--sys-label-large-line-height),
"label-large-size": var(--sys-label-large-size),
"label-large-tracking": var(--sys-label-large-tracking),
"label-large-weight": var(--sys-label-large-weight),
"label-large-weight-prominent": var(--sys-label-large-weight-prominent),
"label-medium": var(--sys-label-medium),
"label-medium-font": var(--sys-label-medium-font),
"label-medium-line-height": var(--sys-label-medium-line-height),
"label-medium-size": var(--sys-label-medium-size),
"label-medium-tracking": var(--sys-label-medium-tracking),
"label-medium-weight": var(--sys-label-medium-weight),
"label-medium-weight-prominent": var(--sys-label-medium-weight-prominent),
"label-small": var(--sys-label-small),
"label-small-font": var(--sys-label-small-font),
"label-small-line-height": var(--sys-label-small-line-height),
"label-small-size": var(--sys-label-small-size),
"label-small-tracking": var(--sys-label-small-tracking),
"label-small-weight": var(--sys-label-small-weight),
"title-large": var(--sys-title-large),
"title-large-font": var(--sys-title-large-font),
"title-large-line-height": var(--sys-title-large-line-height),
"title-large-size": var(--sys-title-large-size),
"title-large-tracking": var(--sys-title-large-tracking),
"title-large-weight": var(--sys-title-large-weight),
"title-medium": var(--sys-title-medium),
"title-medium-font": var(--sys-title-medium-font),
"title-medium-line-height": var(--sys-title-medium-line-height),
"title-medium-size": var(--sys-title-medium-size),
"title-medium-tracking": var(--sys-title-medium-tracking),
"title-medium-weight": var(--sys-title-medium-weight),
"title-small": var(--sys-title-small),
"title-small-font": var(--sys-title-small-font),
"title-small-line-height": var(--sys-title-small-line-height),
"title-small-size": var(--sys-title-small-size),
"title-small-tracking": var(--sys-title-small-tracking),
"title-small-weight": var(--sys-title-small-weight),
'body-large': var(--sys-body-large),
'body-large-font': var(--sys-body-large-font),
'body-large-line-height': var(--sys-body-large-line-height),
'body-large-size': var(--sys-body-large-size),
'body-large-tracking': var(--sys-body-large-tracking),
'body-large-weight': var(--sys-body-large-weight),
'body-medium': var(--sys-body-medium),
'body-medium-font': var(--sys-body-medium-font),
'body-medium-line-height': var(--sys-body-medium-line-height),
'body-medium-size': var(--sys-body-medium-size),
'body-medium-tracking': var(--sys-body-medium-tracking),
'body-medium-weight': var(--sys-body-medium-weight),
'body-small': var(--sys-body-small),
'body-small-font': var(--sys-body-small-font),
'body-small-line-height': var(--sys-body-small-line-height),
'body-small-size': var(--sys-body-small-size),
'body-small-tracking': var(--sys-body-small-tracking),
'body-small-weight': var(--sys-body-small-weight),
'display-large': var(--sys-display-large),
'display-large-font': var(--sys-display-large-font),
'display-large-line-height': var(--sys-display-large-line-height),
'display-large-size': var(--sys-display-large-size),
'display-large-tracking': var(--sys-display-large-tracking),
'display-large-weight': var(--sys-display-large-weight),
'display-medium': var(--sys-display-medium),
'display-medium-font': var(--sys-display-medium-font),
'display-medium-line-height': var(--sys-display-medium-line-height),
'display-medium-size': var(--sys-display-medium-size),
'display-medium-tracking': var(--sys-display-medium-tracking),
'display-medium-weight': var(--sys-display-medium-weight),
'display-small': var(--sys-display-small),
'display-small-font': var(--sys-display-small-font),
'display-small-line-height': var(--sys-display-small-line-height),
'display-small-size': var(--sys-display-small-size),
'display-small-tracking': var(--sys-display-small-tracking),
'display-small-weight': var(--sys-display-small-weight),
'headline-large': var(--sys-headline-large),
'headline-large-font': var(--sys-headline-large-font),
'headline-large-line-height': var(--sys-headline-large-line-height),
'headline-large-size': var(--sys-headline-large-size),
'headline-large-tracking': var(--sys-headline-large-tracking),
'headline-large-weight': var(--sys-headline-large-weight),
'headline-medium': var(--sys-headline-medium),
'headline-medium-font': var(--sys-headline-medium-font),
'headline-medium-line-height': var(--sys-headline-medium-line-height),
'headline-medium-size': var(--sys-headline-medium-size),
'headline-medium-tracking': var(--sys-headline-medium-tracking),
'headline-medium-weight': var(--sys-headline-medium-weight),
'headline-small': var(--sys-headline-small),
'headline-small-font': var(--sys-headline-small-font),
'headline-small-line-height': var(--sys-headline-small-line-height),
'headline-small-size': var(--sys-headline-small-size),
'headline-small-tracking': var(--sys-headline-small-tracking),
'headline-small-weight': var(--sys-headline-small-weight),
'label-large': var(--sys-label-large),
'label-large-font': var(--sys-label-large-font),
'label-large-line-height': var(--sys-label-large-line-height),
'label-large-size': var(--sys-label-large-size),
'label-large-tracking': var(--sys-label-large-tracking),
'label-large-weight': var(--sys-label-large-weight),
'label-large-weight-prominent': var(--sys-label-large-weight-prominent),
'label-medium': var(--sys-label-medium),
'label-medium-font': var(--sys-label-medium-font),
'label-medium-line-height': var(--sys-label-medium-line-height),
'label-medium-size': var(--sys-label-medium-size),
'label-medium-tracking': var(--sys-label-medium-tracking),
'label-medium-weight': var(--sys-label-medium-weight),
'label-medium-weight-prominent': var(--sys-label-medium-weight-prominent),
'label-small': var(--sys-label-small),
'label-small-font': var(--sys-label-small-font),
'label-small-line-height': var(--sys-label-small-line-height),
'label-small-size': var(--sys-label-small-size),
'label-small-tracking': var(--sys-label-small-tracking),
'label-small-weight': var(--sys-label-small-weight),
'title-large': var(--sys-title-large),
'title-large-font': var(--sys-title-large-font),
'title-large-line-height': var(--sys-title-large-line-height),
'title-large-size': var(--sys-title-large-size),
'title-large-tracking': var(--sys-title-large-tracking),
'title-large-weight': var(--sys-title-large-weight),
'title-medium': var(--sys-title-medium),
'title-medium-font': var(--sys-title-medium-font),
'title-medium-line-height': var(--sys-title-medium-line-height),
'title-medium-size': var(--sys-title-medium-size),
'title-medium-tracking': var(--sys-title-medium-tracking),
'title-medium-weight': var(--sys-title-medium-weight),
'title-small': var(--sys-title-small),
'title-small-font': var(--sys-title-small-font),
'title-small-line-height': var(--sys-title-small-line-height),
'title-small-size': var(--sys-title-small-size),
'title-small-tracking': var(--sys-title-small-tracking),
'title-small-weight': var(--sys-title-small-weight),
);
}
@return mdc-tokens.md-sys-typescale-values($ref);
Expand Down
3 changes: 2 additions & 1 deletion src/material/core/style/_sass-utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@
$args: meta.keywords($args);
@if (meta.type-of($color) == 'color') {
@return color.change($color, $args...);
} @else if ($color != null and map.get($args, alpha) != null) {
}
@else if ($color != null and map.get($args, alpha) != null) {
@return #{color(from #{$color} srgb r g b / #{map.get($args, alpha)})};
}
@return $color;
Expand Down

0 comments on commit db4058d

Please sign in to comment.