CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window

Bundle

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-core/typography@17.0.30-alpha.0

New Style Typography (used in Figma)

Preview

Typography

Preview

Table of Contents

Edit this section, Opens in new window

Usage

Hero title

The quick brown fox jumps over the lazy dog

Hero title

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading hero-title">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Hero()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Hero;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Hero();
}

Heading largest

The quick brown fox jumps over the lazy dog

Heading largest

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading largest">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Largest()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Largest;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Largest();
}

Heading larger

The quick brown fox jumps over the lazy dog

Heading larger

As in current viewport

Medium mobile
Usage with class
<h1 class="if heading larger">The quick brown fox jumps over the lazy dog</h1>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Larger()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Larger;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Larger();
}

Heading large

The quick brown fox jumps over the lazy dog

Heading large

As in current viewport

Medium mobile
Usage with class
<h2 class="if heading large">The quick brown fox jumps over the lazy dog</h2>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Large()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Large;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Large();
}

Heading medium

The quick brown fox jumps over the lazy dog

Heading medium

As in current viewport

Medium mobile
Usage with class
<h3 class="if heading medium">The quick brown fox jumps over the lazy dog</h3>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Medium()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Medium;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Medium();
}

Heading small

The quick brown fox jumps over the lazy dog

Heading small

As in current viewport

Medium mobile
Usage with class
<h4 class="if heading small">The quick brown fox jumps over the lazy dog</h4>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Small()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Small;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Small();
}

Heading smallest

The quick brown fox jumps over the lazy dog

Heading smallest

As in current viewport

Medium mobile
Usage with class
<h5 class="if heading smallest">The quick brown fox jumps over the lazy dog</h5>
Usage with mixins
Stylus
.myHeading
    IDS_TYPOGRAPHY_Heading_Smallest()
Sass/Scss
.myHeading {
    @include IDS_TYPOGRAPHY_Heading_Smallest;
}
Less
.myHeading {
    .IDS_TYPOGRAPHY_Heading_Smallest();
}

Lead text

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.

Lead text

As in current viewport

Medium mobile
Usage with class
<p class="if text lead">The quick brown fox jumps over the lazy dog</p>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Lead()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Lead;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Lead();
}

Body text

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don't eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Body text

As in current viewport

Medium mobile
Usage with class
<p class="if text body">
    Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The
    Pirates of the Caribbean breaks down, the pirates don't eat the tourists. Do you have any idea
    how long it takes those cups to decompose. God help us, we're in the hands of engineers.
</p>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Body()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Body;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Body();
}

Meta text

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don't eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Meta text

As in current viewport

Medium mobile
Usage with class
<p class="if text meta">
    Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The
    Pirates of the Caribbean breaks down, the pirates don't eat the tourists. Do you have any idea
    how long it takes those cups to decompose. God help us, we're in the hands of engineers.
</p>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Meta()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Meta;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Meta();
}

Caption text

Eventually, you do plan to have dinosaurs on your dinosaur tour, right?

Caption text

As in current viewport

Medium mobile
Usage with class
<figcaption class="if text caption">
    Eventually, you do plan to have dinosaurs on your dinosaur tour, right?
</figcaption>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Caption()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Caption;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Caption();
}

Disclaimer text

Läs om vår hantering av personuppgifter, automatisk behandling av köp och hur vi arbetar med uppringande kvalitetssamtal.

Disclaimer text

As in current viewport

Medium mobile
Usage with class
<div class="if text disclaimer">
    Läs om vår <a href="" class="if">hantering av personuppgifter</a>,
    <a href="" class="if">automatisk behandling av köp</a> och hur vi arbetar med
    <a href="" class="if">uppringande kvalitetssamtal</a>.
</div>
Usage with mixins
Stylus
.myText
    IDS_TYPOGRAPHY_Text_Disclaimer()
Sass/Scss
.myText {
    @include IDS_TYPOGRAPHY_Text_Disclaimer;
}
Less
.myText {
    .IDS_TYPOGRAPHY_Text_Disclaimer();
}
Edit this section, Opens in new window

Mixins

Here's a list of all typography mixins.

“A mixin can be used as a standalone helper, or you can pass values as arguments to make it extra flexible.”

All typography mixins are named the same, but not used with the same syntax! See usage sections below!
Name What it does
IDS_TYPOGRAPHY_FontFamily_Sans Sets the font-family to "If Sans", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansThin Sets the font-family to "If Sans Thin", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansThinItalic Sets the font-family to "If Sans Thin Italic", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansLight Sets the font-family to "If Sans Light", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansLightItalic Sets the font-family to "If Sans Light Italic", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansItalic Sets the font-family to "If Sans Italic", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansMedium Sets the font-family to "If Sans Medium", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansMediumItalic Sets the font-family to "If Sans Medium Italic", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansBold Sets the font-family to "If Sans Bold", Arial, sans-serif
IDS_TYPOGRAPHY_FontFamily_SansBoldItalic Sets the font-family to "If Sans Bold Italic", Arial, sans-serif
IDS_TYPOGRAPHY_Text_Lead Sets the typography for lead text
IDS_TYPOGRAPHY_Text_Meta Sets the typography for meta text
IDS_TYPOGRAPHY_Text_Disclaimer Sets the typography for disclaimer text
IDS_TYPOGRAPHY_Text_Caption Sets the typography for caption text
IDS_TYPOGRAPHY_Text_Body Sets the typography for body text
IDS_TYPOGRAPHY_Heading_Smallest Sets the typography for smallest heading
IDS_TYPOGRAPHY_Heading_Small Sets the typography for small heading
IDS_TYPOGRAPHY_Heading_Medium Sets the typography for medium heading
IDS_TYPOGRAPHY_Heading_Large Sets the typography for large heading
IDS_TYPOGRAPHY_Heading_Larger Sets the typography for larger heading
IDS_TYPOGRAPHY_Heading_Largest Sets the typography for largest heading
Usage with Stylus
You can read more about Stylus mixins here. 
.myStyle
    IDS_TYPOGRAPHY_Heading_Large()
Usage with Sass/Scss
You can read more about SCSS mixins here. 
.myStyle{
    @include IDS_TYPOGRAPHY_Heading_Large;

}
Usage with Less
You can read more about LESS mixins here. 
.myStyle {
    .IDS_TYPOGRAPHY_Heading_Large();
}
Edit this section, Opens in new window

Classnames

Here you will see the full reference of exposed classnames to be utilised as helper classes for your html styling.

Font-weight

Font weight class helpers (for variable fonts) Example
class="if font weight-36" .if.font.weight-36
class="if font weight-40" .if.font.weight-40
class="if font weight-45" .if.font.weight-45
class="if font weight-48" .if.font.weight-48
class="if font weight-50" .if.font.weight-50
class="if font weight-54" .if.font.weight-54
class="if font weight-64" .if.font.weight-64
class="if font weight-70" .if.font.weight-70
class="if font weight-78" .if.font.weight-78
class="if font weight-82" .if.font.weight-82
class="if font weight-85" .if.font.weight-85
class="if font weight-104" .if.font.weight-104
class="if font weight-126" .if.font.weight-126

Font-family

