Summary

After the latest released version of design tokens into the code, we might want to review the new identity stylesheet. There a lot of tricky implementation we should improve.

About the code

• Review the `--font-family-heading` variable which is assigned to a bunch of non headings elements, like tags or post's metadata.
• Try to edit the code base and include the `_--` in places where the attribute hasn't been added, for example the `font-family` within the `.carousel-captions-wrapper h2` selector.
• Review the `!important` assignment to headings.
• Review the HTML semantics of some blocks. For example, do we need a `<h2>` as the text of each issues of the Issues block?
• Review the take action boxout button. The CTA button shouldn't be positioned as `absolute`.  
• Add enform font family to headings
• Update `className={isCampaign || columns_block_style === LAYOUT_NO_IMAGE ?` from Columns.js since this
• Review the use of campaign themes
• Review the below code from CarouselHeaderStyle.scss

  @include medium-and-up {
    _--  {
      font-size: 1.125rem;     
      line-height: 1.6;
    }
    margin-bottom: 24px;
    display: block;
  }
  
  @include large-and-up {
    _-- {
      font-size: 1.125rem;
    }
  
    margin-bottom: 36px;
    color: $white;
  }
  
  @include x-large-and-up {
    _-- {
      font-size: 1.125rem;     
      line-height: 1.6;   
    }
  }
  

About the design tokens

• Wouldn't we need to add font size tokens for buttons?
• We should create font family tokens for buttons and links. On Figma I see that the TakeActionBoxout button has "/ Button/Button-S /" but the token does not exist.
• Author's meta `font-weight` is set to `600` but there is not `font-weight` token with that value. See ref.
• There is no font-size-l-font-family-tertiary. See here.
• Missing tokens for the accordion
• No tokens related to line-height = 32px from here.
   

    --line-height-l--font-family-primary: 1.75rem;
    --line-height-xl--font-family-primary: 2.25rem;