typography

variableITypeScalepublicview codeopen_in_new

A list consisting of 13 different category type styles

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

variableITypeStylepublicview codeopen_in_new

A set of style rules for all categories

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

variableIElementCategoriespublicview codeopen_in_new

A list of all category type styles that can be maped to native elements

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

functionempublicview codeopen_in_new

Converts pixels to relative values (em).

Example

.my-component {
  margin: em(10px) em(5px);
}

// Output
.my-component {
  margin: 0.625em 0.3125em;
}

Parameters

Name	Type	Default	Description
$pixels*	Number \| String	-	The pixel value to be converted.
$context	Number \| String	$browser-context	The base context to convert against.

functionrempublicview codeopen_in_new

Converts pixels to root relative values (rem).

Example

.my-component {
  margin: rem(10px) rem(5px);
}

// Output
.my-component {
  margin: 0.625rem 0.3125rem;
}

Parameters

Name	Type	Default	Description
$pixels*	number\|string	-	The pixel value to be converted.
$context	number\|string	$browser-context	The base context to convert against.

functionpxpublicview codeopen_in_new

Converts relative value (em/rem) to pixel.

Example

.my-component {
  margin: px(3rem);
}

// Output
.my-component {
  margin: 48px;
}

Parameters

Name	Type	Default	Description
$num*	number\|string	-	The relative value to be converted.
$context	number\|string	$browser-context	The base context to convert against.

functiontype-stylepublicview codeopen_in_new

Produces a type style map of values that adheres to the ITypeStyle map.

Example

$main_navigation: type-style(
   $font-size: rem(14px),
   $font-weight: 600,
   $letter-spacing: rem(.1px),
   $line-height: rem(14px),
   $text-transform: none,
);

// Use the type-style() mixin to consume the new type style produced from the type-style() function.
.main-nav {
  @include type-style($main_navigation);
}

Parameters

Name	Type	Default	Description
$font-family	String	var(--ig-font-family)	The font family of the type style.
$font-size*	String	-	The font size of the type style.
$font-weight	Number \| String	normal	The font weight of the type style.
$font-style	String	normal	The font style of the type style.
$line-height	Number \| String	normal	The line height of the type style.
$letter-spacing	Number \| String	normal	The letter spacing of the type style.
$text-transform	String	none	The text-transform property of the type style.
$margin-top	Number	0	The margin-top property of the type style.
$margin-bottom	Number	0	The margin-bottom property of the type style.

Requires

variablesITypeStyle

functiontype-scalepublicview codeopen_in_new

Produces a type scale map containing type styles that adheres to the ITypeScale list.

Example

// First define type styles to use
$my-body-1: type-style(
   $font-size: rem(14px),
);

// Use the type style map to override one of the existing maps
$type-scale: type-scale(
  ...
  $body-1: $my-body-1,
  ...
);

Parameters

Name	Type	Default	Description
$h1*	Map	-	A map containing type style properties as produced by the type-style function.
$h2*	Map	-	A map containing type style properties as produced by the type-style function.
$h3*	Map	-	A map containing type style properties as produced by the type-style function.
$h4*	Map	-	A map containing type style properties as produced by the type-style function.
$h5*	Map	-	A map containing type style properties as produced by the type-style function.
$h6*	Map	-	A map containing type style properties as produced by the type-style function.
$subtitle-1*	Map	-	A map containing type style properties as produces by the type-style function.
$subtitle-2*	Map	-	A map containing type style properties as produces by the type-style function.
$body-1*	Map	-	A map containing type style properties as produces by the type-style function.
$body-2*	Map	-	A map containing type style properties as produces by the type-style function.
$button*	Map	-	A map containing type style properties as produces by the type-style function.
$caption*	Map	-	A map containing type style properties as produces by the type-style function.
$overline*	Map	-	A map containing type style properties as produces by the type-style function.
$_theme	String	null	The theme related to this type scale. Internal use only.

Requires

variablesITypeScale

functiontype-scale-categorypublicview codeopen_in_new

Get type scale category config.

Example

Get the type scale category config for the `h1` scale.

$h1-type-scale: type-scale-category($type-scale, 'h1');

Parameters

Name	Type	Default	Description
$scale*	Map	-	A type scale map reference as produces by type-scale.
$category*	String	-	The scale category you want config for. For instance - 'h1';

mixinbutton-typographypublicview codeopen_in_new

Adds typography styles for the igx-button component. Uses the 'button' category from the typographic scale.

Parameters

Name	Type	Default	Description
$categories	String	(text: 'button')	The category from the typographic scale used for type styles.

mixinicon-button-typographypublicview codeopen_in_new

Adds typography styles for the igx-icon-button component. Uses the 'button' category from the typographic scale.

Parameters

Name	Type	Default	Description
$categories	String	(text: 'button')	The category from the typographic scale used for type styles.

mixinlabel-typographypublicview codeopen_in_new

Adds typography styles for the igx-label component. Uses the 'caption' category from the typographic scale.

Parameters

Name	Type	Default	Description
$categories	Map	(label: 'caption')	The categories from the typographic scale used for type styles.