Font-family helper classes Example
class="if font family sans fallback" .if.font.family.sans.fallback
class="if font family sans" .if.font.family.sans
class="if font family sans thin" .if.font.family.sans.thin
class="if font family sans thin-italic" .if.font.family.sans.thin-italic
class="if font family sans light" .if.font.family.sans.light
class="if font family sans light-italic" .if.font.family.sans.light-italic
class="if font family sans italic" .if.font.family.sans.italic
class="if font family sans medium" .if.font.family.sans.medium
class="if font family sans medium-italic" .if.font.family.sans.medium-italic
class="if font family sans bold" .if.font.family.sans.bold
class="if font family sans bold-italic" .if.font.family.sans.bold-italic

Heading

Heading helper classes Example
class="if heading hero-title"

.if.heading.hero-title
class="if heading largest" .if.heading.largest
class="if heading larger" .if.heading.larger
class="if heading large" .if.heading.large
class="if heading medium" .if.heading.medium
class="if heading small" .if.heading.small
class="if heading smallest" .if.heading.smallest

Text

Text helper classes Example
class="if text lead" .if.text.lead
class="if text body" .if.text.body
class="if text meta" .if.text.meta
class="if text disclaimer" .if.text.disclaimer
class="if text caption" .if.text.caption
Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor and CSS variables

Font size tokens

Preprocessor CSS Variable Value Is aliased in
$ids-font-size-12
 var(--ids-font-size-12) 0.75rem
$ids-font-size-14
 var(--ids-font-size-14) 0.875rem
$ids-font-size-15
 var(--ids-font-size-15) 0.9375rem
$ids-font-size-16
 var(--ids-font-size-16) 1rem
$ids-font-size-18
 var(--ids-font-size-18) 1.125rem
$ids-font-size-20
 var(--ids-font-size-20) 1.25rem
$ids-font-size-22
 var(--ids-font-size-22) 1.375rem
$ids-font-size-24
 var(--ids-font-size-24) 1.5rem
$ids-font-size-26
 var(--ids-font-size-26) 1.625rem
$ids-font-size-28
 var(--ids-font-size-28) 1.75rem
$ids-font-size-30
 var(--ids-font-size-30) 1.875rem
$ids-font-size-32
 var(--ids-font-size-32) 2rem
$ids-font-size-33
 var(--ids-font-size-33) 2.0625rem
$ids-font-size-36
 var(--ids-font-size-36) 2.25rem
$ids-font-size-38
 var(--ids-font-size-38) 2.375rem
$ids-font-size-42
 var(--ids-font-size-42) 2.625rem
$ids-font-size-48
 var(--ids-font-size-48) 3rem
$ids-font-size-54
 var(--ids-font-size-54) 3.375rem
$ids-font-size-56
 var(--ids-font-size-56) 3.5rem
$ids-font-size-66
 var(--ids-font-size-66) 4.125rem
$ids-font-size-14px
 var(--ids-font-size-14px) 14px
$ids-font-size-15px
 var(--ids-font-size-15px) 15px
$ids-font-size-16px
 var(--ids-font-size-16px) 16px
$ids-font-size-18px
 var(--ids-font-size-18px) 18px
$ids-font-size-20px
 var(--ids-font-size-20px) 20px
$ids-font-size-22px
 var(--ids-font-size-22px) 22px
$ids-font-size-24px
 var(--ids-font-size-24px) 24px
$ids-font-size-26px
 var(--ids-font-size-26px) 26px
$ids-font-size-28px
 var(--ids-font-size-28px) 28px
$ids-font-size-30px
 var(--ids-font-size-30px) 30px
$ids-font-size-32px
 var(--ids-font-size-32px) 32px
$ids-font-size-33px
 var(--ids-font-size-33px) 33px
$ids-font-size-36px
 var(--ids-font-size-36px) 36px
$ids-font-size-38px
 var(--ids-font-size-38px) 38px
$ids-font-size-42px
 var(--ids-font-size-42px) 42px
$ids-font-size-48px
 var(--ids-font-size-48px) 48px
$ids-font-size-54px
 var(--ids-font-size-54px) 54px
$ids-font-size-56px
 var(--ids-font-size-56px) 56px
$ids-font-size-66px
 var(--ids-font-size-66px) 66px

Font weight tokens

Preprocessor CSS Variable Value Is aliased in
Aa$ids-font-weight-36
 var(--ids-font-weight-36) 36
Aa$ids-font-weight-40
 var(--ids-font-weight-40) 40
Aa$ids-font-weight-45
 var(--ids-font-weight-45) 45
Aa$ids-font-weight-48
 var(--ids-font-weight-48) 48
Aa$ids-font-weight-50
 var(--ids-font-weight-50) 50
Aa$ids-font-weight-54
 var(--ids-font-weight-54) 54
Aa$ids-font-weight-60
 var(--ids-font-weight-60) 60
Aa$ids-font-weight-64
 var(--ids-font-weight-64) 64
Aa$ids-font-weight-70
 var(--ids-font-weight-70) 70
Aa$ids-font-weight-78
 var(--ids-font-weight-78) 78
Aa$ids-font-weight-82
 var(--ids-font-weight-82) 82
Aa$ids-font-weight-85
 var(--ids-font-weight-85) 85
Aa$ids-font-weight-104
 var(--ids-font-weight-104) 104
Aa$ids-font-weight-106
 var(--ids-font-weight-106) 106
Aa$ids-font-weight-126
 var(--ids-font-weight-126) 126
Aa$ids-font-weight-132
 var(--ids-font-weight-132) 132

Font family tokens

Preprocessor CSS Variable Value Is aliased in
$ids-font-family-sans-thin
 var(--ids-font-family-sans-thin) If Sans Thin
$ids-font-family-sans-light
 var(--ids-font-family-sans-light) If Sans Light
$ids-font-family-sans
 var(--ids-font-family-sans) If Sans
$ids-font-family-sans-medium
 var(--ids-font-family-sans-medium) If Sans Medium
$ids-font-family-sans-bold
 var(--ids-font-family-sans-bold) If Sans Bold
$ids-font-family-sans-thin-italic
 var(--ids-font-family-sans-thin-italic) If Sans Thin Italic
$ids-font-family-sans-light-italic
 var(--ids-font-family-sans-light-italic) If Sans Light Italic
$ids-font-family-sans-italic
 var(--ids-font-family-sans-italic) If Sans Italic
$ids-font-family-sans-medium-italic
 var(--ids-font-family-sans-medium-italic) If Sans Medium Italic
$ids-font-family-sans-bold-italic
 var(--ids-font-family-sans-bold-italic) If Sans Bold Italic

Line height tokens

Preprocessor CSS Variable Value Is aliased in
$ids-size-line-height-14
 var(--ids-size-line-height-14) 0.875rem
$ids-size-line-height-16
 var(--ids-size-line-height-16) 1rem
$ids-size-line-height-18
 var(--ids-size-line-height-18) 1.125rem
$ids-size-line-height-20
 var(--ids-size-line-height-20) 1.25rem
$ids-size-line-height-24
 var(--ids-size-line-height-24) 1.5rem
$ids-size-line-height-28
 var(--ids-size-line-height-28) 1.75rem
$ids-size-line-height-32
 var(--ids-size-line-height-32) 2rem
$ids-size-line-height-40
 var(--ids-size-line-height-40) 2.5rem
$ids-size-line-height-42
 var(--ids-size-line-height-42) 2.625rem
$ids-size-line-height-44
 var(--ids-size-line-height-44) 2.75rem
$ids-size-line-height-48
 var(--ids-size-line-height-48) 3rem
$ids-size-line-height-52
 var(--ids-size-line-height-52) 3.25rem
