[component]: List with Numbers

[Cian77]

Description

Open issues:

Design:

• [x] Integrated new typography
• [ ] Spacing is defined
• [ ] Documentation final

Tokens:

• [x] Typography tokens ready

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-170

Tokens

• [x] Tokens for this component are ready

DEVs proposal

Base styles: body Token set name: Elements/ListNumber

• post-list-number-margin-block (padding top/bottom on List simple / Numbers)
• post-list-number-item-gap-block (gap between listItem 1 and listItem 2)
• post-list-number-item-icon-gap-inline (gap between bulletIcon and numberLabel)
• post-list-number-item-icon-size (width of NumberIcon)

Code example:

ol {
  --post-body-line-height: 1.5em;
  --post-list-number-margin-block: 1rem;
  --post-list-number-item-gap-block: 8px;
  --post-list-number-item-icon-size: 32px;
  --post-list-number-item-icon-gap-inline: 8px;

  margin-block-start: var(--post-list-number-margin-block);
  padding-inline-start: calc(
    var(--post-list-number-item-icon-size) +
      var(--post-list-number-item-icon-gap-inline)
  );
  list-style: none;
  counter-reset: list;

  li {
    position: relative;

    &:not(:first-child) {
      margin-block-start: var(--post-list-number-item-gap-block);
    }

    &::before {
      box-sizing: content-box;
      display: block;
      content: "";
      position: absolute;
      right: 100%;
      content: counters(list, ".");
      counter-increment: list;
      margin-inline-end: var(--post-list-number-item-icon-gap-inline);
      min-width: var(--post-list-number-item-icon-size);
      text-align: center;
    }
  }
}

Tasks

### 💻 Tasks
- [x] Review Design (All states present? Possible to implement?)
- [ ] Check if tokens are complete
- [ ] HTML/CSS implementation
- [ ] Documentation in Storybook
- [ ] Visual regression tests
- [ ] Design review

[Vandapanda]

Tokenized according to DEVs proposal + added 2 more tokens for padding in front and after the numbered Item. If not possible to implement just ignore as they are mainly from design side so the number looks better them they are called post.list.number.item.icon.padding.start and post.list.number.item.icon.padding.end