matcha-theme 1.0.25 → 18.0.27

package/abstracts/_functions.scss

@@ -1,398 +0,0 @@
-// -------------------------------------------------------------------------------------------------------------------
-// @ Theme functions
-// --------------------------------------------------------------------------------------------------------------------
-// For a given hue in a palette, return the contrast color from the map of contrast palettes.
-// @param $color-map
-// @param $hue
-@function map-contrast($palette, $hue) {
-    @return map-get(map-get($palette, contrast), $hue);
-}
-
-// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
-// of the Material Design hues.
-// @param $color-map
-// @param $primary
-// @param $lighter
-@function palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
-    $result: map_merge(
-        $base-palette,
-        (
-            default: map-get($base-palette, $default),
-            lighter: map-get($base-palette, $lighter),
-            darker: map-get($base-palette, $darker),
-            default-contrast: map-contrast($base-palette, $default),
-            lighter-contrast: map-contrast($base-palette, $lighter),
-            darker-contrast: map-contrast($base-palette, $darker)
-        )
-    );
-
-    // For each hue in the palette, add a "-contrast" color to the map.
-    @each $hue, $color in $base-palette {
-        $result: map_merge(
-            $result,
-            (
-                "#{$hue}-contrast": map-contrast($base-palette, $hue)
-            )
-        );
-    }
-
-    @return $result;
-}
-
-@function getAllPalettes($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-
-    // base colors
-    $palettes: (
-        red: $red,
-        pink: $pink,
-        purple: $purple,
-        deep-purple: $deep-purple,
-        indigo: $indigo,
-        blue: $blue,
-        light-blue: $light-blue,
-        cyan: $cyan,
-        teal: $teal,
-        green: $green,
-        light-green: $light-green,
-        lime: $lime,
-        yellow: $yellow,
-        amber: $amber,
-        orange: $orange,
-        deep-orange: $deep-orange,
-        brown: $brown,
-        grey: $grey,
-        blue-grey: $blue-grey,
-        primary: $primary,
-        accent: $accent,
-        warn: $warn
-    );
-    @return $palettes;
-}
-
-// Gets a color from a theme palette (the output of mat-palette).
-// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
-// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
-//
-// @param $color-map The theme palette (output of mat-palette).
-// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
-//     be treated as opacity.
-// @param $opacity The alpha channel value for the color.
-@function map-color($palette, $hue: default, $opacity: null) {
-    // If hueKey is a number between zero and one, then it actually contains an
-    // opacity value, so recall this function with the default hue and that given opacity.
-    @if type-of($hue) ==number and $hue >=0 and $hue <=1 {
-        @return map-color($palette, default, $hue);
-    }
-
-    $color: map-get($palette, $hue);
-
-    @if (type-of($color) !=color) {
-        // If the $color resolved to something different from a color (e.g. a CSS variable),
-        // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
-        // throw an error or output something invalid.
-        @return $color;
-    }
-
-    @return rgba($color, if($opacity ==null, opacity($color), $opacity));
-}
-
-// Creates a container object for a light theme to be given to individual component theme mixins.
-@function light-theme($primary, $accent, $warn) {
-    @return (
-        primary: $primary,
-        accent: $accent,
-        warn: $warn,
-        is-dark: false,
-        foreground: $light-theme-foreground-palette,
-        background: $light-theme-background-palette
-    );
-}
-
-// Creates a container object for a dark theme to be given to individual component theme mixins.
-@function dark-theme($primary, $accent, $warn) {
-    @return (
-        primary: $primary,
-        accent: $accent,
-        warn: $warn,
-        is-dark: true,
-        foreground: $dark-theme-foreground-palette,
-        background: $dark-theme-background-palette
-    );
-}
-
-// Creates a container object for a custom light theme to be given to individual component theme mixins.
-@function light-custom-theme($primary, $accent, $warn, $custom-light-fg, $custom-light-bg) {
-    @return (
-        primary: $primary,
-        accent: $accent,
-        warn: $warn,
-        is-dark: false,
-        foreground: $custom-light-fg,
-        background: $custom-light-bg
-    );
-}
-
-// Creates a container object for a custom dark theme to be given to individual component theme mixins.
-@function dark-custom-theme($primary, $accent, $warn, $custom-dark-fg, $custom-dark-bg) {
-    @return (
-        primary: $primary,
-        accent: $accent,
-        warn: $warn,
-        is-dark: true,
-        foreground: $custom-dark-fg,
-        background: $custom-dark-bg
-    );
-}
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Typography functions
-// --------------------------------------------------------------------------------------------------------------------
-// Represents a typography level from the Material design spec.
-@function matcha-typography-level(
-    $font-size,
-    $line-height: $font-size,
-    $font-weight: 400,
-    $font-family: null,
-    $letter-spacing: null
-) {
-    @return (
-        font-size: $font-size,
-        line-height: $line-height,
-        font-weight: $font-weight,
-        font-family: $font-family,
-        letter-spacing: $letter-spacing
-    );
-}
-
-// Represents a collection of typography levels.
-// Defaults come from https://material.io/guidelines/style/typography.html
-// Note: The spec doesn't mention letter spacing. The values here come from
-// eyeballing it until it looked exactly like the spec examples.
-@function matcha-typography-config(
-    $font-family: 'CircularStd, "Helvetica Neue", "Arial", sans-serif, "angular";',
-    $display-4: matcha-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
-    $display-3: matcha-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
-    $display-2: matcha-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
-    $display-1: matcha-typography-level(34px, 40px, 400),
-    $headline: matcha-typography-level(24px, 32px, 400),
-    $title: matcha-typography-level(20px, 32px, 700),
-    $subheading-2: matcha-typography-level(16px, 28px, 900),
-    $subheading-1: matcha-typography-level(15px, 24px, 900),
-    $body-2: matcha-typography-level(14px, 24px, 500),
-    $body-1: matcha-typography-level(14px, 20px, 400),
-    $caption: matcha-typography-level(12px, 20px, 500),
-    $button: matcha-typography-level(14px, 14px, 500),
-    $input: matcha-typography-level(inherit, 1.125, 400)
-) {
-    // Line-height must be unit-less fraction of the font-size.
-    // Declare an initial map with all of the levels.
-    $config: (
-        display-4: $display-4,
-        display-3: $display-3,
-        display-2: $display-2,
-        display-1: $display-1,
-        headline: $headline,
-        title: $title,
-        subheading-2: $subheading-2,
-        subheading-1: $subheading-1,
-        body-2: $body-2,
-        body-1: $body-1,
-        caption: $caption,
-        button: $button,
-        input: $input
-    );
-
-    // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
-    // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
-    @each $key, $level in $config {
-        @if map-get($level, font-family) ==null {
-            $new-level: map-merge(
-                $level,
-                (
-                    font-family: $font-family
-                )
-            );
-            $config: map-merge(
-                $config,
-                (
-                    $key: $new-level
-                )
-            );
-        }
-    }
-
-    // Add the base font family to the config.
-    @return map-merge(
-        $config,
-        (
-            font-family: $font-family
-        )
-    );
-}
-
-// Utility for fetching a nested value from a typography config.
-@function _matcha-get-type-value($config, $level, $name) {
-    @return map-get(map-get($config, $level), $name);
-}
-
-// Gets the font size for a level inside a typography config.
-@function matcha-font-size($config, $level) {
-    @return _matcha-get-type-value($config, $level, font-size);
-}
-
-// Gets the line height for a level inside a typography config.
-@function matcha-line-height($config, $level) {
-    @return _matcha-get-type-value($config, $level, line-height);
-}
-
-// Gets the font weight for a level inside a typography config.
-@function matcha-font-weight($config, $level) {
-    @return _matcha-get-type-value($config, $level, font-weight);
-}
-
-// Gets the letter spacing for a level inside a typography config.
-@function matcha-letter-spacing($config, $level) {
-    @return _matcha-get-type-value($config, $level, letter-spacing);
-}
-
-// Gets the font-family from a typography config and removes the quotes around it.
-@function matcha-font-family($config, $level: null) {
-    $font-family: map-get($config, font-family);
-
-    @if $level !=null {
-        $font-family: _matcha-get-type-value($config, $level, font-family);
-    }
-
-    // Guard against unquoting non-string values, because it's deprecated.
-    @return if(type-of($font-family) ==string, unquote($font-family), $font-family);
-}
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Elevation functions
-// --------------------------------------------------------------------------------------------------------------------
-// A collection of functions that can be used to apply elevation to a material
-
-@function _get-umbra-map($color, $opacity) {
-    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
-
-    @return (
-        0: "0px 0px 0px 0px #{$shadow-color}",
-        1: "0px 2px 2px 0px #{$shadow-color}",
-        2: "0px 3px 2px -2px #{$shadow-color}",
-        3: "0px 3px 3px -2px #{$shadow-color}",
-        4: "0px 2px 4px -1px #{$shadow-color}",
-        5: "0px 3px 5px -1px #{$shadow-color}",
-        6: "0px 3px 5px -1px #{$shadow-color}",
-        7: "0px 4px 5px -2px #{$shadow-color}",
-        8: "0px 5px 5px -3px #{$shadow-color}",
-        9: "0px 5px 6px -3px #{$shadow-color}",
-        10: "0px 6px 6px -3px #{$shadow-color}",
-        11: "0px 6px 7px -4px #{$shadow-color}",
-        12: "0px 7px 8px -4px #{$shadow-color}",
-        13: "0px 7px 8px -4px #{$shadow-color}",
-        14: "0px 7px 9px -4px #{$shadow-color}",
-        15: "0px 8px 9px -5px #{$shadow-color}",
-        16: "0px 8px 10px -5px #{$shadow-color}",
-        17: "0px 8px 11px -5px #{$shadow-color}",
-        18: "0px 9px 11px -5px #{$shadow-color}",
-        19: "0px 9px 12px -6px #{$shadow-color}",
-        20: "0px 10px 13px -6px #{$shadow-color}",
-        21: "0px 10px 13px -6px #{$shadow-color}",
-        22: "0px 10px 14px -6px #{$shadow-color}",
-        23: "0px 11px 14px -7px #{$shadow-color}",
-        24: "0px 11px 15px -7px #{$shadow-color}"
-    );
-}
-
-@function _get-penumbra-map($color, $opacity) {
-    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
-
-    @return (
-        0: "0px 0px 0px 0px #{$shadow-color}",
-        1: "0px 2px 2px 0px #{$shadow-color}",
-        2: "0px 2px 3px 0px #{$shadow-color}",
-        3: "0px 3px 4px 0px #{$shadow-color}",
-        4: "0px 4px 5px 0px #{$shadow-color}",
-        5: "0px 5px 8px 0px #{$shadow-color}",
-        6: "0px 6px 10px 0px #{$shadow-color}",
-        7: "0px 7px 10px 1px #{$shadow-color}",
-        8: "0px 8px 10px 1px #{$shadow-color}",
-        9: "0px 9px 12px 1px #{$shadow-color}",
-        10: "0px 10px 14px 1px #{$shadow-color}",
-        11: "0px 11px 15px 1px #{$shadow-color}",
-        12: "0px 12px 17px 2px #{$shadow-color}",
-        13: "0px 13px 19px 2px #{$shadow-color}",
-        14: "0px 14px 21px 2px #{$shadow-color}",
-        15: "0px 15px 22px 2px #{$shadow-color}",
-        16: "0px 16px 24px 2px #{$shadow-color}",
-        17: "0px 17px 26px 2px #{$shadow-color}",
-        18: "0px 18px 28px 2px #{$shadow-color}",
-        19: "0px 19px 29px 2px #{$shadow-color}",
-        20: "0px 20px 31px 3px #{$shadow-color}",
-        21: "0px 21px 33px 3px #{$shadow-color}",
-        22: "0px 22px 35px 3px #{$shadow-color}",
-        23: "0px 23px 36px 3px #{$shadow-color}",
-        24: "0px 24px 38px 3px #{$shadow-color}"
-    );
-}
-
-@function _get-ambient-map($color, $opacity) {
-    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
-
-    @return (
-        0: "0px 0px 0px 0px #{$shadow-color}",
-        1: "0px 2px 2px 0px #{$shadow-color}",
-        2: "0px 1px 5px 0px #{$shadow-color}",
-        3: "0px 1px 8px 0px #{$shadow-color}",
-        4: "0px 1px 10px 0px #{$shadow-color}",
-        5: "0px 1px 14px 0px #{$shadow-color}",
-        6: "0px 1px 18px 0px #{$shadow-color}",
-        7: "0px 2px 16px 1px #{$shadow-color}",
-        8: "0px 3px 14px 2px #{$shadow-color}",
-        9: "0px 3px 16px 2px #{$shadow-color}",
-        10: "0px 4px 18px 3px #{$shadow-color}",
-        11: "0px 4px 20px 3px #{$shadow-color}",
-        12: "0px 5px 22px 4px #{$shadow-color}",
-        13: "0px 5px 24px 4px #{$shadow-color}",
-        14: "0px 5px 26px 4px #{$shadow-color}",
-        15: "0px 6px 28px 5px #{$shadow-color}",
-        16: "0px 6px 30px 5px #{$shadow-color}",
-        17: "0px 6px 32px 5px #{$shadow-color}",
-        18: "0px 7px 34px 6px #{$shadow-color}",
-        19: "0px 7px 36px 6px #{$shadow-color}",
-        20: "0px 8px 38px 7px #{$shadow-color}",
-        21: "0px 8px 40px 7px #{$shadow-color}",
-        22: "0px 8px 42px 7px #{$shadow-color}",
-        23: "0px 9px 44px 8px #{$shadow-color}",
-        24: "0px 9px 46px 8px #{$shadow-color}"
-    );
-}
-
-// 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;
-// }
-@function elevation-transition-property-value(
-    $duration: $elevation-transition-duration,
-    $easing: $elevation-transition-timing-function
-) {
-    @return box-shadow #{$duration} #{$easing};
-}
-
-// Define the variable for the base size (usually 16 pixels = 1 rem).
-$base-font-size: 16px;
-
-// Function to convert pixels to rem.
-@function px-to-rem($value-in-px) {
-    @if $value-in-px != 0 {
-        @return calc($value-in-px / $base-font-size) * 1rem;
-    } @else {
-        @return $value-in-px;
-    }
-}