$ids-size-line-height-56
 var(--ids-size-line-height-56) 3.5rem
$ids-size-line-height-64
 var(--ids-size-line-height-64) 4rem
$ids-size-line-height-72
 var(--ids-size-line-height-72) 4.5rem
$ids-size-line-height-24px
 var(--ids-size-line-height-24px) 24rem
$ids-size-line-height-28px
 var(--ids-size-line-height-28px) 28rem
$ids-size-line-height-32px
 var(--ids-size-line-height-32px) 32rem
$ids-size-line-height-40px
 var(--ids-size-line-height-40px) 40rem
$ids-size-line-height-42px
 var(--ids-size-line-height-42px) 42rem
$ids-size-line-height-44px
 var(--ids-size-line-height-44px) 44rem
$ids-size-line-height-48px
 var(--ids-size-line-height-48px) 48rem
$ids-size-line-height-52px
 var(--ids-size-line-height-52px) 52rem
$ids-size-line-height-56px
 var(--ids-size-line-height-56px) 56rem
$ids-size-line-height-64px
 var(--ids-size-line-height-64px) 64rem
$ids-size-line-height-72px
 var(--ids-size-line-height-72px) 72rem

Headings tokens

Preprocessor CSS Variable Value Is aliased in
$ids-heading-smallest-margin-bottom
 var(--ids-heading-smallest-margin-bottom) 1.5rem
$ids-heading-smallest-font-family
 var(--ids-heading-smallest-font-family) If Sans
$ids-heading-smallest-font-size
 var(--ids-heading-smallest-font-size) 1.125rem
$ids-heading-smallest-line-height
 var(--ids-heading-smallest-line-height) 1.75rem
Aa$ids-heading-smallest-font-weight
 var(--ids-heading-smallest-font-weight) 126
$ids-heading-small-margin-bottom
 var(--ids-heading-small-margin-bottom) 1.5rem
$ids-heading-small-font-family
 var(--ids-heading-small-font-family) If Sans
$ids-heading-small-font-size-media-query-base
 var(--ids-heading-small-font-size-media-query-base) 1.125rem
$ids-heading-small-font-size-media-query-md
 var(--ids-heading-small-font-size-media-query-md) 1.5rem
$ids-heading-small-line-height-media-query-base
 var(--ids-heading-small-line-height-media-query-base) 1.75rem
$ids-heading-small-line-height-media-query-md
 var(--ids-heading-small-line-height-media-query-md) 2rem
Aa$ids-heading-small-font-weight-media-query-base
 var(--ids-heading-small-font-weight-media-query-base) 126
Aa$ids-heading-small-font-weight-media-query-md
 var(--ids-heading-small-font-weight-media-query-md) 64
$ids-heading-medium-margin-bottom-media-query-base
 var(--ids-heading-medium-margin-bottom-media-query-base) 1.5rem
$ids-heading-medium-margin-bottom-media-query-xxs
 var(--ids-heading-medium-margin-bottom-media-query-xxs) 1.5rem
$ids-heading-medium-margin-bottom-media-query-xs
 var(--ids-heading-medium-margin-bottom-media-query-xs) 1.5rem
$ids-heading-medium-margin-bottom-media-query-md
 var(--ids-heading-medium-margin-bottom-media-query-md) 2rem
$ids-heading-medium-font-family
 var(--ids-heading-medium-font-family) If Sans Light
$ids-heading-medium-font-size-media-query-base
 var(--ids-heading-medium-font-size-media-query-base) 1.25rem
$ids-heading-medium-font-size-media-query-xxs
 var(--ids-heading-medium-font-size-media-query-xxs) 1.375rem
$ids-heading-medium-font-size-media-query-xs
 var(--ids-heading-medium-font-size-media-query-xs) 1.5rem
$ids-heading-medium-font-size-media-query-md
 var(--ids-heading-medium-font-size-media-query-md) 2rem
$ids-heading-medium-line-height-media-query-base
 var(--ids-heading-medium-line-height-media-query-base) 2rem
$ids-heading-medium-line-height-media-query-md
 var(--ids-heading-medium-line-height-media-query-md) 2.625rem
Aa$ids-heading-medium-font-weight-media-query-base
 var(--ids-heading-medium-font-weight-media-query-base) 64
Aa$ids-heading-medium-font-weight-media-query-md
 var(--ids-heading-medium-font-weight-media-query-md) 50
$ids-heading-large-margin-bottom-media-query-base
 var(--ids-heading-large-margin-bottom-media-query-base) 1.5rem
$ids-heading-large-margin-bottom-media-query-xxs
 var(--ids-heading-large-margin-bottom-media-query-xxs) 2rem
$ids-heading-large-margin-bottom-media-query-xs
 var(--ids-heading-large-margin-bottom-media-query-xs) 2rem
$ids-heading-large-margin-bottom-media-query-md
 var(--ids-heading-large-margin-bottom-media-query-md) 3rem
$ids-heading-large-font-family
 var(--ids-heading-large-font-family) If Sans Light
$ids-heading-large-font-size-media-query-base
 var(--ids-heading-large-font-size-media-query-base) 1.5rem
$ids-heading-large-font-size-media-query-xxs
 var(--ids-heading-large-font-size-media-query-xxs) 1.625rem
$ids-heading-large-font-size-media-query-xs
 var(--ids-heading-large-font-size-media-query-xs) 1.75rem
$ids-heading-large-font-size-media-query-md
 var(--ids-heading-large-font-size-media-query-md) 2.625rem
$ids-heading-large-line-height-media-query-base
 var(--ids-heading-large-line-height-media-query-base) 3.25rem
$ids-heading-large-line-height-media-query-md
 var(--ids-heading-large-line-height-media-query-md) 4rem
Aa$ids-heading-large-font-weight-media-query-base
 var(--ids-heading-large-font-weight-media-query-base) 48
Aa$ids-heading-large-font-weight-media-query-md
 var(--ids-heading-large-font-weight-media-query-md) 40
$ids-heading-larger-margin-bottom-media-query-base
 var(--ids-heading-larger-margin-bottom-media-query-base) 2rem
$ids-heading-larger-margin-bottom-media-query-xxs
 var(--ids-heading-larger-margin-bottom-media-query-xxs) 2rem
$ids-heading-larger-margin-bottom-media-query-xs
 var(--ids-heading-larger-margin-bottom-media-query-xs) 2.5rem
$ids-heading-larger-margin-bottom-media-query-md
 var(--ids-heading-larger-margin-bottom-media-query-md) 3.5rem
$ids-heading-larger-font-family
 var(--ids-heading-larger-font-family) If Sans Thin
$ids-heading-larger-letter-spacing
 var(--ids-heading-larger-letter-spacing) -0.25px
$ids-heading-larger-font-size-media-query-base
 var(--ids-heading-larger-font-size-media-query-base) 1.75rem
$ids-heading-larger-font-size-media-query-xxs
 var(--ids-heading-larger-font-size-media-query-xxs) 1.875rem
$ids-heading-larger-font-size-media-query-xs
 var(--ids-heading-larger-font-size-media-query-xs) 2.0625rem
$ids-heading-larger-font-size-media-query-md
 var(--ids-heading-larger-font-size-media-query-md) 3.5rem
$ids-heading-larger-line-height-media-query-base
 var(--ids-heading-larger-line-height-media-query-base) 3.25rem
$ids-heading-larger-line-height-media-query-md
 var(--ids-heading-larger-line-height-media-query-md) 4rem
