Chirp Sass Documentation

Typography Legacy

Installation

  yarn add @chewy/kib-css-helpers

Import

  @use '~@chewy/kib-css-helpers/src/kib-typography/styles' as kib-typography;

Functions

@function get-type-style($name, $alternate) { ... }@function get-type-style($name, $alternate) { 
  // Choose typography styles map
  $styles: if($alternate, settings.$type-styles-alternate, settings.$type-styles);

  // Find style name directly on map
  $type-style: map.get($styles, $name);

  // Return if found
  @if $type-style {
    @return $type-style;
  }

  // If not found, loop through map and see if any aliases match the name
  @else {
    @each $name-key, $type-style-map in $styles {
      $alias: map.get($type-style-map, 'alias');

      @if $name == $alias {
        @return get-map-by-key-safe($styles, $name-key, 'type style');
      }
    }

    @error ("The type style "#{$name}" does not exist.");
  }
 }

Description

Get a defined type style definition.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The name of the defined type style.	`String`	— none
`$alternate`	Enable alternate style.	`Boolean`	— none

Returns

Map —

Return a map containing a style definition.

Requires

[function] get
[function] get-map-by-key-safe
[variable] type-styles-alternate
[variable] type-styles

@function get-type-style-property($name, $property) { ... }@function get-type-style-property($name, $property) { 
  $style: get-type-style($name);
  $value: get-map-by-key-safe($style, $property);

  @if $name == 'tracking' {
    @return $value * 0.01em;
  }

  @if math.unit($value) == 'px' {
    @return unit.rem($value);
  }

  @return $value;
 }

Description

Get a defined type style property definition.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The name of the defined type style.	`String`	— none
`$property`	The name of the type style property.	`String`	— none

Returns

List or String or Number —

Return the value of the type styoe property.

Requires

[function] get-type-style
[function] get-map-by-key-safe
[function] rem

@function get-font-family($name) { ... }@function get-font-family($name) { 
  @return get-map-by-key-safe(settings.$type-families, $name, 'font family');
 }

Description

Get a defined font family stack.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The name of the defined type style.	`String`	— none

Returns

List or String —

Return a list or string with the font family stack.

Requires

[function] get-map-by-key-safe
[variable] type-families

@function get-type-size($name) { ... }@function get-type-size($name) { 
  $size: get-map-by-key-safe(settings.$type-sizes, $name, 'type size');

  @return unit.rem($size);
 }

Description

Get a defined type size.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The name of the defined type size.	`String`	— none

Returns

Number —

Return a number containing a type size.

Requires

[function] get-map-by-key-safe
[function] rem
[variable] size
[variable] type-sizes

Used by

[mixin] type-spacing

@function get-type-weight($name) { ... }@function get-type-weight($name) { 
  @return get-map-by-key-safe(settings.$type-weights, $name, 'type weight');
 }

Description

Get a defined type weight.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The name of the defined type weight.	`String`	— none

Returns

Number —

Return a number containing a type weight.

Requires

[function] get-map-by-key-safe
[variable] type-weights

Used by

[mixin] type-weight

@function get-map-by-key-safe($map, $key, $error-key) { ... }@function get-map-by-key-safe($map, $key, $error-key) { 
  @if map.has-key($map, $key) {
    @return map.get($map, $key);
  } @else {
    @error ("The #{$error-key} "#{$key}" does not exist.");
  }
 }

Description

Get a map value by key with built-in error handling.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	The map to be searched through.	`Map`	— none
`$key`	The name of the desired key in the map.	`String`	— none
`$error-key`	A context friendly reference to the map key used in the error message.	`String`	— none

Returns

Any type —

Returns a value from the map.

Requires

[function] get

Mixins

@mixin style-as-type($name, $alternate) { ... }@mixin style-as-type($name, $alternate) { 
  $map: functions.get-type-style($name, $alternate);

  font-family: map.get($map, family);
  font-size: unit.rem(map.get($map, size));
  line-height: unit.rem(map.get($map, leading));

  @if map.has-key($map, weight) {
    font-weight: map.get($map, weight);
  }

  @if map.has-key($map, tracking) {
    letter-spacing: map.get($map, tracking) * 0.01em;
  }

  @if map.has-key($map, casing) {
    text-transform: map.get($map, casing);
  }
 }

Description

Generate style properties from a defined type style.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The name of a defined type style.	`String`	— none
`$alternate`	Enable alternate style.	`Boolean`	— none

Requires

[function] get-type-style
[function] get
[function] rem

@mixin type-weight($name) { ... }@mixin type-weight($name) { 
  $weight: functions.get-type-weight($name);

  @if $weight {
    font-weight: $weight;
  }
 }

Description

Generate style properties from a defined type weight.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The name of a defined type style.	`String`	— none

Requires

[function] get-type-weight

Used by

[mixin] create-type-helpers

@mixin type-spacing($heading) { ... }@mixin type-spacing($heading) { 
  $spacing: functions.get-type-size(default);

  @if $heading {
    padding: {
      top: 0;
    }
  }

  margin: {
    top: 0;
    bottom: $spacing;
  }
 }

Description

Generate common style properties for type spacing.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$heading`	Additional spacing for headings	`Boolean`	— none

Requires

[function] get-type-size
[variable] spacing

Used by

[mixin] create-type-helpers

@mixin create-type-helpers($prefix) { ... }@mixin create-type-helpers($prefix) { 
  @each $name, $map in settings.$type-styles {
    $alias: map.get($map, 'alias');
    $selectors: ('.#{$prefix}-#{$name}');

    @if $alias {
      $selectors: list.append($selectors, string.unquote('.#{$prefix}-#{$alias}'), comma);
    }

    #{$selectors} {
      @include style-as-type($name);
      @include type-spacing;
    }
  }

  @each $name, $map in settings.$type-styles-alternate {
    $alias: map.get($map, 'alias');
    $selectors: ('.#{$prefix}-alternate-#{$name}');

    @if $alias {
      $selectors: list.append($selectors, string.unquote('.#{$prefix}-alternate-#{$alias}'), comma);
    }

    #{$selectors} {
      @include style-as-type($name, $alternate: true);
      @include type-spacing;
    }
  }

  @each $name, $map in settings.$type-weights {
    .#{$prefix}-#{'' + $name} {
      @include type-weight($name);
    }
  }
 }

Description

Generates a set of helper class for each type style.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$prefix`	The classname prefix for generated selector.	`String`	— none

Requires

[mixin] type-spacing
[mixin] type-weight
[function] get
[variable] type-styles
[variable] type-styles-alternate
[variable] type-weights

Variables

$type-families: (...) !default;$type-families: (
  'mono': kib-core.theme-get('next', 'font', 'family', 'monospace'),
  'sans': kib-core.theme-get('next', 'font', 'family', 'sans'),
  'serif': kib-core.theme-get('next', 'font', 'family', 'serif'),
  'sans-body': kib-core.theme-get('next', 'font', 'family', 'sans-body')
) !default;

Description

System font families

Type

Map

Used by

[function] get-font-family

$type-family: map.get($type-families, sans-body) !default;

Description

Default font family

Type

List</code> or <code>String

$type-sizes: (...) !default;$type-sizes: (
  xsmall: 12px,
  small: 14px,
  default: 16px,
  large: 20px,
  xlarge: 24px,
  xxlarge: 28px,
  xxxlarge: 32px,
  xxxxlarge: 36px
) !default;

Description

System text sizes

Type

Map

Used by

[function] get-type-size

$type-weights: (...) !default;$type-weights: (
  regular: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  extrabold: 800
) !default;

Description

System font weights

Type

Map

Used by

[function] get-type-weight
[mixin] create-type-helpers

$type-styles: (...) !default;$type-styles: (
  display1: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: 40px,
    leading: 50px,
    tracking: 1,
    alias: 'h1'
  ),
  display2: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, xxxxlarge),
    leading: 45px,
    tracking: 1,
    alias: 'h2'
  ),
  display3: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, xxxlarge),
    leading: 40px,
    tracking: 1,
    alias: 'h3'
  ),
  display4: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, xxlarge),
    leading: 35px,
    tracking: 1,
    alias: 'h4'
  ),
  display5: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, xlarge),
    leading: 30px,
    tracking: 1,
    alias: 'h5'
  ),
  display6: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, large),
    leading: 25px,
    tracking: 1,
    alias: 'h6'
  ),
  section1: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, semibold),
    size: map.get($type-sizes, large),
    leading: 25px,
    tracking: 1,
    alias: 'title1'
  ),
  section2: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, semibold),
    size: map.get($type-sizes, default),
    leading: 20px,
    tracking: 1,
    alias: 'title2'
  ),
  section3: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, semibold),
    size: map.get($type-sizes, small),
    leading: 18px,
    tracking: 1
  ),
  paragraph1: (
    family: map.get($type-families, sans-body),
    weight: map.get($type-weights, regular),
    size: map.get($type-sizes, default),
    leading: 20px,
    tracking: -3,
    alias: 'body'
  ),
  paragraph2: (
    family: map.get($type-families, sans-body),
    weight: map.get($type-weights, regular),
    size: map.get($type-sizes, small),
    leading: 18px,
    tracking: -3,
    alias: 'body2'
  ),
  caption: (
    family: map.get($type-families, sans-body),
    weight: map.get($type-weights, regular),
    size: map.get($type-sizes, xsmall),
    leading: 15px,
    tracking: -3
  ),
  button: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, small),
    leading: 20px,
    tracking: 2
  ),
  overline: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, regular),
    size: 11px,
    leading: 14px,
    tracking: 16,
    casing: uppercase
  ),
  hero1: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: 96px,
    leading: 102px,
    tracking: 1
  ),
  hero2: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: 72px,
    leading: 78px,
    tracking: 1
  ),
  hero3: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: 60px,
    leading: 66px,
    tracking: 1
  ),
  hero4: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: 50px,
    leading: 56px,
    tracking: 1
  )
) !default;

