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; } }
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
- [function]
get
- [variable]
root-font-size
- [variable]
body-font-size
- [variable]
blockquote-padding
- [variable]
serif-font-family
- [variable]
blockquote-font-size
- [variable]
blockquote-line-height
- [variable]
blockquote-size
- [variable]
blockquote-color
Used by
- [mixin]
normalize
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; } }
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
- [function]
get
- [function]
get-weight
- [variable]
list-padding
- [variable]
list-bullet-padding
- [variable]
list-item-spacing
- [variable]
list-nested-padding
Used by
- [mixin]
normalize
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
- [variable]
small-font-size
- [variable]
bold-font-weight
Used by
- [mixin]
normalize
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; } }
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
- [function]
get
- [variable]
mono-font-family
- [variable]
code-background-color
- [variable]
code-border-width
- [variable]
code-border-color
- [variable]
code-padding-horizontal
- [variable]
code-padding
Used by
- [mixin]
normalize
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.
Requires
- [mixin]
normalize-blocks
- [mixin]
normalize-text
- [mixin]
normalize-lists
- [mixin]
normalize-inline
- [mixin]
normalize-form
- [mixin]
normalize-table
- [mixin]
normalize-code
Author
CDS
Variables
base-font-family
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
Use typography token typefaces
$mono-font-family: 'Roboto Mono', 'Noto Mono', Courier, monospace !default;
serif-font-family
Use typography token typefaces
$serif-font-family: Georgia, serif !default;
default-spacing
$default-spacing: spacing.get('s4') !default;
Description
Default spacing
Type
Number
root-font-settings
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;
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;
blockquote-size
$blockquote-size: unit.rem(36px) !default;
blockquote-padding
$blockquote-padding: ($blockquote-size + unit.rem(8px)) !default;
blockquote-font-size
$blockquote-font-size: ($blockquote-size * 2) !default;
blockquote-line-height
$blockquote-line-height: 1 !default;
blockquote-color
$blockquote-color: color.get('text', 'placeholder') !default;
list-padding
$list-padding: spacing.get('s4') !default;
list-bullet-padding
$list-bullet-padding: spacing.get('s7') !default;
list-item-spacing
$list-item-spacing: spacing.get('s3') !default;
list-nested-padding
$list-nested-padding: $default-spacing !default;
small-font-size
$small-font-size: typography.get('paragraph-2', 'font-size') !default;
bold-font-weight
$bold-font-weight: typography.get-weight('bold') !default;
table-border-width
using kib-table-new styles
$table-border-width: unit.rem(1px) !default;
Description
Table border width
Type
Number
table-border-color
using kib-table-new styles
$table-border-color: color.get('ui-bg', '07') !default;
Description
Table border color
Type
Color
table-caption-padding-vertical
using kib-table-new styles
$table-caption-padding-vertical: spacing.get('s2') !default;
Description
Caption vertical padding
Type
Number
table-caption-padding-horizontal
using kib-table-new styles
$table-caption-padding-horizontal: spacing.get('s2') !default;
Description
Caption horizontal padding
Type
Number
table-header-font-weight
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
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;
code-border-color
$code-border-color: color.get('ui-bg', '05') !default;
code-padding-horizontal
$code-padding-horizontal: spacing.get('s2') !default;
code-padding
$code-padding: spacing.get('s2') !default;
code-background-color
$code-background-color: color.get('ui-bg', '02') !default;