Skip to content

Typography (Draft)

Jump to bottom
Silvia Ivanova edited this page Aug 4, 2022 · 3 revisions

Typography Functions

Type-style

The type-style function produces a type style map of values that adheres to the ITypeStyle map. It accepts various typography arguments like $font-family, $font-size, $font-weight, etc. and returns a map of all defined type style properties. The code snippet below is part of the $indigo-type-scale and demonstrates the usage of the function:

h1: type-style(
      $font-size: rem(96px),
      $font-weight: 200,
      $letter-spacing: rem(-1.5px),
      $line-height: rem(112px),
      $text-transform: none,
      $margin-top: 0,
      $margin-bottom: 0
)

Type-scale

The type-scale function produces a type scale map containing type styles that adheres to the ITypeScale list. The parameters that the function accepts are $theme, used only internally, and $args, which are all defined type categories.

Type-scale-category

The type-scale-category function is used for getting a config map for a selected category in the type scale. It takes two parameters: $scale - a map reference as produced by the type-scale function, and $category - the category for which will be the config map.

// Returns all typographic styles associated with the h1 category
$h1-type-scale: type-scale-category($type-scale, 'h1');

Em

The em function is used for converting pixels into relative values such as the em unit. To make use of the function users should simply pass a pixel value as the first argument and a $context if they want to use a different one instead of the default 16px. For instance:

// Returns 2,625em
$font-size: em(42px);

Rem

The rem function is used for converting pixels into root relative values rem. To make use of the function users should simply pass a pixel value as the first argument and a $context if they want to use a different one instead of the default 16px. For instance:

// Returns 2,625rem
$font-size: rem(42px);

Px

The px function is used for converting relative values (rem / em ) into pixels. To make use of the function users should simply pass a relative value as the first argument and a $context if they want to use a different one instead of the default 16px. For instance:

// Returns 16px
$font-size: px(1rem);

Typography Mixins

Type-style

The type-style mixin accepts a type category as a parameter and includes all category related styles into a style block. For instance, the following code will add all h1 styles to the custom-h1 class:

.custom-h1 {
   @include type-style('h1');
   color: red;
}

Type-style-vars

The type-style-vars mixin transforms a type style map into CSS font variables. It takes two parameters: $name - The custom CSS variable name; $type-style - A type style map reference as produced by type-style. The following example demonstrates how to assign the h1 styles to a custom CSS property:

$h1-style: type-scale-category($type-scale, 'h1');
@include type-style-vars('h1', $h1-style);

Type-style-classes

The type-style-classes mixin creates CSS classes with style rules for all categories in the ITypeScale map.

Type-style-elements

The type-style-elements styles all native elements that match the IElementCategories map.

Typography

The typography mixin adds typography styles for all categories and creates custom typography class selectors. The produced styles are based on the passed parameters for:

$font-family - The font family to be used across all typographic elements.

$type-scale - A type scale map as produced by the type-scale function.

Example:

// Includes typography variables based on Roboto typeface and Material type scale
@include typography('Roboto, sans-serif', $material-type-scale);

Typography Types

ITypeScale

The type system in Ignite UI Theming is a type scale consisting of 13 different category type styles, defined in the $ITypeScale list:

$ITypeScale: (
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    subtitle-1,
    subtitle-2,
    body-1,
    body-2,
    button,
    caption,
    overline
);

ITypeStyle

The $ITypeStyle map represents a set of styles, the same for all categories:

$ITypeStyle: (
    font-family: var(--ig-font-family),
    font-size: null,
    font-weight: normal,
    font-style: normal,
    line-height: normal,
    letter-spacing: normal,
    text-transform: none,
    margin-top: 0,
    margin-bottom: 0
);

IElementCategories

The $IElementCategories is a list of all category type styles that can be mapped to native elements:

$IElementCategories: (
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h4',
    h5: 'h5',
    h6: 'h6',
    body-1: 'p',
);

Users can modify all of the aforementioned lists, adding new categories or type styles as well as update the mapping to native elements.

Clone this wiki locally