We have defined a SASS variable in our angular project.
$theme-warn: mat.define-palette(mat.$orange-palette);
And we want to know what it contains.
Approach
$theme-warn: mat.define-palette(mat.$orange-palette);
@debug $theme-warn;
In the below demo open src/theme.scss.
In the below Stackblitz demo open src/theme.scss .
Check the console. The content of $theme-warn has been logged.
css:16 DEBUG: (50: #fff3e0, 100: #ffe0b2, 200: #ffcc80, 300: #ffb74d, 400: #ffa726, 500: #ff9800, 600: #fb8c00, 700: #f57c00, 800: #ef6c00, 900: #e65100, A100: #ffd180, A200: #ffab40, A400: #ff9100, A700: #ff6d00, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: rgba(0, 0, 0, 0.87), 600: rgba(0, 0, 0, 0.87), 700: rgba(0, 0, 0, 0.87), 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: black), default: #ff9800, lighter: #ffe0b2, darker: #f57c00, text: #ff9800, default-contrast: rgba(0, 0, 0, 0.87), lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: rgba(0, 0, 0, 0.87), "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": rgba(0, 0, 0, 0.87), "600-contrast": rgba(0, 0, 0, 0.87), "700-contrast": rgba(0, 0, 0, 0.87), "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": black, "contrast-contrast": null)
DEBUG: (50: #fff3e0, 100: #ffe0b2, 200: #ffcc80, 300: #ffb74d, 400: #ffa726, 500: #ff9800, 600: #fb8c00, 700: #f57c00, 800: #ef6c00, 900: #e65100, A100: #ffd180, A200: #ffab40, A400: #ff9100, A700: #ff6d00, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: rgba(0, 0, 0, 0.87), 600: rgba(0, 0, 0, 0.87), 700: rgba(0, 0, 0, 0.87), 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: rgba(0, 0, 0, 0.87), A700: black), default: #ff9800, lighter: #ffe0b2, darker: #f57c00, text: #ff9800, default-contrast: rgba(0, 0, 0, 0.87), lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: rgba(0, 0, 0, 0.87), "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": rgba(0, 0, 0, 0.87), "600-contrast": rgba(0, 0, 0, 0.87), "700-contrast": rgba(0, 0, 0, 0.87), "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": rgba(0, 0, 0, 0.87), "A700-contrast": black, "contrast-contrast": null)
✔ Browser application bundle generation complete
One thing we notice about this is that the entire map contained in one line. If we want separated key value pairs we can use Firefly Semantics SASS Logger.
Add the dependency.
"@fireflysemantics/sass-logger": "*"
And import it into styles.scss like this.
@use '@fireflysemantics/sass-logger' as logger;
We can now generate the structure like this:
$result: logger.pretty-map($theme);
And when we output that with @debug $result we get this.
50: #fff3e0,
100: #ffe0b2,
200: #ffcc80,
300: #ffb74d,
400: #ffa726,
500: #ff9800,
600: #fb8c00,
700: #f57c00,
800: #ef6c00,
900: #e65100,
A100: #ffd180,
A200: #ffab40,
A400: #ff9100,
A700: #ff6d00,
contrast: (
50: rgba(0, 0, 0, 0.87),
100: rgba(0, 0, 0, 0.87),
200: rgba(0, 0, 0, 0.87),
300: rgba(0, 0, 0, 0.87),
400: rgba(0, 0, 0, 0.87),
500: rgba(0, 0, 0, 0.87),
600: rgba(0, 0, 0, 0.87),
700: rgba(0, 0, 0, 0.87),
800: white,
900: white,
A100: rgba(0, 0, 0, 0.87),
A200: rgba(0, 0, 0, 0.87),
A400: rgba(0, 0, 0, 0.87),
A700: black,
),
default: #ff9800,
lighter: #ffe0b2,
darker: #f57c00,
text: #ff9800,
default-contrast: rgba(0, 0, 0, 0.87),
lighter-contrast: rgba(0, 0, 0, 0.87),
darker-contrast: rgba(0, 0, 0, 0.87),
50-contrast: rgba(0, 0, 0, 0.87),
100-contrast: rgba(0, 0, 0, 0.87),
200-contrast: rgba(0, 0, 0, 0.87),
300-contrast: rgba(0, 0, 0, 0.87),
400-contrast: rgba(0, 0, 0, 0.87),
500-contrast: rgba(0, 0, 0, 0.87),
600-contrast: rgba(0, 0, 0, 0.87),
700-contrast: rgba(0, 0, 0, 0.87),
800-contrast: white,
900-contrast: white,
A100-contrast: rgba(0, 0, 0, 0.87),
A200-contrast: rgba(0, 0, 0, 0.87),
A400-contrast: rgba(0, 0, 0, 0.87),
A700-contrast: black,
contrast-contrast: ,
Demo
This logs a formatted result using @fireflysemantics/sass-logger .
This demo logs the result all in one line.