Aa$ids-heading-larger-font-weight-media-query-base
 var(--ids-heading-larger-font-weight-media-query-base) 48
Aa$ids-heading-larger-font-weight-media-query-md
 var(--ids-heading-larger-font-weight-media-query-md) 40
$ids-heading-largest-margin-bottom-media-query-base
 var(--ids-heading-largest-margin-bottom-media-query-base) 2.5rem
$ids-heading-largest-margin-bottom-media-query-xxs
 var(--ids-heading-largest-margin-bottom-media-query-xxs) 2.5rem
$ids-heading-largest-margin-bottom-media-query-xs
 var(--ids-heading-largest-margin-bottom-media-query-xs) 3rem
$ids-heading-largest-margin-bottom-media-query-md
 var(--ids-heading-largest-margin-bottom-media-query-md) 3.5rem
$ids-heading-largest-font-family
 var(--ids-heading-largest-font-family) If Sans Thin
$ids-heading-largest-letter-spacing
 var(--ids-heading-largest-letter-spacing) -0.5px
$ids-heading-largest-font-size-media-query-base
 var(--ids-heading-largest-font-size-media-query-base) 2.25rem
$ids-heading-largest-font-size-media-query-xxs
 var(--ids-heading-largest-font-size-media-query-xxs) 2.375rem
$ids-heading-largest-font-size-media-query-xs
 var(--ids-heading-largest-font-size-media-query-xs) 2.625rem
$ids-heading-largest-font-size-media-query-md
 var(--ids-heading-largest-font-size-media-query-md) 3.5rem
$ids-heading-largest-line-height-media-query-base
 var(--ids-heading-largest-line-height-media-query-base) 3.5rem
$ids-heading-largest-line-height-media-query-md
 var(--ids-heading-largest-line-height-media-query-md) 4rem
Aa$ids-heading-largest-font-weight
 var(--ids-heading-largest-font-weight) 40

Text tokens

Preprocessor CSS Variable Value Is aliased in
$ids-text-disclaimer-max-width
 var(--ids-text-disclaimer-max-width) 600px
$ids-text-disclaimer-color
 var(--ids-text-disclaimer-color) rgb(110,98,94)
$ids-text-disclaimer-font-family
 var(--ids-text-disclaimer-font-family) If Sans
$ids-text-disclaimer-font-size
 var(--ids-text-disclaimer-font-size) 1.125rem
$ids-text-disclaimer-line-height
 var(--ids-text-disclaimer-line-height) 1.75rem
Aa$ids-text-disclaimer-font-weight
 var(--ids-text-disclaimer-font-weight) 78
$ids-text-meta-font-size-media-query-base
 var(--ids-text-meta-font-size-media-query-base) 0.875rem
$ids-text-meta-font-size-media-query-xs
 var(--ids-text-meta-font-size-media-query-xs) 0.9375rem
$ids-text-meta-font-size-media-query-md
 var(--ids-text-meta-font-size-media-query-md) 1rem
$ids-text-meta-font-family
 var(--ids-text-meta-font-family) If Sans
$ids-text-meta-line-height
 var(--ids-text-meta-line-height) 1.5rem
Aa$ids-text-meta-font-weight-media-query-base
 var(--ids-text-meta-font-weight-media-query-base) 85
Aa$ids-text-meta-font-weight-media-query-md
 var(--ids-text-meta-font-weight-media-query-md) 82
$ids-text-meta-bold-font-family
 var(--ids-text-meta-bold-font-family) If Sans Bold
Aa$ids-text-meta-bold-font-weight
 var(--ids-text-meta-bold-font-weight) 126
$ids-text-caption-font-size-media-query-base
 var(--ids-text-caption-font-size-media-query-base) 0.875rem
$ids-text-caption-font-size-media-query-xs
 var(--ids-text-caption-font-size-media-query-xs) 0.9375rem
$ids-text-caption-font-family
 var(--ids-text-caption-font-family) If Sans Medium Italic
$ids-text-caption-line-height
 var(--ids-text-caption-line-height) 1.5rem
Aa$ids-text-caption-font-weight
 var(--ids-text-caption-font-weight) 85
$ids-text-body-font-size-media-query-base
 var(--ids-text-body-font-size-media-query-base) 1rem
$ids-text-body-font-size-media-query-xs
 var(--ids-text-body-font-size-media-query-xs) 1.125rem
$ids-text-body-font-family
 var(--ids-text-body-font-family) If Sans
$ids-text-body-line-height
 var(--ids-text-body-line-height) 1.75rem
Aa$ids-text-body-font-weight
 var(--ids-text-body-font-weight) 78
$ids-text-lead-font-size
 var(--ids-text-lead-font-size) 1.375rem
$ids-text-lead-font-family
 var(--ids-text-lead-font-family) If Sans
$ids-text-lead-line-height
 var(--ids-text-lead-line-height) 2rem
Aa$ids-text-lead-font-weight
 var(--ids-text-lead-font-weight) 70
Edit this section, Opens in new window

App development

For application development, we also expose tokens for native app development, like Android and IOS. We also expose tokens for JavaScript development.

JavaScript

We expose this file: @ids-core/typography/src/typography/variables/js/variables.esm.js, in this format:

…
"size"
:
{
    "font"
:
    {
        "14"
    :
        {
            "value"
        :
            "0.875rem",
                "comment"
        :
            "14 pixels",
                "filePath"
        :
            "./src/tokens/font-size.json",
                "isSource"
        :
            true,
                "original"
        :
            {
                "value"
            :
                "0.875rem",
                    "comment"
            :
                "14 pixels"
            }
        ,
            "name"
        :
            "SizeFont14",
                "attributes"
        :
            {
                "category"
            :
                "size",
                    "type"
            :
                "font",
                    "item"
            :
                "14"
            }
        ,
            "path"
        :
            [
                "size",
                "font",
                "14"
            ]
        }
    ,
    …
    }
  …
}
…

This can be used like so:

import typographyTokens from '@ids-core/typography/src/typography/variables/js/variables.module.js';

const myTitle = ({ title }) => (<h1 style={{ fontSize: typographyTokens.size.font.14.value }})>
{
    title
}
</h1>)
;

And we also expose this file: @ids-core/typography/src/typography/variables/js/variables.esm.js, in this format:

…
export const SizeFont20px = "20rem"; // 1.25rem
export const SizeFont22px = "22rem"; // 1.375rem
export const SizeFont24px = "24rem"; // 1.5rem
export const SizeFont26px = "26rem"; // 1.625rem
export const SizeFont28px = "28rem"; // 1.75rem
export const SizeFont30px = "30rem"; // 1.875rem
…

This can be used like so:

import { SizeFont26px } from '@ids-core/typography/src/typography/variables/js/variables.esm.js';

const myTitle = ({ title }) => (<h1 style={{ fontSize: SizeFont26px }})>
{
    title
}
</h1>)
;

Android

For Android development, you might be interested in this file: @ids-core/typography/src/variables/android/font_dimens.xml, in this format:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <dimen name="size_font_14">14.00sp</dimen><!-- 14 pixels -->
    <dimen name="size_font_15">15.00sp</dimen><!-- 15 pixels -->
    <dimen name="size_font_16">16.00sp</dimen><!-- 16 pixels -->
    <dimen name="size_font_18">18.00sp</dimen><!-- 18 pixels -->
    <dimen name="size_font_20">20.00sp</dimen><!-- 20 pixels -->
    <dimen name="size_font_22">22.00sp</dimen><!-- 22 pixels -->
    <dimen name="size_font_24">24.00sp</dimen><!-- 24 pixels -->
    <dimen name="size_font_26">26.00sp</dimen><!-- 26 pixels -->
    <dimen name="size_font_28">28.00sp</dimen><!-- 28 pixels -->
    <!-- ... -->
