matcha-theme 18.0.27 → 18.0.28

package/abstracts/_order.scss

@@ -0,0 +1,46 @@
+// -----------------------------------------------------------------------------------------------------
+// @ 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

@@ -0,0 +1,51 @@
+// -----------------------------------------------------------------------------------------------------
+// @ 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;
+        }
+    }
+}

package/abstracts/_sizes.scss

@@ -0,0 +1,95 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Size helpers
+// -----------------------------------------------------------------------------------------------------
+// Media step breakpoint mixin based on Angular Material lib
+
+@mixin generate-size-classes($prop, $abbrev, $length, $size, $infix: "", $important: false) {
+    .#{$abbrev}#{$infix}-#{$size} {
+        #{$prop}: $length#{if($important, " !important", "")};
+    }
+
+    .max-#{$abbrev}#{$infix}-#{$size} {
+        max-#{$prop}: $length#{if($important, " !important", "")};
+    }
+
+    .min-#{$abbrev}#{$infix}-#{$size} {
+        min-#{$prop}: $length#{if($important, " !important", "")};
+    }
+}
+
+@each $prop, $abbrev in (height: h, width: w) {
+    // pixels - Without breakpoint infix
+    @for $index from 0 through 64 {
+        $size: $index * 4;
+        $length: #{$size}px;
+
+        @include generate-size-classes($prop, $abbrev, $length, $size);
+        @include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", "", true);
+    }
+
+    // percentage - Without breakpoint infix
+    @for $i from 0 through 20 {
+        $i-p: 5 * $i;
+        $size-p: 5% * $i;
+
+        @include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p");
+        @include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p--force", "", true);
+    }
+
+    // big sizes - Without breakpoint infix
+    @for $i from 3 through 8 {
+        $size: $i * 100;
+        $length: #{$size}px;
+
+        @include generate-size-classes($prop, $abbrev, $length, $size);
+        @include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", "", true);
+    }
+
+    // auto - Without breakpoint infix
+    .#{$abbrev}-auto {
+        #{$prop}: auto !important;
+    }
+}
+
+@each $breakpoint-infix, $media-size in $helper-breakpoints {
+    @include media-breakpoint($media-size) {
+        $infix: if($media-size == null, "", "-#{$breakpoint-infix}");
+
+        @each $prop, $abbrev in (height: h, width: w) {
+            // pixels - With breakpoint infix
+            @for $index from 0 through 64 {
+                $size: $index * 4;
+                $length: #{$size}px;
+
+                @include generate-size-classes($prop, $abbrev, $length, $size, $infix);
+                @include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", $infix, true);
+            }
+
+            // percentage - With breakpoint infix
+            @for $i from 0 through 20 {
+                $i-p: 5 * $i;
+                $size-p: 5% * $i;
+
+                @include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p", $infix);
+                @include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p--force", $infix, true);
+            }
+
+            // big sizes - With breakpoint infix
+            @for $i from 3 through 10 {
+                $size: $i * 100;
+                $length: #{$size}px;
+
+                @include generate-size-classes($prop, $abbrev, $length, $size, $infix);
+                @include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", $infix, true);
+            }
+
+            // auto - With breakpoint infix
+            .#{$abbrev}#{$infix}-auto {
+                #{$prop}: auto !important;
+            }
+        }
+    }
+}
+
+
+

package/abstracts/_spacings.scss

