Skip to content

Commit 685b585

Browse files
mmalerbammalerba
committed
feat(material/theming): add support for M2 themes to theme inspection API
1 parent 291b9db commit 685b585

File tree

3 files changed

+336
-62
lines changed

3 files changed

+336
-62
lines changed

‎src/material/core/theming/_inspection.scss

Lines changed: 88 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
// This file contains functions used to inspect Angular Material theme objects.
2-
31
@use 'sass:list';
42
@use 'sass:map';
53
@use '../style/validation';
4+
@use './m2-inspection';
65

76
$_internals: _mat-theming-internals-do-not-access;
87

@@ -48,15 +47,19 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
4847
/// @param {Map} $theme The theme
4948
/// @return {String} The type of theme (either `light` or `dark`).
5049
@function get-theme-type($theme) {
51-
$err: _validate-theme-object($theme);
52-
@if $err {
53-
// TODO(mmalerba): implement for old style theme objects.
54-
@error #{'get-theme-type does not support legacy theme objects.'};
50+
$version: get-theme-version($theme);
51+
@if $version == 0 {
52+
@return m2-inspection.get-theme-type($theme);
5553
}
56-
@if not theme-has($theme, color) {
57-
@error 'Color information is not available on this theme.';
54+
@else if $version == 1 {
55+
@if not theme-has($theme, color) {
56+
@error 'Color information is not available on this theme.';
57+
}
58+
@return map.get($theme, $_internals, theme-type) or light;
59+
}
60+
@else {
61+
@error #{'Unrecognized theme version:'} $version;
5862
}
59-
@return map.get($theme, $_internals, theme-type) or light;
6063
}
6164

6265
/// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
@@ -70,14 +73,26 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
7073
/// interpreted as a palette name).
7174
/// @return {Color} The requested theme color.
7275
@function get-theme-color($theme, $args...) {
76+
$version: get-theme-version($theme);
7377
$args-count: list.length($args);
74-
@if $args-count == 1 {
75-
@return _get-theme-role-color($theme, $args...);
78+
@if $args-count != 1 and $args-count != 2 {
79+
@error #{'Expected 2 or 3 arguments. Got:'} $args-count + 1;
7680
}
77-
@else if $args-count == 2 {
78-
@return _get-theme-palette-color($theme, $args...);
81+
82+
@if $version == 0 {
83+
@return m2-inspection.get-theme-color($theme, $args...);
84+
}
85+
@else if $version == 1 {
86+
@if $args-count == 1 {
87+
@return _get-theme-role-color($theme, $args...);
88+
}
89+
@else if $args-count == 2 {
90+
@return _get-theme-palette-color($theme, $args...);
91+
}
92+
}
93+
@else {
94+
@error #{'Unrecognized theme version:'} $version;
7995
}
80-
@error #{'Expected 2 or 3 arguments. Got:'} $args-count + 1;
8196
}
8297

8398
/// Gets a role color from a theme object.
@@ -136,72 +151,83 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
136151
/// (font, font-family, font-size, font-weight, line-height, or letter-spacing).
137152
/// @return {*} The value of the requested font property.
138153
@function get-theme-typography($theme, $typescale, $property: font) {
139-
$err: _validate-theme-object($theme);
140-
@if $err {
141-
// TODO(mmalerba): implement for old style theme objects.
142-
@error #{'get-theme-typography does not support legacy theme objects.'};
143-
}
144-
@if not theme-has($theme, typography) {
145-
@error 'Typography information is not available on this theme.';
146-
}
147-
@if not list.index($_m3-typescales, $typescale) {
148-
@error #{'Valid typescales are: #{$_m3-typescales}. Got:'} $typescale;
149-
}
150-
@if not list.index($_typography-properties, $property) {
151-
@error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
152-
}
153-
$property-key: map.get((
154-
font: '',
155-
font-family: '-font',
156-
line-height: '-line-height',
157-
font-size: '-size',
158-
letter-spacing: '-tracking',
159-
font-weight: '-weight'
160-
), $property);
161-
$token-name: '#{$typescale}#{$property-key}';
162-
@return map.get($theme, $_internals, typography-tokens, (mdc, typography), $token-name);
154+
$version: get-theme-version($theme);
155+
@if $version == 0 {
156+
@return m2-inspection.get-theme-typography($theme, $typescale, $property);
157+
}
158+
@else if $version == 1 {
159+
@if not theme-has($theme, typography) {
160+
@error 'Typography information is not available on this theme.';
161+
}
162+
@if not list.index($_m3-typescales, $typescale) {
163+
@error #{'Valid typescales are: #{$_m3-typescales}. Got:'} $typescale;
164+
}
165+
@if not list.index($_typography-properties, $property) {
166+
@error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
167+
}
168+
$property-key: map.get((
169+
font: '',
170+
font-family: '-font',
171+
line-height: '-line-height',
172+
font-size: '-size',
173+
letter-spacing: '-tracking',
174+
font-weight: '-weight'
175+
), $property);
176+
$token-name: '#{$typescale}#{$property-key}';
177+
@return map.get($theme, $_internals, typography-tokens, (mdc, typography), $token-name);
178+
}
179+
@else {
180+
@error #{'Unrecognized theme version:'} $version;
181+
}
163182
}
164183

165184
/// Gets the density scale from a theme object.
166185
/// @param {Map} $theme The theme
167186
/// @return {Number} The density scale.
168187
@function get-theme-density($theme) {
169-
$err: _validate-theme-object($theme);
170-
@if $err {
171-
// TODO(mmalerba): implement for old style theme objects.
172-
@error #{'get-theme-density does not support legacy theme objects.'};
188+
$version: get-theme-version($theme);
189+
@if $version == 0 {
190+
@return m2-inspection.get-theme-density($theme);
191+
}
192+
@else if $version == 1 {
193+
@if not theme-has($theme, density) {
194+
@error 'Density information is not available on this theme.';
195+
}
196+
@return map.get($theme, $_internals, density-scale);
173197
}
174-
@if not theme-has($theme, density) {
175-
@error 'Density information is not available on this theme.';
198+
@else {
199+
@error #{'Unrecognized theme version:'} $version;
176200
}
177-
@return map.get($theme, $_internals, density-scale);
178201
}
179202

180203
/// Checks whether the theme has information about given theming system.
181204
/// @param {Map} $theme The theme
182205
/// @param {String} $system The system to check
183206
/// @param {Boolean} Whether the theme has information about the system.
184207
@function theme-has($theme, $system) {
185-
$err: _validate-theme-object($theme);
186-
@if $err {
187-
// TODO(mmalerba): implement for old style theme objects.
188-
@error #{'get-theme-density does not support legacy theme objects.'};
189-
}
190-
@if $system == base {
191-
@return map.get($theme, $_internals, base-tokens) != null;
192-
}
193-
@if $system == color {
194-
@return map.get($theme, $_internals, color-tokens) != null and
208+
$version: get-theme-version($theme);
209+
@if $version == 0 {
210+
@return m2-inspection.theme-has($theme, $system);
211+
}
212+
@else if $version == 1 {
213+
@if $system == base {
214+
@return map.get($theme, $_internals, base-tokens) != null;
215+
}
216+
@if $system == color {
217+
@return map.get($theme, $_internals, color-tokens) != null and
195218
map.get($theme, $_internals, theme-type) != null and
196219
map.get($theme, $_internals, palettes) != null;
220+
}
221+
@if $system == typography {
222+
@return map.get($theme, $_internals, typography-tokens) != null;
223+
}
224+
@if $system == density {
225+
@return map.get($theme, $_internals, density-scale) != null;
226+
}
227+
@error 'Valid systems are: base, color, typography, density. Got:' $system; }
228+
@else {
229+
@error #{'Unrecognized theme version:'} $version;
197230
}
198-
@if $system == typography {
199-
@return map.get($theme, $_internals, typography-tokens) != null;
200-
}
201-
@if $system == density {
202-
@return map.get($theme, $_internals, density-scale) != null;
203-
}
204-
@error 'Valid systems are: base, color, typography, density. Got:' $system;
205231
}
206232

207233
/// Gets the set of tokens from the given theme, limited to those affected by the requested theming

‎src/material/core/theming/_m2-inspection.scss

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@use 'sass:list';
2+
@use 'sass:map';
3+
@use './theming';
4+
@use '../typography/typography-utils';
5+
6+
$_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);
7+
8+
/// Gets the type of theme represented by a theme object (light or dark).
9+
/// @param {Map} $theme The theme
10+
/// @return {String} The type of theme (either `light` or `dark`).
11+
@function get-theme-type($theme) {
12+
@if not theme-has($theme, color) {
13+
@error 'Color information is not available on this theme.';
14+
}
15+
$colors: theming.get-color-config($theme);
16+
@return if(map.get($colors, is-dark), dark, light);
17+
}
18+
19+
/// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
20+
/// passed, the second argument is treated as the name of a color role. If 3 arguments are passed,
21+
/// the second argument is treated as the name of a color palette (primary, secondary, etc.) and the
22+
/// third is treated as the palette hue (10, 50, etc.)
23+
/// @param {Map} $theme The theme
24+
/// @param {String} $palette-name The name of a color palette.
25+
/// @param {Number} $hue The palette hue to get (passing this argument means the second argument is
26+
/// interpreted as a palette name).
27+
/// @return {Color} The requested theme color.
28+
@function get-theme-color($theme, $palette-name, $args...) {
29+
@if not theme-has($theme, color) {
30+
@error 'Color information is not available on this theme.';
31+
}
32+
$colors: theming.get-color-config($theme);
33+
$palette: map.get($colors, $palette-name);
34+
@if not $palette {
35+
@error 'Unrecognized palette name:' $palette-name;
36+
}
37+
@return theming.get-color-from-palette($palette, $args...);
38+
}
39+
40+
/// Gets a typography value from a theme object.
41+
/// @param {Map} $theme The theme
42+
/// @param {String} $typescale The typescale name.
43+
/// @param {String} $property The CSS font property to get
44+
/// (font, font-family, font-size, font-weight, line-height, or letter-spacing).
45+
/// @return {*} The value of the requested font property.
46+
@function get-theme-typography($theme, $typescale, $property) {
47+
@if not theme-has($theme, typography) {
48+
@error 'Typography information is not available on this theme.';
49+
}
50+
$typography: theming.get-typography-config($theme);
51+
@if $property == font {
52+
$font-weight: typography-utils.font-weight($typography, $typescale);
53+
$font-size: typography-utils.font-size($typography, $typescale);
54+
$line-height: typography-utils.line-height($typography, $typescale);
55+
$font-family: typography-utils.font-family($typography, $typescale);
56+
@return ($font-weight list.slash($font-size, $line-height) $font-family);
57+
}
58+
@else if $property == font-family {
59+
@return typography-utils.font-family($typography, $typescale);
60+
}
61+
@else if $property == font-size {
62+
@return typography-utils.font-size($typography, $typescale);
63+
}
64+
@else if $property == font-weight {
65+
@return typography-utils.font-weight($typography, $typescale);
66+
}
67+
@else if $property == line-height {
68+
@return typography-utils.line-height($typography, $typescale);
69+
}
70+
@else if $property == letter-spacing {
71+
@return typography-utils.letter-spacing($typography, $typescale);
72+
}
73+
@else {
74+
@error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
75+
}
76+
}
77+
78+
/// Gets the density scale from a theme object.
79+
/// @param {Map} $theme The theme
80+
/// @return {Number} The density scale.
81+
@function get-theme-density($theme) {
82+
@if not theme-has($theme, density) {
83+
@error 'Density information is not available on this theme.';
84+
}
85+
$scale: theming.get-density-config($theme);
86+
@return theming.clamp-density($scale, -5);
87+
}
88+
89+
@function theme-has($theme, $system) {
90+
$theme: theming.private-legacy-get-theme($theme);
91+
@if $system == base {
92+
@return true;
93+
}
94+
@if $system == color {
95+
@return theming.get-color-config($theme) != null;
96+
}
97+
@if $system == typography {
98+
@return theming.get-typography-config($theme) != null;
99+
}
100+
@if $system == density {
101+
@return theming.get-density-config($theme, $default: null) != null;
102+
}
103+
@error 'Valid systems are: base, color, typography, density. Got:' $system;
104+
}

0 commit comments

Comments
 (0)