@inchurch/matcha-theme 21.4.0 → 22.1.0

package/abstracts/_typography.scss

@@ -1,128 +1,128 @@
-@use "functions" as *;
-// -------------------------------------------------------------------------------------------------------------------
-// @ 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 — aligned with Figma matcha/text/* styles
-    .h1,
-    h1 {
-        @include matcha-typography-level-to-styles($config, display);
-    }
-
-    .h2,
-    h2 {
-        @include matcha-typography-level-to-styles($config, headline);
-    }
-
-    .h3,
-    h3 {
-        @include matcha-typography-level-to-styles($config, title-lg);
-    }
-
-    .h4,
-    h4 {
-        @include matcha-typography-level-to-styles($config, title-md);
-    }
-
-    .h5,
-    h5 {
-        @include matcha-typography-level-to-styles($config, title-sm);
-    }
-
-    .h6,
-    h6 {
-        @include matcha-typography-level-to-styles($config, label-sm);
-    }
-
-    .text-bold,
-    strong,
-    b {
-        font-weight: matcha-font-weight($config, title-lg);
-    }
-
-    & {
-        font-family: matcha-font-family($config, body-md);
-    }
-
-    button {
-        font-family: matcha-font-family($config, button-md);
-        font-weight: matcha-font-weight($config, button-md);
-    }
-
-    input[type="text"],
-    input[type="email"],
-    input[type="tel"],
-    input[type="url"],
-    input[type="password"],
-    input[type="number"],
-    input[type="search"],
-    textarea {
-        font-family: matcha-font-family($config, body-md);
-        font-weight: matcha-font-weight($config, body-md);
-        font-size: px-to-rem(16px);
-    }
-}
+@use "functions" as *;
+// -------------------------------------------------------------------------------------------------------------------
+// @ 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 — aligned with Figma matcha/text/* styles
+    .h1,
+    h1 {
+        @include matcha-typography-level-to-styles($config, display);
+    }
+
+    .h2,
+    h2 {
+        @include matcha-typography-level-to-styles($config, headline);
+    }
+
+    .h3,
+    h3 {
+        @include matcha-typography-level-to-styles($config, title-lg);
+    }
+
+    .h4,
+    h4 {
+        @include matcha-typography-level-to-styles($config, title-md);
+    }
+
+    .h5,
+    h5 {
+        @include matcha-typography-level-to-styles($config, title-sm);
+    }
+
+    .h6,
+    h6 {
+        @include matcha-typography-level-to-styles($config, label-sm);
+    }
+
+    .text-bold,
+    strong,
+    b {
+        font-weight: matcha-font-weight($config, title-lg);
+    }
+
+    & {
+        font-family: matcha-font-family($config, body-md);
+    }
+
+    button {
+        font-family: matcha-font-family($config, button-md);
+        font-weight: matcha-font-weight($config, button-md);
+    }
+
+    input[type="text"],
+    input[type="email"],
+    input[type="tel"],
+    input[type="url"],
+    input[type="password"],
+    input[type="number"],
+    input[type="search"],
+    textarea {
+        font-family: matcha-font-family($config, body-md);
+        font-weight: matcha-font-weight($config, body-md);
+        font-size: px-to-rem(16px);
+    }
+}