matcha-theme 1.0.25 → 18.0.27

package/abstracts/_sizes.scss

@@ -1,166 +0,0 @@
-// -----------------------------------------------------------------------------------------------------
-// @ Size helpers
-// -----------------------------------------------------------------------------------------------------
-@each $prop, $abbrev in (height: h, width: w) {
-    // pixels - Without breakpoint infix
-    @for $index from 0 through 64 {
-        $size: $index * 4;
-        $length: #{$size}px;
-
-        .#{$abbrev}-#{$size} {
-            #{$prop}: $length;
-        }
-
-        .max-#{$abbrev}-#{$size} {
-            max-#{$prop}: $length;
-        }
-
-        .min-#{$abbrev}-#{$size} {
-            min-#{$prop}: $length;
-        }
-
-        .#{$abbrev}-#{$size}--force {
-            #{$prop}: $length !important;
-        }
-
-        .max-#{$abbrev}-#{$size}--force {
-            max-#{$prop}: $length !important;
-        }
-
-        .min-#{$abbrev}-#{$size}--force {
-            min-#{$prop}: $length !important;
-        }
-    }
-
-    // percentage - Without breakpoint infix
-    @for $i from 0 through 20 {
-        $i-p: 5 * $i;
-        $size-p: 5% * $i;
-
-        .#{$abbrev}-#{$i-p}-p {
-            #{$prop}: $size-p !important;
-        }
-
-        .max-#{$abbrev}-#{$i-p}-p {
-            max-#{$prop}: $size-p !important;
-        }
-
-        .min-#{$abbrev}-#{$i-p}-p {
-            min-#{$prop}: $size-p !important;
-        }
-    }
-
-    // big sizes - Without breakpoint infix
-    @for $i from 3 through 8 {
-        $size: $i * 100;
-        $length: #{$size}px;
-
-        .#{$abbrev}-#{$size} {
-            #{$prop}: $length !important;
-        }
-
-        .max-#{$abbrev}-#{$size} {
-            max-#{$prop}: $length !important;
-        }
-
-        .min-#{$abbrev}-#{$size} {
-            min-#{$prop}: $length !important;
-        }
-    }
-
-    // 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;
-
-                .#{$abbrev}#{$infix}-#{$size} {
-                    #{$prop}: $length;
-                }
-
-                .max-#{$abbrev}#{$infix}-#{$size} {
-                    max-#{$prop}: $length;
-                }
-
-                .min-#{$abbrev}#{$infix}-#{$size} {
-                    min-#{$prop}: $length;
-                }
-
-                .#{$abbrev}#{$infix}-#{$size}--force {
-                    #{$prop}: $length !important;
-                }
-
-                .max-#{$abbrev}#{$infix}-#{$size}--force {
-                    max-#{$prop}: $length !important;
-                }
-
-                .min-#{$abbrev}#{$infix}-#{$size}--force {
-                    min-#{$prop}: $length !important;
-                }
-            }
-
-            // percentage - With breakpoint infix
-            @for $i from 0 through 20 {
-                $i-p: 5 * $i;
-                $size-p: 5% * $i;
-
-                .#{$abbrev}#{$infix}-#{$i-p}-p {
-                    #{$prop}: $size-p !important;
-                }
-
-                .max-#{$abbrev}#{$infix}-#{$i-p}-p {
-                    max-#{$prop}: $size-p !important;
-                }
-
-                .min-#{$abbrev}#{$infix}-#{$i-p}-p {
-                    min-#{$prop}: $size-p !important;
-                }
-            }
-
-            // big sizes - With breakpoint infix
-            @for $i from 3 through 8 {
-                $size: $i * 100;
-                $length: #{$size}px;
-
-                .#{$abbrev}#{$infix}-#{$size} {
-                    #{$prop}: $length !important;
-                }
-
-                .max-#{$abbrev}#{$infix}-#{$size} {
-                    max-#{$prop}: $length !important;
-                }
-
-                .min-#{$abbrev}#{$infix}-#{$size} {
-                    min-#{$prop}: $length !important;
-                }
-            }
-
-            // auto - With breakpoint infix
-            .#{$abbrev}#{$infix}-auto {
-                #{$prop}: auto !important;
-            }
-        }
-    }
-}
-.max-w-1920{
-    max-width: 1920px;
-}
-.max-w-1440{
-    max-width: 1440px;
-}
-.max-w-1024{
-    max-width: 1024px;
-}
-.max-w-600{
-    max-width: 600px;
-}

package/abstracts/_spacings.scss

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

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