@@ -0,0 +1,216 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Spacing - Margin and Padding
+// Generate spacing values from -64 to 64 jumping from 4 to 4
+// -----------------------------------------------------------------------------------------------------
+@each $breakpoint-infix, $media-size in $helper-breakpoints {
+    @include media-breakpoint($media-size) {
+        $infix: if($media-size ==null, "", "-#{$breakpoint-infix}");
+
+        @each $prop, $abbrev in (margin: m, padding: p) {
+            @if ($prop ==margin) {
+                @for $index from -16 through 16 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
+
+                    .#{$abbrev}#{$infix}-#{$size} {
+                        #{$prop}: $length;
+                    }
+
+                    .#{$abbrev}#{$infix}-#{$size}--force {
+                        #{$prop}: $length !important;
+                    }
+
+                    .#{$abbrev}x#{$infix}-#{$size} {
+                        #{$prop}-right: $length;
+                        #{$prop}-left: $length;
+                    }
+
+                    .#{$abbrev}y#{$infix}-#{$size} {
+                        #{$prop}-top: $length;
+                        #{$prop}-bottom: $length;
+                    }
+
+                    .#{$abbrev}x#{$infix}-#{$size}--force {
+                        #{$prop}-right: $length !important;
+                        #{$prop}-left: $length !important;
+                    }
+
+                    .#{$abbrev}y#{$infix}-#{$size}--force {
+                        #{$prop}-top: $length !important;
+                        #{$prop}-bottom: $length !important;
+                    }
+
+                    .#{$abbrev}t#{$infix}-#{$size} {
+                        #{$prop}-top: $length;
+                    }
+
+                    .#{$abbrev}r#{$infix}-#{$size} {
+                        #{$prop}-right: $length;
+                    }
+
+                    .#{$abbrev}b#{$infix}-#{$size} {
+                        #{$prop}-bottom: $length;
+                    }
+
+                    .#{$abbrev}l#{$infix}-#{$size} {
+                        #{$prop}-left: $length;
+                    }
+
+                    .#{$abbrev}t#{$infix}-#{$size}--force {
+                        #{$prop}-top: $length !important;
+                    }
+
+                    .#{$abbrev}r#{$infix}-#{$size}--force {
+                        #{$prop}-right: $length !important;
+                    }
+
+                    .#{$abbrev}b#{$infix}-#{$size}--force {
+                        #{$prop}-bottom: $length !important;
+                    }
+
+                    .#{$abbrev}l#{$infix}-#{$size}--force {
+                        #{$prop}-left: $length !important;
+                    }
+                }
+
+                // Some special margin utils for flex alignments
+                .m#{$infix}-auto {
+                    margin: auto;
+                }
+
+                .mt#{$infix}-auto {
+                    margin-top: auto;
+                }
+
+                .mr#{$infix}-auto {
+                    margin-right: auto;
+                }
+
+                .mb#{$infix}-auto {
+                    margin-bottom: auto;
+                }
+
+                .ml#{$infix}-auto {
+                    margin-left: auto;
+                }
+
+                .mx#{$infix}-auto {
+                    margin-right: auto;
+                    margin-left: auto;
+                }
+
+                .my#{$infix}-auto {
+                    margin-top: auto;
+                    margin-bottom: auto;
+                }
+
+                .m#{$infix}-auto--force {
+                    margin: auto !important;
+                }
+
+                .mt#{$infix}-auto--force {
+                    margin-top: auto !important;
+                }
+
+                .mr#{$infix}-auto--force {
+                    margin-right: auto !important;
+                }
+
+                .mb#{$infix}-auto--force {
+                    margin-bottom: auto !important;
+                }
+
+                .ml#{$infix}-auto--force {
+                    margin-left: auto !important;
+                }
+
+                .mx#{$infix}-auto--force {
+                    margin-right: auto !important;
+                    margin-left: auto !important;
+                }
+
+                .my#{$infix}-auto--force {
+                    margin-top: auto !important;
+                    margin-bottom: auto !important;
+                }
+            }
+
+            @if ($prop ==padding) {
+                @for $index from 0 through 16 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
+
+                    .#{$abbrev}#{$infix}-#{$size} {
+                        #{$prop}: $length;
+                    }
+
+                    .#{$abbrev}#{$infix}-#{$size}--force {
+                        #{$prop}: $length !important;
+                    }
+                }
+
+                @for $index from 0 through 16 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
+
+                    .#{$abbrev}x#{$infix}-#{$size} {
+                        #{$prop}-right: $length;
+                        #{$prop}-left: $length;
+                    }
+
+                    .#{$abbrev}y#{$infix}-#{$size} {
+                        #{$prop}-top: $length;
+                        #{$prop}-bottom: $length;
+                    }
+
+                    .#{$abbrev}x#{$infix}-#{$size}--force {
+                        #{$prop}-right: $length !important;
+                        #{$prop}-left: $length !important;
+                    }
+
+                    .#{$abbrev}y#{$infix}-#{$size}--force {
+                        #{$prop}-top: $length !important;
+                        #{$prop}-bottom: $length !important;
+                    }
+                }
+
+                @for $index from 0 through 16 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
+
+                    .#{$abbrev}t#{$infix}-#{$size} {
+                        #{$prop}-top: $length;
+                    }
+
+                    .#{$abbrev}r#{$infix}-#{$size} {
+                        #{$prop}-right: $length;
+                    }
+
+                    .#{$abbrev}b#{$infix}-#{$size} {
+                        #{$prop}-bottom: $length;
+                    }
+
+                    .#{$abbrev}l#{$infix}-#{$size} {
+                        #{$prop}-left: $length;
+                    }
+
+                    .#{$abbrev}t#{$infix}-#{$size}--force {
+                        #{$prop}-top: $length !important;
+                    }
+
+                    .#{$abbrev}r#{$infix}-#{$size}--force {
+                        #{$prop}-right: $length !important;
+                    }
+
+                    .#{$abbrev}b#{$infix}-#{$size}--force {
+                        #{$prop}-bottom: $length !important;
+                    }
+
+                    .#{$abbrev}l#{$infix}-#{$size}--force {
+                        #{$prop}-left: $length !important;
+                    }
+                }
+            }
+        }
+    }
+}

