matcha-theme 1.0.1

package/abstracts/_breakpoints.scss

@@ -0,0 +1,33 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Breakpoints generator
+//
+// Examples:
+// @include media-breakpoint("xs") {
+// Show styles in small devices ( Phones and Gadget, 0px and up < 600px )
+// }
+// @include media-breakpoint("gt-xs") {
+// Show styles in medium devices (landscapes and tablets, 600px and up < 1024px )
+// }
+// @include media-breakpoint("gt-sm") {
+// Show styles in large devices (tablets and small monitors, 1024px and up < 1440px)
+// }
+// @include media-breakpoint("gt-md") {
+// Show styles in X-Large devices (big desktops, 1440px and up < 1920)
+// }
+// @include media-breakpoint("gt-lg") {
+// Show styles in XX-Large devices (larger desktops, 1920px and up)
+// }
+// -------------------------------------------------------------------------------------------------------------------
+@mixin media-breakpoint($breakpointName) {
+    $mediaQuery: map-get($breakpoints, $breakpointName);
+
+    @if ($mediaQuery ==null) {
+        @content;
+    }
+
+    @else {
+        @media #{$mediaQuery} {
+            @content;
+        }
+    }
+}

package/abstracts/_colors.scss

@@ -0,0 +1,422 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Text color levels generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin _generate-text-color-levels($classes, $contrast) {
+    @if ($contrast == "dark") {
+        #{$classes} {
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(0, 0, 0, 0.54) !important;
+            }
+
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(0, 0, 0, 0.38) !important;
+            }
+
+            &.divider,
+            .divider {
+                color: rgba(0, 0, 0, 0.12) !important;
+            }
+        }
+    } @else {
+        #{$classes} {
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(255, 255, 255, 0.7) !important;
+            }
+
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(255, 255, 255, 0.5) !important;
+            }
+
+            &.divider,
+            .divider {
+                color: rgba(255, 255, 255, 0.12) !important;
+            }
+        }
+    }
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Static color classes generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin _generate-static-color-classes($colorName, $color, $contrastColor, $hue) {
+    $colorSelector: unquote(".#{$colorName}#{$hue}");
+
+    #{$colorSelector}-bg {
+        background-color: $color !important;
+    }
+
+    #{$colorSelector} {
+        background-color: $color !important;
+        color: $contrastColor !important;
+
+        &[disabled] {
+            background-color: rgba($color, 0.12) !important;
+            color: rgba($contrastColor, 0.26) !important;
+        }
+    }
+
+    #{$colorSelector}-fg {
+        color: $color !important;
+    }
+
+    #{$colorSelector}-border,
+    #{$colorSelector}-border-top,
+    #{$colorSelector}-border-right,
+    #{$colorSelector}-border-bottom,
+    #{$colorSelector}-border-left {
+        border-color: $color !important;
+    }
+
+    #{$colorSelector}-fill {
+        fill: $color !important;
+    }
+}
+
+@mixin colors-classes-static($palettes) {
+    $light-contrasting-classes: ();
+    $dark-contrasting-classes: ();
+
+    @each $paletteName, $palette in $palettes {
+        $contrasts: map-get($palette, "contrast");
+
+        @each $hue in $matchaHues {
+            $color: map-get($palette, $hue);
+            $contrast: map-get($contrasts, $hue);
+
+            @if ($color != null and $contrast != null) {
+                @include _generate-static-color-classes($paletteName, $color, $contrast, "-#{$hue}");
+
+                // If the contrast color is dark
+                @if (rgba(black, 1) ==rgba($contrast, 1)) {
+                    $dark-contrasting-classes: append(
+                        $dark-contrasting-classes,
+                        unquote(".#{$paletteName}-#{$hue}"),
+                        "comma"
+                    );
+                }
+
+                // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append(
+                        $light-contrasting-classes,
+                        unquote(".#{$paletteName}-#{$hue}"),
+                        "comma"
+                    );
+                }
+
+                // Run the generator one more time for default values (500)
+                // if we are not working with primary, accent or warn palettes
+                @if ($hue ==500 and $paletteName != "primary" and $paletteName != "accent" and $paletteName != "warn") {
+                    // Generate color classes
+                    @include _generate-static-color-classes($paletteName, $color, $contrast, "");
+
+                    // Add color to the correct list depending on the contrasting color
+
+                    // If the contrast color is dark
+                    @if (rgba(black, 1) ==rgba($contrast, 1)) {
+                        $dark-contrasting-classes: append(
+                            $dark-contrasting-classes,
+                            unquote(".#{$paletteName}"),
+                            "comma"
+                        );
+                    }
+
+                    // if the contrast color is light
+                    @else {
+                        $light-contrasting-classes: append(
+                            $light-contrasting-classes,
+                            unquote(".#{$paletteName}"),
+                            "comma"
+                        );
+                    }
+                }
+            }
+        }
+
+        // Run the generator again for the selected default hue values for
+        // primary, accent and warn palettes
+        //
+        // We are doing this because the default hue value can be changed
+        // by the user when the Material theme being generated.
+        @if ($paletteName == "primary" or $paletteName == "accent" or $paletteName == "warn") {
+            // Get the color and the contrasting color for the selected
+            // default hue
+            $color: map-get($palette, "default");
+            $contrast: map-get($palette, "default-contrast");
+
+            // Generate color classes
+            @include _generate-static-color-classes($paletteName, $color, $contrast, "");
+
+            // Add color to the correct list depending on the contrasting color
+
+            // If the contrast color is dark
+            @if (rgba(black, 1) ==rgba($contrast, 1)) {
+                $dark-contrasting-classes: append($dark-contrasting-classes, unquote(".#{$paletteName}"), "comma");
+            }
+
+            // if the contrast color is light
+            @else {
+                $light-contrasting-classes: append($light-contrasting-classes, unquote(".#{$paletteName}"), "comma");
+            }
+        }
+    }
+
+    // Generate contrasting colors
+    @include _generate-text-color-levels($dark-contrasting-classes, "dark");
+    @include _generate-text-color-levels($light-contrasting-classes, "light");
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Dynamic color classes generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin _generate-dynamic-color-classes($attribute, $colorLevel, $colorName, $background, $foreground) {
+    $color: unquote("-#{$colorName}");
+    $selectors: (".#{$attribute}#{$color}", ".matcha-#{$attribute}#{$color}", ".matcha-#{$attribute}-graphic#{$color}");
+
+    @each $selector in $selectors {
+        #{$selector} {
+            #{$attribute}: map-get($colorLevel, $colorName) !important;
+
+            &-alpha {
+                #{$attribute}: map-get($colorLevel, ("#{$colorName}-alpha")) !important;
+            }
+        }
+    }
+
+    @if ($colorName != yellow or $colorName != amber) {
+        $baseClassName: (".base-#{$colorName}");
+        #{$baseClassName} {
+            background: map-get($background, $colorName);
+            color: map-get($foreground, text-inverse);
+        }
+    }
+    @if ($colorName == yellow or $colorName == amber) {
+        $baseClassName: (".base-#{$colorName}");
+        #{$baseClassName} {
+            background: map-get($background, $colorName);
+            color: map-get($foreground, static-dark-text);
+        }
+    }
+}
+
+@mixin _generate-classes($prefix, $color-map, $saturation) {
+    $background: map-get($color-map, $saturation);
+    $contrast: map-get($color-map, #{$saturation}-contrast);
+
+    .#{$prefix}-#{$saturation} {
+        background: $background;
+        color: $contrast;
+    }
+    .#{$prefix}-#{$saturation}-bg {
+        background: $background;
+    }
+    .#{$prefix}-#{$saturation}-fg {
+        color: $background;
+    }
+}
+
+@mixin colors-classes-dynamic($theme) {
+    $is-dark: map-get($theme, isdark);
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    $colorNames: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow,
+        amber, orange, deep-orange, primary, accent, warn;
+    $attributes: (
+        color: $foreground,
+        border-color: $foreground,
+        background: $background,
+        fill: $background,
+        stroke: $background
+    );
+
+    .primary,
+    .base-primary {
+        background: map-get($primary, default);
+        color: map-get($primary, default-contrast);
+    }
+
+    .accent,
+    .base-accent {
+        background: map-get($accent, default);
+        color: map-get($accent, default-contrast);
+    }
+
+    .warn,
+    .base-warn {
+        background: map-get($warn, default);
+        color: map-get($warn, default-contrast);
+    }
+
+    @each $saturation in $matchaHues {
+        @include _generate-classes("primary", $primary, $saturation);
+        @include _generate-classes("accent", $accent, $saturation);
+        @include _generate-classes("warn", $warn, $saturation);
+    }
+
+    .background-transparent,
+    .matcha-background-transparent {
+        background: transparent;
+    }
+
+    @each $attribute, $colorLevel in $attributes {
+        @if ($attribute != "color") {
+            // border-color-bg
+            // background-bg
+            // fill-bg
+            // stroke-bg
+            .#{$attribute}-bg {
+                #{$attribute}: map-get($background, background) !important;
+            }
+            .#{$attribute}-bg-alpha {
+                #{$attribute}: map-get($background, background-alpha) !important;
+            }
+            .#{$attribute}-bg-inverse {
+                #{$attribute}: map-get($background, background-inverse) !important;
+            }
+            .#{$attribute}-bg-alpha-inverse {
+                #{$attribute}: map-get($background, background-alpha-inverse) !important;
+            }
+            .#{$attribute}-surface-inverse {
+                #{$attribute}: map-get($background, card-inverse) !important;
+            }
+            .#{$attribute}-surface-alpha-inverse {
+                #{$attribute}: map-get($background, card-alpha-inverse) !important;
+            }
+        }
+
+        .primary-bg {
+            background: map-get($primary, default) !important;
+        }
+        .primary-fg {
+            color: map-get($primary, default) !important;
+        }
+        .background-primary-alpha {
+            background: rgba(map-get($primary, default), 0.2);
+        }
+        .accent-bg {
+            background: map-get($accent, default) !important;
+        }
+        .accent-fg {
+            color: map-get($accent, default) !important;
+        }
+        .background-accent-alpha {
+            background: rgba(map-get($accent, default), 0.2);
+        }
+
+        .warn-bg {
+            background: map-get($warn, default) !important;
+        }
+        .warn-fg {
+            color: map-get($warn, default) !important;
+        }
+        .background-warn-alpha {
+            background: rgba(map-get($warn, default), 0.2);
+        }
+
+        .#{$attribute}-primary,
+        .matcha-#{$attribute}-primary {
+            #{$attribute}: map-get($primary, default) !important;
+        }
+
+        .#{$attribute}-accent,
+        .matcha-#{$attribute}-accent {
+            #{$attribute}: map-get($accent, default) !important;
+        }
+
+        .#{$attribute}-warn,
+        .matcha-#{$attribute}-warn {
+            #{$attribute}: map-get($warn, default) !important;
+        }
+
+        .#{$attribute}-error,
+        .matcha-#{$attribute}-error {
+            #{$attribute}: map-get($background, error) !important;
+        }
+
+        .#{$attribute}-info,
+        .matcha-#{$attribute}-info {
+            #{$attribute}: map-get($background, info) !important;
+        }
+
+        .#{$attribute}-success,
+        .matcha-#{$attribute}-success {
+            #{$attribute}: map-get($background, success) !important;
+        }
+
+        .#{$attribute}-warning,
+        .matcha-#{$attribute}-warning {
+            #{$attribute}: map-get($background, warning) !important;
+        }
+
+        .#{$attribute}-foreground,
+        .#{$attribute}-fg,
+        .#{$attribute}-base,
+        .#{$attribute}-text,
+        .matcha-#{$attribute}-foreground,
+        .matcha-#{$attribute}-fg,
+        .matcha-#{$attribute}-base,
+        .matcha-#{$attribute}-text {
+            #{$attribute}: map-get($foreground, text) !important;
+        }
+
+        .#{$attribute}-fg-inverse,
+        .#{$attribute}-base-inverse,
+        .matcha-#{$attribute}-text-inverse {
+            #{$attribute}: map-get($foreground, text-inverse) !important;
+        }
+
+        .#{$attribute}-surface,
+        .matcha-#{$attribute}-dialog,
+        .matcha-#{$attribute}-card {
+            #{$attribute}: map-get($background, card) !important;
+        }
+
+        .#{$attribute}-surface-alpha,
+        .matcha-#{$attribute}-surface-alpha,
+        .matcha-#{$attribute}-card-alpha {
+            #{$attribute}: map-get($background, card-alpha) !important;
+        }
+
+        .#{$attribute}-hover,
+        .matcha-#{$attribute}-hover,
+        .matcha-#{$attribute}-placeholder {
+            #{$attribute}: map-get($foreground, placeholder) !important;
+        }
+
+        .#{$attribute}-label,
+        .matcha-#{$attribute}-label {
+            #{$attribute}: map-get($foreground, label) !important;
+        }
+
+        .#{$attribute}-disabled,
+        .matcha-#{$attribute}-disabled {
+            #{$attribute}: map-get($background, disabled) !important;
+        }
+
+        .#{$attribute}-disabled-icon,
+        .matcha-#{$attribute}-disabled-icon {
+            #{$attribute}: map-get($foreground, disabled-icon) !important;
+        }
+
+        .#{$attribute}-selected,
+        .matcha-#{$attribute}-selected {
+            #{$attribute}: map-get($background, selected-button) !important;
+        }
+
+        @each $colorName in $colorNames {
+            @include _generate-dynamic-color-classes($attribute, $colorLevel, $colorName, $background, $foreground);
+        }
+    }
+}

