matcha-theme 1.0.1

package/abstracts/_spacings.scss

@@ -0,0 +1,236 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Spacing - Margin and Padding
+// Generate spacing values from -64 to 64 jumping from 4 to 4
+// -----------------------------------------------------------------------------------------------------
+@each $breakpoint,
+$materialBreakpoint in $helper-breakpoints {
+    @include media-breakpoint($materialBreakpoint) {
+        $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+
+        @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;
+                    }
+                }
+
+                @for $index from -16 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 -16 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;
+                    }
+                }
+            }
+
+            @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;
+                    }
+                }
+            }
+
+            @if ($abbrev ==m) {
+
+                // 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;
+                }
+            }
+        }
+    }
+}

package/abstracts/_typography.scss

@@ -0,0 +1,137 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ 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: 40px;
+
+        font: {
+            family: matcha-font-family($config, button);
+        }
+    }
+
+    .h2,
+    h2 {
+        font-size: 32px;
+
+        font: {
+            family: matcha-font-family($config, button);
+        }
+    }
+
+    .h3,
+    h3 {
+        font-size: 24px;
+
+        font: {
+            family: matcha-font-family($config, button);
+        }
+    }
+
+    .h4,
+    h4 {
+        font-size: 20px;
+
+        font: {
+            family: matcha-font-family($config, button);
+        }
+    }
+
+    .h5,
+    h5 {
+        font-size: 16px;
+
+        font: {
+            family: matcha-font-family($config, button);
+        }
+    }
+
+    .h6,
+    h6 {
+        font-size: 14px;
+
+        font: {
+            family: matcha-font-family($config, button);
+        }
+    }
+
+    .h7 {
+        font-size: 12px;
+
+        font: {
+            family: matcha-font-family($config, button);
+        }
+    }
+
+    .h8 {
+        font-size: 12px;
+
+        font: {
+            family: matcha-font-family($config, button);
+        }
+
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+    }
+
+    .text-bold,
+    strong,
+    b {
+        font: {
+            family: matcha-font-family($config, button);
+        }
+    }
+}