</resources>

IOS

For IOS development, we have IfDesignSystemFontSize.h and IfDesignSystemFontSize.m under src/variables/ios, and IfDesignSystem.swift and IfDesignSystemFontSize.swift under src/variables/ios-swift.

Flutter

We also have ifdesignsystem.dart under src/variables/flutter.

Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

  • The first and last segment in a segment group have rounded corners. Size

variations of segments- large, small, x-small.

  • Merged PR 101974: feat(segmented-control): VID update for segmented control (addab60), closes #686994 #686994

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.19.0 (2022-04-13)

Documentation Updates

  • ✏️ Update documentation elements to prepare for Dark Mode (7b0b859) . We are utilizing some of the IDS components when documenting our components, and these elements needed to be updated with the .ids-doc CSS flag so we can add themes to them. In the same change, we also ammended some of the documentation to be more up to speed with current state.

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.18.2 (2022-04-11)

Documentation Updates

  • ✏️ Add correct variables for typograpjhy (9d9b047)

14.16.0 (2022-04-07)

Bug Fixes

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.11.0 (2022-03-16)

Bug Fixes

  • 🐛 Remove the reset mixin from typography reset, it was bad (0155383)

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.6 (2022-03-01)

Bug Fixes

  • 🐛 Add back margin to paragraphs with if text body and p (01638a7) , closes #561534

14.8.5 (2022-02-24)

Bug Fixes

  • use correct name reference (487f6aa)

build (039d811)

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

14.5.0 (2022-02-15)

Code Refactoring

14.4.0 (2022-02-11)

Features

  • Add heading and text tokens (a2a0f43)

  • Add new token hierarchy to typography (bf7688f)

Bug Fixes

  • Fix variable generation (4abd7eb)

  • Make sure CSS variables are imported separately, so we can run the tests (26ff650)

Code Refactoring

  • forgot to addd the split up files (1458d54)

  • Separate mixins (5ff1b45)

  • split up files (e0597e0)

  • Use CSS variables (4f87dac)

  • Use filter, remove sketch generation (82fbc41)

  • Use proper order for including required mixins and variables (9620151)

  • add new dev server (8773fde)

  • Regenerate variables, remove CSS variable import from variables.* (ceeeee6)

reinstall (147df55)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

  • 💡 Change focus styles, remove whatinput (75fd31b) , closes #505205

14.2.0 (2021-12-08)

Bug Fixes

  • 🐛 Use correct heading hierarchy for design documentation (6c54ae4) , closes #511303

  • rebuild and reinstall (f9fb687)

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core
  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
  • 🧨 Navigation structure has now changed. Please see release notes!

Bug Fixes

  • 🐛 Be more specific with selector (527fa24)

Documentation Updates

  • ✏️ Adjust documentation (8e77c36)

  • ✏️ Adjust documentation, examples etc (d161cd3)

  • ✏️ Clean up for frontmatter and token generation (5fff306) , closes #490579

  • ✏️ Documentation adjustments (73c09e3) , closes #467386

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Separate out CSS documentation (0f43297) , closes #467386

  • ✏️ Update links and change navigation structure (0bfd27d) , closes #490579

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • Install missing dependencies (be7f1b8)

  • prepare for merge (0184490)

  • rebuild after fixing navigation structure (3995914)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

13.12.0 (2021-10-22)

Bug Fixes

  • 🐛 util (bc7fb32) , closes #491994 . Fix sass compiler calc function precision

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

13.5.0 (2021-09-06)

Documentation Updates

  • ✏️ Update documentation for navigation card change (0379db5)

  • 🤖 Use node v14 (4009973)

bootstrap (d23e139)

  • 🤖 Replace node-sass with dart-sass (078262c) , closes #434376

  • 🤖 Use correct order for diff (cc6a4fd)

13.0.0 (2021-08-25)

⚠ BREAKING CHANGES

  • 🧨 We are removing IE11 support

  • 🤖 Remove IE11 support for typography (fcd4e91) , closes #336127

12.14.4 (2021-08-16)

Bug Fixes

  • do not blacklist src/fonts (b2419af)

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642) , closes #354912

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • 🤖 Reinstall (e660696)

  • 🤖 Update published date (61e7ccf)

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)

  • 🐛 We don't need lastModified (e458a12)

12.1.0 (2021-05-07)

Documentation Updates

  • ✏️ Documentation fixes (01216c0)

Miscellaneous chores

  • 🤖 Improve look and feel of tokens (93a6322)

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Teasers are no more. It has been replaces with Lifestyle Navigational Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 Footer is now renamed to Global Footer
  • 🧨 Crosslinks have seized to exist. They are all extracted into separate components. This commit converts crosslink buttons into the new component Shortcuts

Bug Fixes

  • 🐛 Do not add generated date on generated files (2708429)

  • 🐛 Do not generate a file header for tokens (ab5d86f)

  • 🐛 Fix old bug where we used wrong font-family for headings (c57789c)

  • 🐛 Remove px values from mobile tokens (bdd688c)

  • 🐛 Update references (c08f107)

  • 🐛 Use correct unit for line height in basekick (4790ec1)

Documentation Updates

  • ✏️ Rearrange documentation structure (47ea594)

Code Refactoring

Miscellaneous chores

  • 🤖 Add style-dictionary config and preliminary tokens (6800642)

  • 🤖 Convert typography tokens from theo to SD (e48f255)

  • 🤖 Convert util tokens from theo to style-dictionary (99fb4f5)

  • 🤖 Finalize breakpoint token conversion (f50ea0d)

  • 🤖 Rebuild after fix (a0d6e16)

  • 🤖 Rebuild after fix (9e0c919)

  • 🤖 Rebuild after fix (501a947)

  • 🤖 regenerate typography variables (b0678f4)

  • 🤖 Regeneration of variable files without dates (5182c6e)

  • 🤖 Reinstall (2c763ea)

  • 🤖 Reinstall (69e1a5b)

  • 🤖 Update all design token references (c640d15)

  • 🤖 Update references to util variables (b79ec36)

  • 🤖 Updating links (70f166e)

  • Adjust npm scripts and regenerate (b731d5c)

rebuild (7edb430)

  • 🤖 Rename Change Log to Changelog (d412e63)

  • 🤖 Remove all references to sketch (35fc554) , closes #339203

  • 🤖 Update package fields (200c0af)

10.0.0 (2021-02-15)

⚠ BREAKING CHANGES

  • 🧨 form-group is now renamed to input-wrapper, a more logical name

Code Refactoring

  • 💡 Rename form-group to input-wrapper (7ee3bae)

  • reinstall packages (fcfacf4)

  • 🤖 Use a more distint class name for doc crosslink links (2694867)

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600) , closes #309650

6.43.3 (2020-11-03)

Miscellaneous chores

6.43.0 (2020-10-27)

Documentation Updates

  • ✏️ Updated typography docs (1d772aa)

  • 🤖 Rename repository from guybrush to if-design-system (c18bccd)

reinstall (2cefe15)

6.36.0 (2020-10-12)

Miscellaneous chores

  • 🤖 Add what-input to demo and dev files (56801b7)

