matcha-theme 1.0.1 → 1.0.3

package/abstracts/_functions.scss

@@ -14,21 +14,26 @@
 // @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),
+    $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),
-        ));
+            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),
-            ));
+    @each $hue, $color in $base-palette {
+        $result: map_merge(
+            $result,
+            (
+                "#{$hue}-contrast": map-contrast($base-palette, $hue)
+            )
+        );
     }
 
     @return $result;
@@ -43,10 +48,9 @@
 //     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 {
+    @if type-of($hue) ==number and $hue >=0 and $hue <=1 {
         @return map-color($palette, default, $hue);
     }
 
@@ -64,65 +68,78 @@
 
 // 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,
+    @return (
+        primary: $primary,
         accent: $accent,
         warn: $warn,
         is-dark: false,
         foreground: $light-theme-foreground-palette,
-        background: $light-theme-background-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,
+    @return (
+        primary: $primary,
         accent: $accent,
         warn: $warn,
         is-dark: true,
         foreground: $dark-theme-foreground-palette,
-        background: $dark-theme-background-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,
+    @return (
+        primary: $primary,
         accent: $accent,
         warn: $warn,
         is-dark: false,
         foreground: $custom-light-fg,
-        background: $custom-light-bg );
+        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,
+    @return (
+        primary: $primary,
         accent: $accent,
         warn: $warn,
         is-dark: true,
         foreground: $custom-dark-fg,
-        background: $custom-dark-bg );
+        background: $custom-dark-bg
+    );
 }
 
 // -------------------------------------------------------------------------------------------------------------------
 // @ Typography functions
 // --------------------------------------------------------------------------------------------------------------------
 // Represents a typography level from the Material design spec.
-@function matcha-typography-level($font-size,
+@function matcha-typography-level(
+    $font-size,
     $line-height: $font-size,
     $font-weight: 400,
     $font-family: null,
-    $letter-spacing: null) {
-    @return (font-size: $font-size,
+    $letter-spacing: null
+) {
+    @return (
+        font-size: $font-size,
         line-height: $line-height,
         font-weight: $font-weight,
         font-family: $font-family,
-        letter-spacing: $letter-spacing );
+        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-Regular", "Helvetica Neue", "Arial", sans-serif, "angular";',
+@function matcha-typography-config(
+    $font-family: '"CircularStd-Regular", "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),
@@ -135,10 +152,12 @@
     $body-1: matcha-typography-level(14px, 20px, 400),
     $caption: matcha-typography-level(12px, 20px, 400),
     $button: matcha-typography-level(14px, 14px, 500),
-    $input: matcha-typography-level(inherit, 1.125, 400)) {
+    $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,
+    $config: (
+        display-4: $display-4,
         display-3: $display-3,
         display-2: $display-2,
         display-1: $display-1,
@@ -150,27 +169,35 @@
         body-1: $body-1,
         caption: $caption,
         button: $button,
-        input: $input,
+        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,
-                ));
+    @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,
-        ));
+    @return map-merge(
+        $config,
+        (
+            font-family: $font-family
+        )
+    );
 }
 
 // Utility for fetching a nested value from a typography config.
@@ -207,7 +234,7 @@
     }
 
     // Guard against unquoting non-string values, because it's deprecated.
-    @return if(type-of($font-family)==string, unquote($font-family), $font-family);
+    @return if(type-of($font-family) ==string, unquote($font-family), $font-family);
 }
 
 // -------------------------------------------------------------------------------------------------------------------
@@ -216,9 +243,10 @@
 // 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);
+    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
 
-    @return (0: "0px 0px 0px 0px #{$shadow-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}",
@@ -247,9 +275,10 @@
 }
 
 @function _get-penumbra-map($color, $opacity) {
-    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $color);
+    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
 
-    @return (0: "0px 0px 0px 0px #{$shadow-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}",
@@ -278,9 +307,10 @@
 }
 
 @function _get-ambient-map($color, $opacity) {
-    $shadow-color: if(type-of($color)==color, rgba($color, $opacity * 0.033), $color);
+    $shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.033), $color);
 