package/abstracts/_elevation.scss

@@ -0,0 +1,102 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Elevations Mixins
+//
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://material.io/design/environment/elevation.html
+// Examples:
+//
+//
+// .matcha-foo {
+//   @include $elevation(2);
+//
+//   &:active {
+//     @include $elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
+
+// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
+// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
+// space completely obscured by an object relative to its light source), one for penumbra (the
+// space partially obscured by an object), and one for ambient (the space which contains the object
+// itself). For a further explanation of these terms and their meanings, see
+// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
+
+// Maps for the different shadow sets and their values within each z-space. These values were
+// created by taking a few reference shadow sets created by Google's Designers and interpolating
+// all of the values between them.
+//
+// -----------------------------------------------------------------------------------------------------
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin elevation($zValue, $color: $elevation-color, $opacity: $elevation-opacity) {
+    @if type-of($zValue) !=number or not unitless($zValue) {
+        @error '$zValue must be a unitless number';
+    }
+
+    @if $zValue < 0 or $zValue >24 {
+        @error '$zValue must be between 0 and 24';
+    }
+
+    box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
+    #{map-get(_get-penumbra-map($color, $opacity), $zValue)},
+    #{map-get(_get-ambient-map($color, $opacity), $zValue)};
+}
+
+@mixin _theme-elevation($zValue, $theme, $opacity: $elevation-opacity) {
+    $foreground: map-get($theme, foreground);
+    $elevation-color: map-get($foreground, elevation);
+    $elevation-color-or-default: if($elevation-color ==null, $elevation-color, $elevation-color);
+
+    @include elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
+// Applies the elevation to an element in a manner that allows
+// consumers to override it via the Material elevation classes.
+@mixin overridable-elevation($zValue, $color: $elevation-color, $opacity: $elevation-opacity) {
+    &:not([class*="#{$_elevation-prefix}"]) {
+        @include elevation($zValue, $color, $opacity);
+    }
+}
+
+@mixin _theme-overridable-elevation($zValue, $theme, $opacity: $elevation-opacity) {
+    $foreground: map-get($theme, foreground);
+    $elevation-color: map-get($foreground, elevation);
+    $elevation-color-or-default: if($elevation-color ==null, $elevation-color, $elevation-color);
+
+    @include overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
+// Applies the correct css rules needed to have an element transition between elevations.
+// This mixin should be applied to elements whose elevation values will change depending on their
+// context (e.g. when active or disabled).
+//
+// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
+// be used in the same way by clients.
+@mixin elevation-transition($duration: $elevation-transition-duration,
+    $easing: $elevation-transition-timing-function) {
+    // Returns a string that can be used as the value for a transition property for elevation.
+    // Calling this function directly is useful in situations where a component needs to transition
+    // more than one property.
+    //
+    // .foo {
+    //   transition: elevation-transition-property-value(), opacity 100ms ease;
+    // }
+    transition: elevation-transition-property-value($duration, $easing);
+}
+
+// Css class generator for shadows
+// $_elevation-prefix: "matcha-elevation-z";
+@mixin elevation-theme($theme) {
+    @for $zValue from 0 through 24 {
+        .#{$_elevation-prefix}#{$zValue} {
+            @include _theme-elevation($zValue, $theme);
+        }
+    }
+}