6.31.0 (2020-09-25)

Features

  • 🎸 Add textMetaBold mixin to typography (22fffde)

changes (13c3c5e)

6.29.4 (2020-09-09)

Documentation Updates

  • ✏️ Use correct strong element with if class (6b484df)

6.29.3 (2020-09-07)

Documentation Updates

  • ✏️ Merge atoms/molecules/organisms into components (90ed590)

6.26.12 (2020-08-03)

Documentation Updates

  • ✏️ Update documentation for the new registry (3e7ba20)

Miscellaneous chores

  • 🤖 lerna bootstrap (d835ec9)

  • 🤖 Temporarily remove package-lock.json-files (87b3f7f)

  • 🤖 Update references to new scope (b5575dd)

6.26.10 (2020-07-14)

Miscellaneous chores

  • 🤖 Manually update some links (ecc0133)

  • 🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)

6.25.2 (2020-07-08)

Documentation Updates

  • ✏️ Update documentation for typography (0754e6e)

Miscellaneous chores

  • 🤖 Update demo for typography and add dev (a32bd96)

6.25.1 (2020-07-07)

Bug Fixes

  • 🐛 Forgot to add correct font-weight (2afbf4f)

6.25.0 (2020-07-07)

Code Refactoring

  • 💡 Adjust typography, mostly regarding mobile (4917812) , closes #260584

Documentation Updates

  • ✏️ Use domain links for assets (59ace1c)

6.23.0 (2020-07-01)

Miscellaneous chores

reinstall (1ab1527)

6.22.0 (2020-07-01)

Documentation Updates

  • ✏️ Update documentation layout (816053b)

Miscellaneous chores

  • 🤖 Search and replace old color usage (3e5abb0)

6.21.6 (2020-06-11)

Miscellaneous chores

  • 🤖 Remove .zip files from .npmignore (b3bc7dc)

6.21.0 (2020-06-04)

Documentation Updates

  • ✏️ Improvements for documentation site (83680e4)

6.19.0 (2020-06-02)

Documentation Updates

  • ✏️ Add documentation regarding token files and classes (130ebaa)

Miscellaneous chores

  • 🤖 Give notice that files are not ment to be edited (a6cebb9)

reinstall (3416c65)

6.18.0 (2020-05-26)

Documentation Updates

  • ✏️ Update documentation for component typography (ad5052b)

6.17.4 (2020-05-25)

Miscellaneous chores

  • 🤖 Some documentation cleanup (22e125c)

6.16.0 (2020-05-19)

Features

  • 🎸 Add text disclaimer text helper (41432b9)

Documentation Updates

  • ✏️ Add componentname to frontmatter for typo index (cc2e635)

6.15.5 (2020-05-15)

Miscellaneous chores

  • prepped and ready to separate documentation site from code (d3e1fd9)

  • pruning and reinstalling (5cda0bc)

reinstall (939dae6)

reinstall (cae55fb)

  • Remove livingcss data and add frontmatter data (b384946)

6.15.4 (2020-05-14)

Miscellaneous chores

6.15.2 (2020-05-11)

Miscellaneous chores

6.15.0 (2020-05-07)

Miscellaneous chores

6.11.0 (2020-04-22)

Bug Fixes

  • 🐛 Add correct margins for headings and add mixins for type (8939f6b)

  • 🐛 Add sr only text for footer logo link (2971dd9)

6.10.9 (2020-04-22)

Miscellaneous chores

  • 🤖 Add *.zip-files to .npmignore-files (062b8b0)

  • 🤖 Remove references to verb in package.json files (cfdaaec)

6.10.6 (2020-04-17)

Miscellaneous chores

6.9.1 (2020-04-16)

Documentation Updates

  • ✏️ Use correct badge color in README.md (03b563e)

6.9.0 (2020-04-15)

Features

  • 🎸 Add token documentation generation (172f997)

6.6.0 (2020-04-09)

Documentation Updates

  • ✏️ Change edit this document to edit this section (791b646)

  • ✏️ Remove remaining tryme badges (ebaf0c7)

6.5.4 (2020-04-08)

Bug Fixes

6.5.3 (2020-04-06)

Documentation Updates

  • ✏️ Some more sg updates and tweaks (d1d6802)

6.3.4 (2020-04-01)

Miscellaneous chores

  • 🤖 Use more of if styling on documentation site (2eaf386)

6.3.2 (2020-03-31)

Documentation Updates

  • ✏️ Replace sg.message with if.notification (5d1aa99)

5.0.4 (2020-03-14)

Miscellaneous chores

  • 🤖 Delete really old install files, update README files (c5d4893)

  • 🤖 Remove .npmrc fles (4e26249)

5.0.1-alpha.160 (2020-03-12)

Miscellaneous chores

5.0.1-alpha.151 (2020-03-05)

Features

  • 🎸 Add new typography rule for captions. Refactor weights (a033f4e) . and updated documentation

Bug Fixes

  • 🐛 Use correct naming for italic font faces (f5ac5f2)

Documentation Updates

  • ✏️ Fix typo in heading large documentation (865fcee)

  • ✏️ Update typography documentation (5fd7150)

Miscellaneous chores

  • 🤖 Build typography variables after font-face fix (8a42118)

5.0.1-alpha.149 (2020-03-05)

Miscellaneous chores

  • 🤖 Adjust line-heights (2d3e66e)

  • 🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables

  • Align typography to baseline. First attempt (f4447e9)

5.0.1-alpha.147 (2020-03-02)

Features

  • 🎸 Make the documentation a bit more responsive (2d4278e)

Miscellaneous chores

5.0.1-alpha.143 (2020-02-26)

Documentation Updates

5.0.1-alpha.133 (2020-02-24)

Features

  • 🎸 Add font-display: swap on variable font-faces (5f05122)

5.0.1-alpha.128 (2020-02-19)

Features

  • 🎸 Add fallback font family for regular (e0e567c)

  • 🎸 Add typography less files, and preprocessor tests (a575382)

5.0.1-alpha.127 (2020-02-18)

Documentation Updates

  • ✏️ Add some icon to footer in all demo and doc files (f2bdaae)

5.0.1-alpha.120 (2020-02-17)

Miscellaneous chores

  • 🤖 Continue to work on baseline grid (164a5ff)

  • 🤖 Started to adhere to new baseline grid (7f5a270)

5.0.1-alpha.117 (2020-02-06)

Documentation Updates

  • ✏️ Add edit links to documentation files (7c6e770)

5.0.1-alpha.115 (2020-02-05)

Documentation Updates

  • ✏️ Update documentation examples to include if classname (80cf4ac)

5.0.1-alpha.110 (2020-01-21)

Documentation Updates

  • ✏️ Use correct header names (0fa61d2)

Miscellaneous chores

  • 🤖 Attempting to add sketch for typo (2b26d62)

  • testing sketch (003a233)

5.0.1-alpha.106 (2020-01-14)

Features

  • 🎸 Add support for less for hero, core, typo and breakpoin (237b71c)

5.0.1-alpha.94 (2019-12-12)

Miscellaneous chores

  • 🤖 Rename mooboard to hero (f7f2fae)

5.0.1-alpha.87 (2019-12-04)

Features

  • 🎸 Add new font-weight (08538fd)

Bug Fixes

5.0.1-alpha.81 (2019-12-03)

Code Refactoring

  • 💡 Refactor typography, move extra styles into main (ec6e2e1)

5.0.1-alpha.79 (2019-12-03)