-    @return (0: "0px 0px 0px 0px #{$shadow-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}",
@@ -315,7 +345,24 @@
 // .foo {
 //   transition: elevation-transition-property-value(), opacity 100ms ease;
 // }
-@function elevation-transition-property-value($duration: $elevation-transition-duration,
-    $easing: $elevation-transition-timing-function) {
+@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) {
+    @return ($value-in-px / $base-font-size) * 1rem;
+}
+
+// Example of use of the function:
+// .example {
+//   font-size: px-to-rem(24px); // Converte 24px para rem.
+//   margin: px-to-rem(16px);    // Converte 16px para rem.
+//   padding: px-to-rem(8px);    // Converte 8px para rem.
+// }

package/abstracts/_grid.scss

@@ -2,9 +2,7 @@
 // @ Display grids generator
 // -------------------------------------------------------------------------------------------------------------------
 @mixin display-grid($grid-prefix, $grid-length, $grid-sizes, $helper-breakpoints) {
-
-    @each $sizeLabel,
-    $value in $grid-sizes {
+    @each $sizeLabel, $value in $grid-sizes {
         .row-#{$sizeLabel} {
             display: flex;
             flex-direction: column;
@@ -12,11 +10,11 @@
 
         @media only screen and (min-width: #{$value}) {
             @for $i from 1 through $grid-length {
-                .row>.#{$grid-prefix}-#{$sizeLabel}-#{$i} {
+                .row > .#{$grid-prefix}-#{$sizeLabel}-#{$i} {
                     flex-basis: $i / $grid-length * 100%;
                 }
 
-                .row>.#{$grid-prefix}-offset-#{$sizeLabel}-#{$i} {
+                .row > .#{$grid-prefix}-offset-#{$sizeLabel}-#{$i} {
                     margin-left: $i / $grid-length * 100%;
                 }
             }
@@ -41,8 +39,7 @@
         }
     }
 
-    @each $breakpoint,
-    $materialBreakpoint in $helper-breakpoints {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
 
@@ -72,16 +69,15 @@
 // @ Display flex generator
 // -------------------------------------------------------------------------------------------------------------------
 @mixin display-flex($grid-prefix, $grid-length, $grid-sizes) {
-
     .row {
         display: flex;
         flex-wrap: wrap;
 
-        >div[class*="#{$grid-prefix}-"] {
+        > div[class*="#{$grid-prefix}-"] {
             box-sizing: border-box;
         }
 
-        >div:not([class*="#{$grid-prefix}-"]) {
+        > div:not([class*="#{$grid-prefix}-"]) {
             flex: 1;
         }
 
@@ -94,8 +90,7 @@
                 margin-left: $i / $grid-length * 100%;
             }
 
-            @each $sizeLabel,
-            $value in $grid-sizes {
+            @each $sizeLabel, $value in $grid-sizes {
                 [class*="#{$grid-prefix}-offset-#{$sizeLabel}-"] {
                     margin-left: 0;
                 }
@@ -106,19 +101,22 @@
             }
         }
 
-        @each $classLabel,
-        $cssValue in (align-start flex-start, align-center center, align-end flex-end) {
-            >div[class*="#{$grid-prefix}-"].#{$classLabel} {
+        @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) {
+            $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;
             }

package/abstracts/_sizes.scss

@@ -1,8 +1,8 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Size helpers
 // -----------------------------------------------------------------------------------------------------
-@each $prop,
-$abbrev in (height: h, width: w) {
+@each $prop, $abbrev in (height: h, width: w) {
+    // pixels - Without breakpoint infix
     @for $index from 0 through 64 {
         $size: $index * 4;
         $length: #{$size}px;
@@ -30,45 +30,125 @@ $abbrev in (height: h, width: w) {
         .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;
+        }
 
-        @each $name,
-        $value in $grid-sizes {
-            @media only screen and (min-width: #{$value}) {
-                .#{$abbrev}-#{$name}-#{$size} {
+        .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}-#{$name}-#{$size} {
+                .max-#{$abbrev}#{$infix}-#{$size} {
                     max-#{$prop}: $length;
                 }
 
-                .min-#{$abbrev}-#{$name}-#{$size} {
+                .min-#{$abbrev}#{$infix}-#{$size} {
                     min-#{$prop}: $length;
                 }
 
-                .#{$abbrev}-#{$name}-#{$size}--force {
+                .#{$abbrev}#{$infix}-#{$size}--force {
                     #{$prop}: $length !important;
                 }
 
-                .max-#{$abbrev}-#{$name}-#{$size}--force {
+                .max-#{$abbrev}#{$infix}-#{$size}--force {
                     max-#{$prop}: $length !important;
                 }
 
-                .min-#{$abbrev}-#{$name}-#{$size}--force {
+                .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;
+                }
             }
-        }
-    }
 
-    // Percentage
-    @for $i from 0 through 20 {
-        $i-p: 5 * $i;
-        $size-p: 5% * $i;
+            // big sizes - With breakpoint infix
+            @for $i from 3 through 8 {
+                $size: $i * 100;
+                $length: #{$size}px;
 
-        .#{$abbrev}-#{$i-p}-p {
-            #{$prop}: $size-p !important;
+                .#{$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;
+            }
         }
     }
 }