ng-material-utility/_index.scss at main · azan-n/ng-material-utility · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
@use "sass:map";

/// Angular Material uses $theme object (or map) to store all theming data.
/// This map contains several maps within them which are defined here by the SASS variable
/// $color-map-names. If we were to see the map as a JS object it would have the following structure:
///
/// theme = {
///     'primary': {
///                 50: #COLOR_HEX,
///                 ....
///
///                 },
///     'accent': {
///                 .....
///                 }
///     ...
/// }
///
/// The 'background' and 'foreground' maps are predefined when you use functions like
/// mat.define-dark-theme or mat.define-light-theme.

$color-map-names: 'primary', 'accent', 'warn', 'background', 'foreground';

/// Include background-color, color, text-decoration-color, outline-color, border-color utility classes.
///
/// @param $theme - Theme object as defined by mat.define-light-theme or mat.define-dark-theme
@mixin all($theme) {
    @include background-color($theme);
    @include color($theme);
    @include text-decoration-color($theme);
    @include outline-color($theme);
    @include border-color($theme);
}

/// Include background-color utility classes.
///
/// @param $theme - Theme object as defined by mat.define-light-theme or mat.define-dark-them
@mixin background-color($theme) {
    @include generate-classes('background-color', 'bg', $theme);
}

/// Include color utility classes.
///
/// @param $theme - Theme object as defined by mat.define-light-theme or mat.define-dark-theme
@mixin color($theme) {
    @include generate-classes('color', 'text', $theme);
}

/// Include text-decoration-color utility classes.
///
/// @param $theme - Theme object as defined by mat.define-light-theme or mat.define-dark-theme
@mixin text-decoration-color($theme) {
    @include generate-classes('text-decoration-color', 'decoration', $theme);
}

/// Include outline-color utility classes.
///
/// @param $theme - Theme object as defined by mat.define-light-theme or mat.define-dark-theme
@mixin outline-color($theme) {
    @include generate-classes('outline-color', 'outline', $theme);
}

/// Include `border-color` utility classes.
///
/// @param $theme - Theme object as defined by mat.define-light-theme or mat.define-dark-theme
@mixin border-color($theme) {
    @include generate-classes('border-color', 'border', $theme);
}

/// Generate utility classes for all maps contained within the `$theme` nested-map.
///
/// @param $property - CSS property to generate classes for.
/// @param $suffix - Suffix to give to classes generated. Example 'bg', 'border'.
/// @param $theme - Theme object as defined by mat.define-light-theme or mat.define-dark-theme
@mixin generate-classes($property, $suffix, $theme) {
    @each $color-map-name in $color-map-names {

        @each $map-key,
        $map-value in map.get($theme, $color-map-name) {

            @if $map-key =='contrast' {
                /// Do nothing if the contrast map is found.
                /// All color maps within themes have values with the '-contrast' suffix
                /// defined for them automatically.
            }

            @else {
                .#{$suffix}-#{$color-map-name}-#{$map-key} {
                    #{$property}: $map-value;
                }
            }

        }
    }

}