package/abstracts/_grid.scss

@@ -1,159 +0,0 @@
-// -------------------------------------------------------------------------------------------------------------------
-// @ Display grids generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin display-grid($grid-prefix, $grid-length, $grid-sizes, $helper-breakpoints) {
-    @each $sizeLabel, $value in $grid-sizes {
-        .row-#{$sizeLabel} {
-            display: flex;
-            flex-direction: column;
-        }
-
-        @media only screen and (min-width: #{$value}) {
-            @for $i from 1 through $grid-length {
-                .row > .#{$grid-prefix}-#{$sizeLabel}-#{$i} {
-                    flex-basis: $i / $grid-length * 100%;
-                }
-
-                .row > .#{$grid-prefix}-offset-#{$sizeLabel}-#{$i} {
-                    margin-left: $i / $grid-length * 100%;
-                }
-            }
-
-            .row-#{$sizeLabel} {
-                flex-direction: row;
-            }
-        }
-    }
-
-    [class^="grid-"] {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    @for $i from 0 through 12 {
-        $size: $i * 4;
-        .gap-#{$size} {
-            column-gap: #{$size}px;
-            row-gap: #{$size}px;
-        }
-        @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-            @include media-breakpoint($materialBreakpoint) {
-                $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
-                .gap#{$infix}-#{$size} {
-                    column-gap: #{$size}px;
-                    row-gap: #{$size}px;
-                }
-            }
-        }
-    }
-
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-
-            @for $i from 1 through $grid-length {
-                .grid#{$infix}-#{$i} {
-                    @include _grid-prop($i);
-                }
-
-                .colspan#{$infix}-#{$i} {
-                    grid-column-end: span #{$i};
-                }
-
-                .rowspan#{$infix}-#{$i} {
-                    grid-row-end: span #{$i};
-                }
-            }
-        }
-    }
-}
-
-
-
-@mixin _grid-prop($i) {
-    display: grid;
-    grid-template-columns: repeat($i, minmax(0, 1fr));
-}
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Display flex generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin display-flex($grid-prefix, $grid-length, $grid-sizes) {
-    .row {
-        display: flex;
-        flex-wrap: wrap;
-
-        > div[class*="#{$grid-prefix}-"] {
-            box-sizing: border-box;
-        }
-
-        > div:not([class*="#{$grid-prefix}-"]) {
-            flex: 1;
-        }
-
-        @for $i from 1 through $grid-length {
-            .#{$grid-prefix}-#{$i} {
-                flex-basis: $i / $grid-length * 100%;
-            }
-
-            .#{$grid-prefix}-offset-#{$i} {
-                margin-left: $i / $grid-length * 100%;
-            }
-
-            @each $sizeLabel, $value in $grid-sizes {
-                [class*="#{$grid-prefix}-offset-#{$sizeLabel}-"] {
-                    margin-left: 0;
-                }
-
-                .#{$grid-prefix}-#{$sizeLabel}-#{$i} {
-                    flex-basis: 100%;
-                }
-            }
-        }
-
-        @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end) {
-            > div[class*="#{$grid-prefix}-"].#{$classLabel} {
-                align-self: $cssValue;
-            }
-        }
-
-        @each $classLabel,
-            $cssValue
-                in (
-                    align-start flex-start,
-                    align-center center,
-                    align-end flex-end,
-                    space-around space-around,
-                    space-between space-between
-                )
-        {
-            &.#{$classLabel} {
-                justify-content: $cssValue;
-            }
-        }
-    }
-}
-
-@include display-grid($grid-prefix, $grid-length, $grid-sizes, $helper-breakpoints);
-@include display-flex($grid-prefix, $grid-length, $grid-sizes);
-
-// -------------------------------------------------------------------------------------------------------------------
-// Dynamic gaps
-// -------------------------------------------------------------------------------------------------------------------
-.gap-inside {
-    -moz-column-gap: 16px;
-    column-gap: 16px;
-    row-gap: 16px;
-}
-.gap-outside {
-    -moz-column-gap: 16px;
-    column-gap: 16px;
-    row-gap: 16px;
-}
-@media screen and (min-width: 600px) {
-    .gap-outside {
-        -moz-column-gap: 24px;
-        column-gap: 24px;
-        row-gap: 24px;
-    }
-}