package/abstracts/_typography.scss

@@ -0,0 +1,124 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Typography mixins
+// -------------------------------------------------------------------------------------------------------------------
+// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
+// the individual properties if a value that isn't allowed in the shorthand is passed in.
+@mixin matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
+    // If any of the values are set to `inherit`, we can't use the shorthand
+    // so we fall back to passing in the individual properties.
+    @if (
+        $font-size
+            ==inherit or
+            $font-weight
+            ==inherit or
+            $line-height
+            ==inherit or
+            $font-family
+            ==inherit or
+            $font-size
+            ==null or
+            $font-weight
+            ==null or
+            $line-height
+            ==null or
+            $font-family
+            ==null
+    ) {
+        font-size: $font-size;
+        font-weight: $font-weight;
+        line-height: $line-height;
+        font-family: $font-family;
+    } @else {
+        // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
+        // that we need to use interpolation for `font-size/line-height` in order to prevent
+        // Sass from dividing the two values.
+        font: $font-weight #{$font-size}/#{$line-height} $font-family;
+    }
+}
+
+// Converts a typography level into CSS styles.
+@mixin matcha-typography-level-to-styles($config, $level) {
+    $font-size: matcha-font-size($config, $level);
+    $font-weight: matcha-font-weight($config, $level);
+    $line-height: matcha-line-height($config, $level);
+    $font-family: matcha-font-family($config, $level);
+
+    @include matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
+    letter-spacing: matcha-letter-spacing($config, $level);
+}
+
+// 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.
+
+// h1 40px headline - bold
+// h2 32px title - medium
+// h3 24px subheading - bold
+// h4 20px subheading - bold
+
+// h5-5 18px '' - bold
+// h6 18px '' - bold
+// h7 18px '' - bold
+// h8 12px '' - bold
+
+// m 16px body - regular
+// p 14px body - regular
+// small 12px caption - regular
+@mixin matcha-reset-typography($config) {
+    // Headings
+    .h1,
+    h1 {
+        font-size: px-to-rem(40px);
+        font-family: matcha-font-family($config, title);
+        font-weight: matcha-font-weight($config, title);
+    }
+
+    .h2,
+    h2 {
+        font-size: px-to-rem(32px);
+        font-family: matcha-font-family($config, body-2);
+        font-weight: matcha-font-weight($config, body-2);
+    }
+
+    .h3,
+    h3 {
+        font-size: px-to-rem(24px);
+        font-family: matcha-font-family($config, title);
+        font-weight: matcha-font-weight($config, title);
+    }
+
+    .h4,
+    h4 {
+        font-size: px-to-rem(20px);
+        font-family: matcha-font-family($config, title);
+        font-weight: matcha-font-weight($config, title);
+    }
+
+    .h5,
+    h5 {
+        font-size: px-to-rem(16px);
+        font-family: matcha-font-family($config, title);
+        font-weight: matcha-font-weight($config, title);
+    }
+
+    .h6,
+    h6 {
+        font-size: px-to-rem(12px);
+        font-family: matcha-font-family($config, subheading-2);
+        font-weight: matcha-font-weight($config, subheading-2);
+    }
+
+    .text-bold,
+    strong,
+    b {
+        font-family: matcha-font-family($config, title);
+        font-weight: matcha-font-weight($config, title);
+    }
+    & {
+        font-family: matcha-font-family($config, body-1);
+    }
+    button{
+        font-family: matcha-font-family($config, title);
+    }
+}