Merge pull request #4 from IgniteUI/didimmova/typography-presets

refactor(typography): add presets and update docs

package.json

@@ -4,9 +4,11 @@
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {
+    "build:docs": "npx sassdoc ./sass",
     "build:e2e": "sass ./test/e2e/theme.scss ./test/e2e/theme.css",
+    "lint": "stylelint ./sass",
     "test": "jest",
-    "lint": "stylelint ./sass"
+    "serve:docs": "npx http-server ./sassdoc"
   },
   "repository": {
     "type": "git",

sass/typography/_functions.scss

@@ -5,6 +5,10 @@
 @use 'sass:string';
 @use './types';
 
+////
+/// @group Typography
+////
+
 /// Converts pixels to relative values (em).
 /// @access public
 /// @param {number|string} $pixels - The pixel value to be converted.

sass/typography/_index.scss

@@ -1,2 +1,3 @@
 @forward 'functions';
 @forward 'mixins';
+@forward 'types';

sass/typography/_mixins.scss

@@ -4,6 +4,10 @@
 @use '../utils/meta' as *;
 @use './types';
 
+////
+/// @group Typography
+////
+
 /// Includes all category related styles into the current style block.
 /// @param {String} $category - The type scale category.
 /// @example scss Add the `h1` styles to custom CSS selector.
@@ -37,6 +41,10 @@
     }
 }
 
+/// Styles all native elements that match the IElementCategories map.
+/// @requires type-style
+/// @requires $ITypeScale
+/// @requires $IElementCategories
 @mixin type-style-elements() {
     @each $category in types.$ITypeScale {
         // Get the native element that uses typographic styles directly
@@ -52,6 +60,9 @@
     }
 }
 
+/// Creates CSS classes with style rules for all categories in the ITypeScale map.
+/// @requires type-style
+/// @requires $ITypeScale
 @mixin type-style-classes() {
     @each $category in types.$ITypeScale {
         // Add class selector typographic styles.
@@ -61,6 +72,14 @@
     }
 }
 
+/// Adds typography styles for h1-h6, paragraph and creates custom typography class selectors.
+/// The produced styles are based on the passed typeface and type scale.
+/// @access public
+/// @param {String} $font-family - The font family to be used across all typographic elements.
+/// @param {Map} $type-scale - A type scale map as produced by the type-scale function.
+/// @requires type-style-vars
+/// @requires type-style-classes
+/// @requires type-style-elements
 @mixin typography($font-family, $type-scale) {
     $scope: if(is-root(), ':root', '&');
 

sass/typography/presets/_bootstrap.scss

@@ -0,0 +1,124 @@
+@use '../index' as *;
+
+////
+/// @group Typography
+////
+
+$scale: (
+    h1: type-style(
+        $font-size: rem(40px),
+        $font-weight: 500,
+        $line-height: rem(48px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: rem(8px)
+    ),
+    h2: type-style(
+        $font-size: rem(32px),
+        $font-weight: 500,
+        $line-height: rem(38.4px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: rem(8px)
+    ),
+    h3: type-style(
+        $font-size: rem(28px),
+        $font-weight: 500,
+        $line-height: rem(33.6px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: rem(8px)
+    ),
+    h4: type-style(
+        $font-size: rem(24px),
+        $font-weight: 500,
+        $line-height: rem(28.8px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: rem(8px)
+    ),
+    h5: type-style(
+        $font-size: rem(20px),
+        $font-weight: 500,
+        $line-height: rem(24px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: rem(8px)
+    ),
+    h6: type-style(
+        $font-size: rem(16px),
+        $font-weight: 500,
+        $line-height: rem(19.2px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: rem(8px)
+    ),
+    body-1: type-style(
+        $font-size: rem(16px),
+        $font-weight: 400,
+        $line-height: rem(24px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    body-2: type-style(
+        $font-size: rem(14.4px),
+        $font-weight: 400,
+        $line-height: rem(24px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    subtitle-1: type-style(
+        $font-size: rem(14px),
+        $font-weight: 400,
+        $line-height: rem(24px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    subtitle-2: type-style(
+        $font-size: rem(14.4px),
+        $font-weight: 400,
+        $line-height: rem(21.6px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    button: type-style(
+        $font-size: rem(16px),
+        $font-weight: 500,
+        $line-height: rem(24px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    caption: type-style(
+        $font-size: rem(12px),
+        $font-weight: 400,
+        $letter-spacing: rem(.4px),
+        $line-height: rem(16px),
+        $text-transform: none
+    ),
+    overline: type-style(
+        $font-size: rem(10px),
+        $font-weight: 400,
+        $letter-spacing: rem(1.5px),
+        $line-height: rem(16px),
+        $text-transform: uppercase
+    ),
+);
+$bootstrap_weekday: type-style(
+    $font-size: rem(13px),
+    $font-weight: 400,
+    $line-height: normal,
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$bootstrap_type-scale: utils.extend(
+    $scale,
+    (
+        calendar-labels: $bootstrap_weekday,
+    )
+);

sass/typography/presets/_fluent.scss

@@ -0,0 +1,103 @@
+@use '../index' as *;
+
+////
+/// @group Typography
+////
+
+$scale: (
+    h1: type-style(
+        $font-size: rem(68px),
+        $font-weight: 700,
+        $line-height: rem(76px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    h2: type-style(
+        $font-size: rem(42px),
+        $font-weight: 700,
+        $line-height: rem(52px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    h3: type-style(
+        $font-size: rem(32px),
+        $font-weight: 600,
+        $line-height: rem(40px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    h4: type-style(
+        $font-size: rem(28px),
+        $font-weight: 400,
+        $line-height: rem(36px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    h5: type-style(
+        $font-size: rem(24px),
+        $font-weight: 400,
+        $line-height: rem(32px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    h6: type-style(
+        $font-size: rem(20px),
+        $font-weight: 400,
+        $line-height: rem(28px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    body-1: type-style(
+        $font-size: rem(16px),
+        $font-weight: 400,
+        $line-height: rem(22px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    body-2: type-style(
+        $font-size: rem(14px),
+        $font-weight: 400,
+        $line-height: rem(20px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    subtitle-1: type-style(
+        $font-size: rem(18px),
+        $font-weight: 400,
+        $line-height: rem(24px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    subtitle-2: type-style(
+        $font-size: rem(14px),
+        $font-weight: 600,
+        $line-height: rem(20px),
+        $text-transform: none,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    button: type-style(
+        $font-size: rem(14px),
+        $font-weight: 400,
+        $line-height: rem(14px),
+        $text-transform: capitalize,
+        $margin-top: 0,
+        $margin-bottom: 0
+    ),
+    overline: type-style(
+        $font-size: rem(10px),
+        $font-weight: 400,
+        $line-height: rem(14px),
+        $margin-top: 0,
+        $margin-bottom: 0
+    )
+);