|
24 | 24 | @return map.get(map.get($palette, contrast), $hue); |
25 | 25 | } |
26 | 26 |
|
27 | | - |
28 | 27 | /// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms |
29 | 28 | /// of the Material Design hues. |
30 | 29 | /// @param {Map} $base-palette Map of hue keys to color values for the basis for this palette. |
|
33 | 32 | /// @param {String | Number} $darker "darker" hue for this palette. |
34 | 33 | /// @param {String | Number} $text "text" hue for this palette. |
35 | 34 | /// @returns {Map} A complete Angular Material theming palette. |
36 | | -@function define-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, |
37 | | - $text: $default) { |
38 | | - $result: map.merge($base-palette, ( |
39 | | - default: _get-color-from-palette($base-palette, $default), |
40 | | - lighter: _get-color-from-palette($base-palette, $lighter), |
41 | | - darker: _get-color-from-palette($base-palette, $darker), |
42 | | - text: _get-color-from-palette($base-palette, $text), |
43 | | - default-contrast: get-contrast-color-from-palette($base-palette, $default), |
44 | | - lighter-contrast: get-contrast-color-from-palette($base-palette, $lighter), |
45 | | - darker-contrast: get-contrast-color-from-palette($base-palette, $darker) |
46 | | - )); |
| 35 | +@function define-palette( |
| 36 | + $base-palette, |
| 37 | + $default: 500, |
| 38 | + $lighter: 100, |
| 39 | + $darker: 700, |
| 40 | + $text: $default |
| 41 | +) { |
| 42 | + $result: map.merge( |
| 43 | + $base-palette, |
| 44 | + ( |
| 45 | + default: _get-color-from-palette($base-palette, $default), |
| 46 | + lighter: _get-color-from-palette($base-palette, $lighter), |
| 47 | + darker: _get-color-from-palette($base-palette, $darker), |
| 48 | + text: _get-color-from-palette($base-palette, $text), |
| 49 | + default-contrast: get-contrast-color-from-palette($base-palette, $default), |
| 50 | + lighter-contrast: get-contrast-color-from-palette($base-palette, $lighter), |
| 51 | + darker-contrast: get-contrast-color-from-palette($base-palette, $darker), |
| 52 | + ) |
| 53 | + ); |
47 | 54 |
|
48 | 55 | // For each hue in the palette, add a "-contrast" color to the map. |
49 | 56 | @each $hue, $color in $base-palette { |
50 | | - $result: map.merge($result, ( |
51 | | - '#{$hue}-contrast': get-contrast-color-from-palette($base-palette, $hue) |
52 | | - )); |
| 57 | + $result: map.merge( |
| 58 | + $result, |
| 59 | + ( |
| 60 | + '#{$hue}-contrast': get-contrast-color-from-palette($base-palette, $hue), |
| 61 | + ) |
| 62 | + ); |
53 | 63 | } |
54 | 64 |
|
55 | 65 | @return $result; |
56 | 66 | } |
57 | 67 |
|
58 | | - |
59 | 68 | /// Gets a color from a theme palette (the output of mat-palette). |
60 | 69 | /// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured |
61 | 70 | /// hues (default, lighter, darker), or any of the aforementioned suffixed with "-contrast". |
|
93 | 102 | $color: map.get($theme, color); |
94 | 103 | @if not map.get($color, primary) { |
95 | 104 | @error 'Theme does not define a valid "primary" palette.'; |
96 | | - } |
97 | | - @else if not map.get($color, accent) { |
| 105 | + } @else if not map.get($color, accent) { |
98 | 106 | @error 'Theme does not define a valid "accent" palette.'; |
99 | | - } |
100 | | - @else if not map.get($color, warn) { |
| 107 | + } @else if not map.get($color, warn) { |
101 | 108 | @error 'Theme does not define a valid "warn" palette.'; |
102 | 109 | } |
103 | 110 | } |
|
113 | 120 | warn: if($warn != null, $warn, define-palette(palette.$red-palette)), |
114 | 121 | is-dark: false, |
115 | 122 | foreground: palette.$light-theme-foreground-palette, |
116 | | - background: palette.$light-theme-background-palette, |
| 123 | + background: palette.$light-theme-background-palette |
117 | 124 | ); |
118 | 125 | } |
119 | 126 |
|
|
126 | 133 | warn: if($warn != null, $warn, define-palette(palette.$red-palette)), |
127 | 134 | is-dark: true, |
128 | 135 | foreground: palette.$dark-theme-foreground-palette, |
129 | | - background: palette.$dark-theme-background-palette, |
| 136 | + background: palette.$dark-theme-background-palette |
130 | 137 | ); |
131 | 138 | } |
132 | 139 |
|
|
152 | 159 | // configuration for the `color` theming part. |
153 | 160 | @if $accent != null { |
154 | 161 | @warn theming.$private-legacy-theme-warning; |
155 | | - $theme: _mat-validate-theme(( |
156 | | - _is-legacy-theme: true, |
157 | | - color: _mat-create-light-color-config($primary, $accent, $warn), |
158 | | - )); |
| 162 | + $theme: _mat-validate-theme( |
| 163 | + ( |
| 164 | + _is-legacy-theme: true, |
| 165 | + color: _mat-create-light-color-config($primary, $accent, $warn), |
| 166 | + ) |
| 167 | + ); |
159 | 168 |
|
160 | 169 | @return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme)); |
161 | 170 | } |
|
168 | 177 | $primary: map.get($color-settings, primary); |
169 | 178 | $accent: map.get($color-settings, accent); |
170 | 179 | $warn: map.get($color-settings, warn); |
171 | | - $result: map.merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn))); |
| 180 | + $result: map.merge( |
| 181 | + $result, |
| 182 | + ( |
| 183 | + color: _mat-create-light-color-config($primary, $accent, $warn), |
| 184 | + ) |
| 185 | + ); |
172 | 186 | } |
173 | 187 | @return _internalize-theme( |
174 | | - theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))); |
| 188 | + theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result)) |
| 189 | + ); |
175 | 190 | } |
176 | 191 |
|
177 | 192 | // TODO: Remove legacy API and rename below `$primary` to `$config`. Currently it cannot be renamed |
|
196 | 211 | // configuration for the `color` theming part. |
197 | 212 | @if $accent != null { |
198 | 213 | @warn theming.$private-legacy-theme-warning; |
199 | | - $theme: _mat-validate-theme(( |
200 | | - _is-legacy-theme: true, |
201 | | - color: _mat-create-dark-color-config($primary, $accent, $warn), |
202 | | - )); |
| 214 | + $theme: _mat-validate-theme( |
| 215 | + ( |
| 216 | + _is-legacy-theme: true, |
| 217 | + color: _mat-create-dark-color-config($primary, $accent, $warn), |
| 218 | + ) |
| 219 | + ); |
203 | 220 | @return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme)); |
204 | 221 | } |
205 | 222 | // If the map pattern is used (1), we just pass-through the configurations for individual |
|
211 | 228 | $primary: map.get($color-settings, primary); |
212 | 229 | $accent: map.get($color-settings, accent); |
213 | 230 | $warn: map.get($color-settings, warn); |
214 | | - $result: map.merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn))); |
| 231 | + $result: map.merge( |
| 232 | + $result, |
| 233 | + ( |
| 234 | + color: _mat-create-dark-color-config($primary, $accent, $warn), |
| 235 | + ) |
| 236 | + ); |
215 | 237 | } |
216 | 238 | @return _internalize-theme( |
217 | | - theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))); |
| 239 | + theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result)) |
| 240 | + ); |
218 | 241 | } |
219 | 242 |
|
220 | 243 | /// Gets the color configuration from the given theme or configuration. |
|
227 | 250 | } |
228 | 251 |
|
229 | 252 | /// Gets the density configuration from the given theme or configuration. |
230 | | -/// @param {Map} $theme-or-config The theme map returned from `define-light-theme` or |
| 253 | +/// @param {Map|string|number} $theme-or-config The theme map returned from `define-light-theme` or |
231 | 254 | /// `define-dark-theme`. |
232 | | -/// @param {Map} $default The default value returned if the given `$theme` does not include a |
233 | | -/// `density` configuration. |
234 | | -/// @returns {Map} Density configuration for a theme. |
| 255 | +/// @param {string|number} $default The default value returned if the given `$theme` does not |
| 256 | +/// include a `density` configuration. |
| 257 | +/// @returns {string|number} Density configuration for a theme. |
235 | 258 | @function get-density-config($theme-or-config, $default: 0) { |
236 | 259 | @return theming.private-get-density-config($theme-or-config, $default); |
237 | 260 | } |
|
258 | 281 | $internalized-theme: ( |
259 | 282 | theming.$private-internal-name: ( |
260 | 283 | theme-version: 0, |
261 | | - m2-config: $theme |
262 | | - ) |
| 284 | + m2-config: $theme, |
| 285 | + ), |
263 | 286 | ); |
264 | 287 | @if (theming.$theme-legacy-inspection-api-compatibility) { |
265 | 288 | @return map.merge($theme, $internalized-theme); |
266 | 289 | } |
267 | | - $error-theme: |
268 | | - _replace-values-with-errors($theme, 'Theme may only be accessed via theme inspection API'); |
| 290 | + $error-theme: _replace-values-with-errors( |
| 291 | + $theme, |
| 292 | + 'Theme may only be accessed via theme inspection API' |
| 293 | + ); |
269 | 294 | @return map.merge($error-theme, $internalized-theme); |
270 | 295 | } |
271 | 296 |
|
|
285 | 310 | $value: map.set($value, $k, _replace-values-with-errors($v, $message)); |
286 | 311 | } |
287 | 312 | @return $value; |
288 | | - } |
289 | | - @else if $value-type == 'list' and list.length($value) > 0 { |
| 313 | + } @else if $value-type == 'list' and list.length($value) > 0 { |
290 | 314 | @for $i from 1 through list.length() { |
291 | 315 | $value: list.set-nth($value, $i, _replace-values-with-errors(list.nth($value, $i), $message)); |
292 | 316 | } |
|
0 commit comments