Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-7190

Design Tokens refactoring and clean up


    • Icon: Task Task
    • Resolution: Unresolved
    • Icon: Should have Should have
    • None
    • None
    • 8
    • Maintenance


      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;


            dtovbein Dan Tovbein [X] (Inactive)
            dtovbein Dan Tovbein [X] (Inactive)
            0 Vote for this issue
            0 Start watching this issue