Adds typography styles for the igx-tooltip component. Uses custom typography.

Parameters

Name	Type	Default	Description
$categories	Map	(tooltip-text: null	The categories from the typographic scale used for type styles.

mixincategory-chart-typographypublicview codeopen_in_new

Adds typography styles for the category-chart component. Uses the 'h6', 'subtitle-1' and 'body-2' category from the typographic scale.

Parameters

Name	Type	Default	Description
$type-scale*	Map	-	A typographic scale as produced by type-scale.
$categories*	Map	-	The categories from the typographic scale used for type styles.

Requires

code_blockstype-style

mixindata-chart-typographypublicview codeopen_in_new

Adds typography styles for the data-chart component. Uses the 'h6' and 'subtitle-1' category from the typographic scale.

Parameters

Name	Type	Default	Description
$type-scale*	Map	-	A typographic scale as produced by type-scale.
$categories	Map	(title: 'h6', subtitle: 'subtitle-1')	The categories from the typographic scale used for type styles.

Requires

code_blockstype-style

mixinpie-chart-typographypublicview codeopen_in_new

Adds typography styles for the pie-chart component. Uses the 'body-2' category from the typographic scale.

Parameters

Name	Type	Default	Description
$type-scale*	Map	-	A typographic scale as produced by type-scale.
$categories	Map	(text: 'body-2')	The categories from the typographic scale used for type styles.

Requires

code_blockstype-style

mixinshape-chart-typographypublicview codeopen_in_new

Adds typography styles for the shape-chart component. Uses the 'h3', 'h4', 'h6', and 'subtitle-1' category from the typographic scale.

Parameters

Name	Type	Default	Description
$type-scale*	Map	-	A typographic scale as produced by igx-type-scale.
$categories*	Map	-	The categories from the typographic scale used for type styles.

Requires

code_blockstype-style

mixintype-stylepublicview codeopen_in_new

Includes all category related styles into the current style block.

Example

Add the `h1` styles to custom CSS selector.

.fancy-h1 {
   @include type-style('h1');

   color: mediumvioletred;
}

Parameters

Name	Type	Default	Description
$category*	String	-	The type scale category.
$check	String	true	Toggles category checks against ITypeScale. Set to false when using a custom type scale.

mixintype-style-varspublicview codeopen_in_new

Transforms a type style map into css font variables.

Example

Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.

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

Parameters

Name	Type	Default	Description
$name*	String	-	The custom CSS variable name.
$type-style*	Map	-	A type style map reference as produced by type-style.

mixintype-style-elementspublicview codeopen_in_new

Styles all native elements that match the IElementCategories map.

Example

Add type styles to all native elements.

.ig-typography {
  @include type-style-elements();
}

Parameters

Name	Type	Default	Description
$allow-exclusion	Boolean	false	When true, excludes `h1-h6` and `p` styles from elements `[data-no-typography]` (or nested inside one).

Requires

mixintype-style-classespublicview codeopen_in_new

Creates CSS classes with style rules for all categories in the ITypeScale map.

Example

Create CSS classes for all type styles.

.ig-typography {
  @include type-style-classes();
}

Requires

mixinfont-varpublicview codeopen_in_new

Transforms a type style map into a font style rule assigned to a css variable.

Example

Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.

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

Parameters

Name	Type	Default	Description
$name*	String	-	The custom CSS variable name.
$type-style*	Map	-	A type style map reference as produces by type-style.
$prefix	String	null	Optional prefix.

mixintypographypublicview codeopen_in_new

Adds typography styles for h1-h6, paragraph and creates custom typography class selectors. The produces styles are based on the passed typeface and type scale. If omitted the $material-typeface and $material-type-scale will be used.

Example

Using a font-family list

@include typography(("Open Sans", Helvetica, sans-serif), $my-type-scale);

Example

Using a quoted string (backward compatible)

@include typography("'Comic Sans MS', sans-serif", $my-type-scale);

Example

Using a CSS variable reference

@include typography(var(--my-custom-font), $my-type-scale);

Parameters

Name	Type	Default	Description
$font-family*	String \| List	-	The font family to be used across all typographic elements.
$type-scale*	Map	-	A type scale map as produced by type-scale.
$allow-exclusion	Boolean	false	When true, excludes `h1-h6` and `p` styles from elements `[data-no-typography]` (or nested inside one).

Requires

mixintypographypublicview codeopen_in_new

Parameters

Name	Type	Default	Description
$font-family	String	$material-typeface	The font family to be used across all typographic elements.
$type-scale	Map	$material-type-scale	A type scale map as produced by type-scale.
$exclude	Map	null	A list of typography styles to be excluded.

mixincharts-typographypublicview codeopen_in_new

Includes all chart related typography styles for a given type-scale and target.

Parameters

Name	Type	Default	Description
$type-scale*	Map	-	The type-scale to be used when including typography styles.

Ask our engineers directly

typography

Parameters

Parameters

Parameters

Parameters

Requires

Parameters

Requires

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Parameters

Parameters

Requires

Requires

Parameters

Parameters

Requires

Parameters

Parameters