Normalize

Installation

  yarn add @chewy/kib-normalize

Import

  @use '~@chewy/kib-normalize/src/styles' as kib-normalize;

Mixins

normalize-blocks

@mixin normalize-blocks() { ... }@mixin normalize-blocks() { 
  @if $nested == false {
    html {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background-color: color.get('ui-bg', 'primary');
    }
  } @else {
    & {
      box-sizing: border-box;
    }
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  article,
  aside,
  footer,
  header,
  nav,
  section,
  figcaption,
  figure,
  main {
    display: block;
  }
 }
Description

Generate baseline block element styles.

Parameters

None.

Requires
Used by
Author
  • CDS

normalize-text

@mixin normalize-text() { ... }@mixin normalize-text() { 
  @if $nested == false {
    :root {
      @include typography.style-as('paragraph-1');

      font-size: settings.$root-font-size;
      text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-size: settings.$body-font-size;
      color: color.get('text', 'primary');
    }
  } @else {
    & {
      @include typography.style-as('paragraph-1', $alternate);

      text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: color.get('text', 'primary');
    }
  }

  h1 {
    @include typography.style-as('display-1', $alternate);
  }

  h2 {
    @include typography.style-as('display-2', $alternate);
  }

  h3 {
    @include typography.style-as('display-3', $alternate);
  }

  h4 {
    @include typography.style-as('display-4', $alternate);
  }

  h5 {
    @include typography.style-as('display-5', $alternate);
  }

  h6 {
    @include typography.style-as('display-6', $alternate);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: spacing.get('s4');
  }

  p {
    margin-top: 0;
    margin-bottom: spacing.get('s4');
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  address {
    @include typography.style-as('paragraph-1');

    margin-top: 0;
    margin-bottom: spacing.get('s4');
  }

  q,
  blockquote {
    quotes: '\201C''\201D''\2018''\2019';

    &::before {
      content: open-quote;
    }

    &::after {
      content: close-quote;
    }
  }

  blockquote {
    position: relative;
    margin-top: 0;
    margin-bottom: spacing.get('s4');
    padding-left: settings.$blockquote-padding;
    padding-right: settings.$blockquote-padding;
    font-style: italic;

    &::before,
    &::after {
      display: block;
      font-family: settings.$serif-font-family;
      font-size: settings.$blockquote-font-size;
      line-height: settings.$blockquote-line-height;
      width: settings.$blockquote-size;
      height: settings.$blockquote-size;
      position: absolute;
      z-index: 0;
      color: settings.$blockquote-color;
    }

    &::before {
      top: 0;
      left: 0;
    }

    &::after {
      right: 0;
      bottom: 0;
    }

    > * {
      position: relative;
      z-index: 1;
    }
  }
 }
Description

Generate baseline text element styles.

Parameters

None.

Requires
Used by
Author
  • CDS

normalize-form

@mixin normalize-form() { ... }@mixin normalize-form() { 
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
  }

  fieldset {
    padding: 0;
    border: 0;
    margin: 0;
  }

  legend {
    color: inherit;
  }
 }
Description

Generate baseline form element styles.

Parameters

None.

Used by
Author
  • CDS

normalize-lists

@mixin normalize-lists() { ... }@mixin normalize-lists() { 
  ::marker {
    color: color.get('text', 'primary');
  }

  ul,
  ol,
  dl {
    margin-top: 0;
    margin-bottom: spacing.get('s4');
    color: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  ul,
  ol {
    margin-left: 0;
    margin-right: 0;
    padding-right: settings.$list-padding;
    padding-left: settings.$list-bullet-padding;
  }

  dl {
    padding: {
      right: settings.$list-padding;
      left: settings.$list-padding;
    }
  }

  dt {
    margin-bottom: settings.$list-item-spacing;
    font-weight: typography.get-weight('semibold');
  }

  dd {
    margin-left: 0;
  }

  li,
  dd {
    margin-bottom: settings.$list-item-spacing;

    &:last-child {
      margin-bottom: 0;
    }

    ul,
    ol {
      padding: {
        right: 0;
        left: settings.$list-nested-padding;
      }

      &:not(:last-child) {
        margin-top: settings.$list-item-spacing;
      }
    }
  }
 }
Description

Generate baseline list styles.

Parameters

None.

Requires
Used by
Author
  • CDS

normalize-inline

@mixin normalize-inline() { ... }@mixin normalize-inline() { 
  a {
    @include link.link;
  }

  abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
  }

  small {
    font-size: settings.$small-font-size;
  }

  sup,
  sub {
    @include typography.style-as('caption', $alternate);
  }

  em,
  i {
    font-style: italic;
  }

  strong,
  b {
    font-weight: settings.$bold-font-weight;
  }

  img {
    border: none;
    padding: 0;
    margin: 0;
  }
 }
Description

Generate baseline inline text element styles.

Parameters

None.

Requires
Used by
Author
  • CDS

normalize-table

@mixin normalize-table() { ... }@mixin normalize-table() { 
  table {
    @include kib-table-new.container;
  }

  caption {
    @include kib-table-new.caption;
  }

  thead {
    @include kib-table-new.header;
  }

  th {
    @include kib-table-new.heading;
  }

  td {
    @include kib-table-new.cell;
  }

  tfoot {
    @include kib-table-new.footer;
  }
 }
Description

Generate baseline table element styles.

Parameters

None.

Used by
Author
  • CDS

normalize-code

@mixin normalize-code() { ... }@mixin normalize-code() { 
  code,
  kbd,
  samp {
    font-family: settings.$mono-font-family;
  }

  pre {
    margin-top: 0;
    margin-bottom: spacing.get('s4');
    overflow-x: auto;
  }

  code {
    color: color.get('text', 'secondary');
    background: settings.$code-background-color;
    border: settings.$code-border-width solid settings.$code-border-color;
    padding: {
      right: settings.$code-padding-horizontal;
      left: settings.$code-padding-horizontal;
    }

    pre & {
      display: block;
      padding: settings.$code-padding;
      overflow-x: auto;
    }
  }
 }
Description

Generate baseline code element styles.

Parameters

None.

Requires
Used by
Author
  • CDS

normalize

@mixin normalize() { ... }@mixin normalize() { 
  @include normalize-blocks($nested);
  @include normalize-text($nested, $alternate);
  @include normalize-lists;
  @include normalize-inline;
  @include normalize-form;
  @include normalize-table;
  @include normalize-code;
 }
Description

Generate baseline element styles.

Parameters

None.

Author
  • CDS

Variables

base-font-family

Deprecated!

Use typography token typefaces

$base-font-family: typography.get('text-typeface') !default;
Description

Base font family

Type

List</code> or <code>String

mono-font-family

Deprecated!

Use typography token typefaces

$mono-font-family: 'Roboto Mono', 'Noto Mono', Courier, monospace !default;
Description

Monospaced font family

Type

List</code> or <code>String

Used by

serif-font-family

Deprecated!

Use typography token typefaces

$serif-font-family: Georgia, serif !default;
Description

Serif font family

Type

List</code> or <code>String

Used by

default-spacing

$default-spacing: spacing.get('s4') !default;
Description

Default spacing

Type

Number

root-font-settings

Deprecated!

Styles use typography tokens now

$root-font-settings: (...);$root-font-settings: typography.get-type-style('paragraph-1');
Description

Map of root font typography settings

Type

Map

root-font-leading

$root-font-leading: typography.get('paragraph-1', 'line-height') !default;
Description

Root font leading

Type

Number

root-font-weight

$root-font-weight: typography.get('paragraph-1', 'font-weight') !default;
Description

Root font weight

Type

Number

root-font-tracking

$root-font-tracking: typography.get('paragraph-1', 'letter-spacing') !default;
Description

Root font tracking

Type

Number

root-font-size

$root-font-size: math.percentage(math.div(settings.$baseline-font-size, 16px)) !default;
Description

Root font size

Type

Number

Used by

root-font

$root-font: #{$root-font-weight} list.slash($root-font-size, $root-font-leading) #{$base-font-family} !default;
Description

Root font

Type

List</code> or <code>Number

body-font-size

$body-font-size: typography.get('paragraph-1', 'font-size') !default;
Description

Body font size

Type

Number

Used by

blockquote-size

$blockquote-size: unit.rem(36px) !default;
Description

Blockquote block size

Type

Number

Used by

blockquote-padding

$blockquote-padding: ($blockquote-size + unit.rem(8px)) !default;
Description

Blockquote padding

Type

Number

Used by

blockquote-font-size

$blockquote-font-size: ($blockquote-size * 2) !default;
Description

Blockquote text size

Type

Number

Used by

blockquote-line-height

$blockquote-line-height: 1 !default;
Description

Blockquote line height

Type

Number

Used by

blockquote-color

$blockquote-color: color.get('text', 'placeholder') !default;
Description

Blockquote before text color

Type

Color

Used by

list-padding

$list-padding: spacing.get('s4') !default;
Description

List padding

Type

Number

Used by

list-bullet-padding

$list-bullet-padding: spacing.get('s7') !default;
Description

List padding for bullets

Type

Number

Used by

list-item-spacing

$list-item-spacing: spacing.get('s3') !default;
Description

List item margin

Type

Number

Used by

list-nested-padding

$list-nested-padding: $default-spacing !default;
Description

List nested padding

Type

Number

Used by

small-font-size

$small-font-size: typography.get('paragraph-2', 'font-size') !default;
Description

Small tag font size

Type

Number

Used by

bold-font-weight

$bold-font-weight: typography.get-weight('bold') !default;
Description

Bold font weight

Type

Number

Used by

table-border-width

Deprecated!

using kib-table-new styles

$table-border-width: unit.rem(1px) !default;
Description

Table border width

Type

Number

table-border-color

Deprecated!

using kib-table-new styles

$table-border-color: color.get('ui-bg', '07') !default;
Description

Table border color

Type

Color

table-caption-padding-vertical

Deprecated!

using kib-table-new styles

$table-caption-padding-vertical: spacing.get('s2') !default;
Description

Caption vertical padding

Type

Number

table-caption-padding-horizontal

Deprecated!

using kib-table-new styles

$table-caption-padding-horizontal: spacing.get('s2') !default;
Description

Caption horizontal padding

Type

Number

table-header-font-weight

Deprecated!

using kib-table-new styles

$table-header-font-weight: typography.get-weight('semibold') !default;
Description

Table header font weight

Type

Number

table-header-background-color

Deprecated!

using kib-table-new styles

$table-header-background-color: color.get('ui-bg', '04') !default;
Description

Table header background color

Type

Color

code-border-width

$code-border-width: unit.rem(1px) !default;
Description

Code border width

Type

Number

Used by

code-border-color

$code-border-color: color.get('ui-bg', '05') !default;
Description

Code border color

Type

Color

Used by

code-padding-horizontal

$code-padding-horizontal: spacing.get('s2') !default;
Description

Code tag horizontal padding

Type

Number

Used by

code-padding

$code-padding: spacing.get('s2') !default;
Description

Pre tag padding

Type

Number

Used by

code-background-color

$code-background-color: color.get('ui-bg', '02') !default;
Description

Code background color

Type

Color

Used by