Documentation Updates

  • ✏️ Scope all examples to .if (26bd7cd)

5.0.1-alpha.70 (2019-11-28)

Miscellaneous chores

  • 🤖 Remove polymer, updated styling accordingly (04e1941)

5.0.1-alpha.67 (2019-11-26)

Bug Fixes

  • 🐛 Use package-based imports (6822233)

5.0.1-alpha.64 (2019-11-26)

Bug Fixes

  • 🐛 Remove text-align from mixin, update mixins (ec24677)

5.0.1-alpha.58 (2019-11-22)

Features

  • 🎸 Remove normalize.css (2c23c2b)

Miscellaneous chores

5.0.1-alpha.56 (2019-11-22)

Bug Fixes

  • 🐛 Increase specificity on center class (90c10c2)

5.0.1-alpha.53 (2019-11-13)

Features

  • 🎸 Add IE11 support for typography (42e98eb)

5.0.1-alpha.45 (2019-11-08)

Features

  • 🎸 Add icon and util scss files (129bdb4)

  • 🎸 Add scss support for typography (5d20f10)

Miscellaneous chores

  • 🤖 Start separating scss files from stylus (f38367c)

5.0.1-alpha.44 (2019-11-08)

Features

  • 🎸 Add strong attribute styling (d9a0f7d)

  • 🎸 Update and add center classes for layout (85f0d3f)

Documentation Updates

  • ✏️ Add reference to body text demo (73848d9)

Miscellaneous chores

  • 🤖 Add body text demo and update typo demo (ea06bc5)

5.0.1-alpha.43 (2019-11-07)

Miscellaneous chores

  • 🤖 Finished adding desktop styles for crosslinks (62f11f4)

5.0.1-alpha.42 (2019-11-05)

Documentation Updates

  • ✏️ Update documentation for teasers (896ed00)

Miscellaneous chores

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

  • 🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.35 (2019-11-01)

Features

  • 🎸 Add first iteration of moodboards (f73703d)

  • 🎸 Add moodboard (c373c52)

Code Refactoring

5.0.1-alpha.34 (2019-10-31)

Features

  • 🎸 Add support for demos (3a07cbe) . Also added demo for typography and set default alignment to left for headings

5.0.1-alpha.32 (2019-10-31)

Miscellaneous chores

  • 🤖 Update components and documentation from sketches (1b8b6f6)

5.0.1-alpha.30 (2019-10-30)

Miscellaneous chores

5.0.1-alpha.29 (2019-10-29)

Miscellaneous chores

  • 🤖 Use data-attributes instead of classes for sandbox (deea335)

5.0.1-alpha.24 (2019-10-25)

Features

  • 🎸 Add styling for links (be974e5)

5.0.1-alpha.23 (2019-10-23)

Bug Fixes

5.0.1-alpha.22 (2019-10-23)

Documentation Updates

  • ✏️ Update VID documentation (3b1fdd7) . Updated from pdf file. Added .ase file downloads, logotype downloads

5.0.1-alpha.21 (2019-10-22)

Bug Fixes

5.0.1-alpha.20 (2019-10-22)

Miscellaneous chores

5.0.1-alpha.19 (2019-10-19)

Features

  • 🎸 Add basekick (2d623c9)

  • 🎸 Add variables for pixel values (8a6823e)

Bug Fixes

  • 🐛 Remove px string from px variables (edffad8)

Code Refactoring

  • 💡 Refactor (7e327b3)

  • 💡 Use variables for font weights (27227ba)

Documentation Updates

  • ✏️ Add a learn more section (c5baa10)

  • ✏️ Rearrange html examples for usage (e366ec6)

  • ✏️ Update documentation (70976d7)

  • ✏️ Update documentation for typography (21ca4af)

Miscellaneous chores

  • 🤖 Add missing files (b27765a)

  • 🤖 Finalize text flwo for now (73980c7)

5.0.1-alpha.18 (2019-10-16)

Documentation Updates

  • ✏️ Update spec documentation for text (7446db6)

Miscellaneous chores

  • 🤖 Add mobile .ai asset for typo (ed429d5)

5.0.1-alpha.17 (2019-10-16)

Documentation Updates

  • ✏️ Make figure containing typescale transparent (b082e99)

5.0.1-alpha.13 (2019-10-16)

Features

  • 🎸 Finalize the latest update to typography (98be68d)

  • 🎸 First round updating typography (87c5f04)

Miscellaneous chores

  • 🤖 Adjust documentation for headings (d04dbff)

  • 🤖 npm i && lerna bootstrap (0542f00)

5.0.1-alpha.9 (2019-10-14)

Miscellaneous chores

  • 🤖 More updates to layout and documentation PT 4 (4ccd4a0)

  • 🤖 Update layout and hierarchy PT2 (860aef5)

5.0.1-alpha.8 (2019-10-09)

Miscellaneous chores

5.0.1-alpha.6 (2019-10-08)

Features

  • 🎸 Add design tokens to typography (384829e)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

  • 🤖 lerna bootstrap (2aba4f1)

  • 🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

  • 🎸 Documentation update and add some icons (df1cc97)

Documentation Updates

  • ✏️ Update documentation styling (29baea4)

Miscellaneous chores

  • 🤖 lerna bootstrap (50ad9ae)

  • 🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Replace .gb prefix with .if (c5e7edb)

  • 🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font files (4bf2ed7)

  • 🎸 Add new font styles (1c3e3b7)

Documentation Updates

  • ✏️ Add more documentation, add otf files (6b64073)

  • ✏️ Update documentation (d06d70e)

Miscellaneous chores

  • 🤖 Update docs for typo, update tempate (ed99ff5)

5.0.1-alpha.9 (2019-10-14)

Miscellaneous chores

  • 🤖 More updates to layout and documentation PT 4 (4ccd4a0)

  • 🤖 Update layout and hierarchy PT2 (860aef5)

5.0.1-alpha.8 (2019-10-09)

Miscellaneous chores

5.0.1-alpha.6 (2019-10-08)

Features

  • 🎸 Add design tokens to typography (384829e)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

  • 🤖 lerna bootstrap (2aba4f1)

  • 🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

  • 🎸 Documentation update and add some icons (df1cc97)

Documentation Updates

  • ✏️ Update documentation styling (29baea4)

Miscellaneous chores

  • 🤖 lerna bootstrap (50ad9ae)

  • 🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Replace .gb prefix with .if (c5e7edb)

  • 🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font files (4bf2ed7)

  • 🎸 Add new font styles (1c3e3b7)

Documentation Updates

  • ✏️ Add more documentation, add otf files (6b64073)

  • ✏️ Update documentation (d06d70e)

Miscellaneous chores

  • 🤖 Update docs for typo, update tempate (ed99ff5)

5.0.1-alpha.8 (2019-10-09)

Miscellaneous chores

5.0.1-alpha.6 (2019-10-08)

Features

  • 🎸 Add design tokens to typography (384829e)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Miscellaneous chores

  • 🤖 lerna bootstrap (2aba4f1)

  • 🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

  • 🎸 Documentation update and add some icons (df1cc97)

Documentation Updates

  • ✏️ Update documentation styling (29baea4)

Miscellaneous chores

  • 🤖 lerna bootstrap (50ad9ae)

  • 🤖 Remove all traces of JavaScript-files (dfae88f) . No longer supplied

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Replace .gb prefix with .if (c5e7edb)

  • 🤖 Reset CHANGELOG.md files (63f0ecd)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font files (4bf2ed7)

  • 🎸 Add new font styles (1c3e3b7)