Description

Default system type style presets

Type

Map

Used by

[function] get-type-style
[mixin] create-type-helpers

$type-styles-alternate: (...);$type-styles-alternate: (
  display1: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: 40px,
    leading: 50px,
    tracking: 1,
    alias: 'h1'
  ),
  display2: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: map.get($type-sizes, xxxxlarge),
    leading: 45px,
    tracking: 1,
    alias: 'h2'
  ),
  display3: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: map.get($type-sizes, xxxlarge),
    leading: 40px,
    tracking: 1,
    alias: 'h3'
  ),
  display4: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: map.get($type-sizes, xxlarge),
    leading: 35px,
    tracking: 1,
    alias: 'h4'
  ),
  display5: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: map.get($type-sizes, xlarge),
    leading: 30px,
    tracking: 1,
    alias: 'h5'
  ),
  display6: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: map.get($type-sizes, large),
    leading: 25px,
    tracking: 1,
    alias: 'h6'
  ),
  section1: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, large),
    leading: 25px,
    tracking: 1,
    alias: 'title1'
  ),
  section2: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, default),
    leading: 20px,
    tracking: 1,
    alias: 'title2'
  ),
  paragraph1: (
    family: map.get($type-families, sans-body),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, default),
    leading: 20px,
    tracking: -3,
    alias: 'body'
  ),
  paragraph2: (
    family: map.get($type-families, sans-body),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, small),
    leading: 18px,
    tracking: -3,
    alias: 'body2'
  ),
  caption: (
    family: map.get($type-families, sans-body),
    weight: map.get($type-weights, bold),
    size: map.get($type-sizes, xsmall),
    leading: 15px,
    tracking: -3
  ),
  button: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, regular),
    size: map.get($type-sizes, small),
    leading: 20px,
    tracking: 2
  ),
  overline: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, bold),
    size: 11px,
    leading: 14px,
    tracking: 16,
    casing: uppercase
  ),
  hero1: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: 96px,
    leading: 102px,
    tracking: 1
  ),
  hero2: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: 72px,
    leading: 78px,
    tracking: 1
  ),
  hero3: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: 60px,
    leading: 66px,
    tracking: 1
  ),
  hero4: (
    family: map.get($type-families, sans),
    weight: map.get($type-weights, medium),
    size: 50px,
    leading: 56px,
    tracking: 1
  )
);

Description

Alternate system type style presets.

Type

Map

Used by

[function] get-type-style
[mixin] create-type-helpers