[element]: Bullet list

[Cian77]

Description

Open issues:

Design

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

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/ListBullet

• post-list-bullet-margin-block (padding top/bottom on List simple / Bullets)
• post-list-bullet-item-gap-block (gap between listItem 1 and listItem 2)
• post-list-bullet-item-icon-gap-inline (gap between bulletIcon and bulletLabel)
• post-list-bullet-item-icon-size (width of bulletIcon)
• post-list-bullet-item-icon-text-padding-block (padding of bulletLabel)
• post-list-bullet-item-icon-bullet-size (width/height of Bullet)

Code example:

ul {
  --post-body-line-height: 1.5em;
  --post-list-bullet-margin-block: 1rem;
  --post-list-bullet-item-gap-block: 8px;
  --post-list-bullet-item-icon-size: 32px;
  --post-list-bullet-item-icon-gap-inline: 8px;
  --post-list-bullet-item-icon-text-padding-block: 1px;
  --post-list-bullet-item-icon-bullet-size: 8px;

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

  li {
    position: relative;
    padding-block: var(--post-list-bullet-item-icon-text-padding-block);

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

    &::before {
      box-sizing: content-box;
      display: block;
      content: "";
      position: absolute;
      right: 100%;
      margin-block-start: calc(
        var(--post-body-line-height) * 0.5 -
          var(--post-list-bullet-item-icon-bullet-size) * 0.5
      );
      margin-inline-end: calc(
        var(--post-list-bullet-item-icon-size) * 0.5 -
          var(--post-list-bullet-item-icon-bullet-size) * 0.5 +
          var(--post-list-bullet-item-icon-gap-inline)
      );
      width: var(--post-list-bullet-item-icon-bullet-size);
      height: var(--post-list-bullet-item-icon-bullet-size);
      background-color: currentColor;
      border-radius: 50%;
    }
  }
}

Tasks

### 💻 Tasks
- [x] Review Design (All states present? Possible to implement?)
- [ ] #3496
- [ ] Remove all unused scss variables for this element
- [ ] HTML/CSS implementation
- [ ] Documentation in Storybook
- [ ] Design review

[Vandapanda]

Forwarded to @gfellerph for token naming accordingly to todays discussion

[Vandapanda]

@gfellerph What do you need here? Nothing seems to be different than when it got moved to ready for dev