package/abstracts/_order.scss

@@ -1,46 +0,0 @@
-// -----------------------------------------------------------------------------------------------------
-// @ Z-index helpers
-// -----------------------------------------------------------------------------------------------------
-@for $zIndex from -1 through 60 {
-    .z-index-#{$zIndex} {
-        z-index: #{$zIndex} !important;
-    }
-}
-
-// -----------------------------------------------------------------------------------------------------
-// @ Order
-// -----------------------------------------------------------------------------------------------------
-@each $breakpoint,
-$breakpointName in $helper-breakpoints {
-    @include media-breakpoint($breakpointName) {
-        $infix: if($breakpointName ==null, "", "-#{$breakpoint}");
-
-        /* <integer> values */
-        @for $i from -12 through 12 {
-            .order#{$infix}-#{$i} {
-                order: #{$i};
-            }
-        }
-
-        /* Global values */
-        .order#{$infix}-inherit {
-            order: inherit;
-        }
-
-        .order#{$infix}-initial {
-            order: initial;
-        }
-
-        .order#{$infix}-revert {
-            order: revert;
-        }
-
-        .order#{$infix}-revert-layer {
-            order: revert-layer;
-        }
-
-        .order#{$infix}-unset {
-            order: unset;
-        }
-    }
-}

package/abstracts/_position.scss

@@ -1,51 +0,0 @@
-// -----------------------------------------------------------------------------------------------------
-// @ Absolute position alignment helpers
-// -----------------------------------------------------------------------------------------------------
-@each $breakpoint,
-$materialBreakpoint in $helper-breakpoints {
-    @include media-breakpoint($materialBreakpoint) {
-        $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-
-        .place#{$infix}-top {
-            top: 0;
-        }
-
-        .place#{$infix}-right {
-            right: 0;
-        }
-
-        .place#{$infix}-bottom {
-            bottom: 0;
-        }
-
-        .place#{$infix}-left {
-            left: 0;
-        }
-    }
-}
-
-// -----------------------------------------------------------------------------------------------------
-// @ Position helpers
-// -----------------------------------------------------------------------------------------------------
-@each $breakpoint,
-$materialBreakpoint in $helper-breakpoints {
-    @include media-breakpoint($materialBreakpoint) {
-        $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-
-        .position#{$infix}-relative {
-            position: relative;
-        }
-
-        .position#{$infix}-absolute {
-            position: absolute;
-        }
-
-        .position#{$infix}-static {
-            position: static;
-        }
-
-        .position#{$infix}-fixed {
-            position: fixed;
-        }
-    }
-}