Documentation Updates

  • ✏️ Add more documentation, add otf files (6b64073)

  • ✏️ Update documentation (d06d70e)

Miscellaneous chores

  • 🤖 Update docs for typo, update tempate (ed99ff5)

5.0.0 (2019-09-11)

Miscellaneous chores

  • 🤖 Update colors, and documentation (1be93d8)

bootstrap (323a639)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font files (4bf2ed7)

  • 🎸 Add new font styles (1c3e3b7)

Documentation Updates

  • ✏️ Add more documentation, add otf files (6b64073)

  • ✏️ Update documentation (d06d70e)

Miscellaneous chores

  • 🤖 Update docs for typo, update tempate (ed99ff5)

4.2.0 (2019-07-08)

Features

  • 🎸 Add new font files (4bf2ed7)

  • 🎸 Add new font styles (1c3e3b7)

Documentation Updates

  • ✏️ Add more documentation, add otf files (6b64073)

  • ✏️ Update documentation (d06d70e)

Miscellaneous chores

  • 🤖 Update deps (2e84691)

  • 🤖 Update docs for typo, update tempate (ed99ff5)

3.1.6 (2019-04-12)

Documentation Updates

  • ✏️ Clarify usage of npm token, and change name to gb (224fe32)

3.0.0 (2019-01-15)

⚠ BREAKING CHANGES

  • Class syntax has completely changed.

Features

  • 🎸 Scoping down guybrush (33e0d71)

2.7.2 (2018-11-21)

Bug Fixes

  • 🐛 Remove all references to verb (2397d6b)

2.6.2 (2018-11-19)

Miscellaneous chores

  • 🤖 Remove references to guybrush in documentation, for nw (002e662)

2.6.1 (2018-11-19)

Documentation Updates

2.4.6 (2018-10-26)

Documentation Updates

  • ✏️ Update documentation to reflect sandboxed examples (c16884f)

1.18.2 (2018-09-19)

Miscellaneous chores

  • 🤖 Make gulp run more silent (56e050e)

1.18.1 (2018-09-17)

Miscellaneous chores

  • 🤖 Add a .npmrc into each module (eed608f)

  • release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

  • release: :bookmark: publish v1.18.0 (aa3271d)

1.17.1 (2018-09-18)

Miscellaneous chores

  • release: :bookmark: publish v1.17.1 (2d8219c)

1.18.1 (2018-09-17)

Miscellaneous chores

  • 🤖 Add a .npmrc into each module (eed608f)

  • release: :bookmark: publish v1.18.1 (f8aed44)

1.18.0 (2018-09-17)

Miscellaneous chores

  • release: :bookmark: publish v1.18.0 (aa3271d)

1.17.0 (2018-09-10)

Miscellaneous chores

  • release: :bookmark: publish v1.17.0 (01db781)

1.15.0 (2018-09-07)

Miscellaneous chores

  • release: :bookmark: publish v1.15.0 (31be150)

1.14.0 (2018-09-06)

Miscellaneous chores

  • release: :bookmark: publish v1.14.0 (7b15e64)

1.13.0 (2018-09-04)

Features

  • 🎸 Add helper class for light italic 100 (2d45b4d)

Code Refactoring

  • 💡 Ease footprint of modules (70fe5c9)

Miscellaneous chores

  • release: :bookmark: publish v1.13.0 (b99e16d)

1.12.1 (2018-08-23)

Miscellaneous chores

  • 🤖 Some refactoring, added version to bundle, package def (e4ee4a8) . to stylus files, updated prism and templates

  • release: :bookmark: publish v1.12.1 (189057f)

1.12.0 (2018-08-22)

Bug Fixes

  • 🐛 Adjust local font for some families and use double quot (2e96322)

Miscellaneous chores

  • release: :bookmark: publish v1.12.0 (7c44ddc)

1.11.0 (2018-08-21)

Miscellaneous chores

  • packages: don'tuse dist in filename (c65ce81)

  • release: :bookmark: publish v1.11.0 (cbd5359)

1.10.35 (2018-08-20)

Miscellaneous chores

  • release: :bookmark: publish v1.10.35 (719ac06)

1.10.34 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.34 (3af5229)

1.10.33 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.33 (adec027)

1.10.32 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.32 (994e8a8)

1.10.31 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.31 (7a31e83)

1.10.30 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.30 (2fbaba0)

1.10.29 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.29 (d9cdb30)

1.10.28 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.28 (70864a5)

1.10.27 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.27 (4ff395c)

1.10.26 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.26 (30d9bbc)

1.10.25 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.25 (a77f3e4)

1.10.24 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.24 (ff3fe91)

1.10.23 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.23 (a1df933)

1.10.22 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.22 (04a1fbc)

1.10.21 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.21 (94e201d)

1.10.20 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.20 (25c40aa)

1.10.19 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.19 (607b524)

1.10.18 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.18 (ef6b333)

1.10.17 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.17 (5e54e21)

1.10.16 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.16 (479e563)

1.10.15 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.15 (508bffb)

1.10.14 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.14 (585912a)

1.10.13 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.13 (9fc1d4b)

1.10.12 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.12 (e638d67)

1.10.11 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.11 (e329aea)

1.10.10 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.10 (b594d1e)

1.10.9 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.9 (6f68c59)

1.10.8 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.8 (1b7ef57)

1.10.7 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.7 (95bc695)

1.10.6 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.6 (ad7cbab)

1.10.5 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.5 (a7efeed)

1.10.4 (2018-08-17)

Miscellaneous chores

  • release: :bookmark: publish v1.10.4 (4f08bfa)

1.10.3 (2018-08-17)

Documentation Updates

  • ✏️ Update onboarding documentation (505ae9b)

Miscellaneous chores

  • release: :bookmark: publish v1.10.3 (7ca1bcf)

1.10.2 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.2 (781968c)

1.10.1 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.1 (aee140f)

1.10.0 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.10.0 (7dac7da)

  • table: scaffolding (1d06368)

1.9.1 (2018-08-16)

Miscellaneous chores

  • release: :bookmark: publish v1.9.1 (0516f24)

1.9.0 (2018-08-15)

Miscellaneous chores

  • release: :bookmark: publish v1.9.0 (9718b47)

1.8.0 (2018-08-14)

Miscellaneous chores

  • release: :bookmark: publish v1.8.0 (35ff480)

1.7.0 (2018-08-13)

Features

  • typography: Add another helperclass for lightweight hand writing (7cfbaa3)

Miscellaneous chores

  • release: :bookmark: publish v1.7.0 (6e2690f)

1.6.2 (2018-08-13)

Bug Fixes

  • typography: use correct naming for base open sans (688057b)

Code Refactoring

  • 💡 only run clean when explicitly calling build (7bf3d25) . because the components are also building js files that got cleaned.

Miscellaneous chores

  • release: :bookmark: publish v1.6.2 (574ab8c)

1.6.1 (2018-08-09)

Miscellaneous chores

  • packages: bootstrap (4809d81)

  • packages: remove dist files (676d49f)

  • packages: scaffolding (dc5289a)

  • packages: use correct task for fonts (0159794)

  • release: :bookmark: publish v1.6.1 (2e820ce)

  • styleguide: first version of generated styleguide (d92d8b3)

0.1.6 (2018-06-19)

Edit this section, Opens in new window
Contact us, Opens in new window