refactor(@vtmn/css): add icon in card component (side-image variant)

[GaspardMathon]

Context

• The side-image variant of the card can have different buttons to handle specific actions.

Does this introduce a breaking change?

• Yes, classes have been renamed to follow a more convenient name. Add some classes.

Other information

• JIRA

@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-card {
  max-width: 100%;
  min-width: min-content;
  border-radius: var(--vtmn-radius_200);
  box-shadow: var(--vtmn-shadow_100);
  position: relative;
  font: var(--vtmn-typo_font-family) var(--vtmn-typo_font-weight--normal);
}

.vtmn-card_content {
  margin: 16px;
  display: flex;
  flex-direction: column;
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-card_content
  > *:not(.vtmn-card_content--title, .vtmn-card_content--body) {
  margin-top: 12px;
}

.vtmn-card_content--title,
.vtmn-card_variant--side-image .vtmn-card_content_body--title {
  font-size: var(--vtmn-typo_title-5-font-size);
  font-weight: var(--vtmn-typo_font-weight--bold);
  min-width: max-content;
}

.vtmn-card_content--body,
.vtmn-card_variant--side-image .vtmn-card_content_body--text {
  font-size: var(--vtmn-typo_text-3-font-size);
}

.vtmn-card,
.vtmn-card_variant--top-image {
  display: flex;
  flex-direction: column;
  height: fit-content;
  background-color: var(--vtmn-semantic-color_background-primary);
}

.vtmn-card > .vtmn-card_image,
.vtmn-card_variant--top-image > .vtmn-card_image {
  width: fit-content;
  height: 100%;
  margin: 16px;
}

.vtmn-card > .vtmn-card_image--full,
.vtmn-card_variant--top-image > .vtmn-card_image--full {
  width: fit-content;
  height: 100%;
  margin: 0;
}

.vtmn-card > .vtmn-card_image--full > img,
.vtmn-card_variant--top-image > .vtmn-card_image--full > img {
  border-radius: var(--vtmn-radius_200) var(--vtmn-radius_200) 0 0;
}

.vtmn-card img,
.vtmn-card_variant--top-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.vtmn-card_image--full > img {
  aspect-ratio: auto;
}

.vtmn-card_variant--side-image {
  display: flex;
  height: min-content;
  flex-direction: column;
  background-color: var(--vtmn-semantic-color_background-primary);
}

.vtmn-card_variant--side-image .vtmn-card_content {
  display: flex;
  flex-direction: row;
  margin: 0;
}

.vtmn-card_variant--side-image .vtmn-card_icons {
  display: flex;
  margin: rem(16px) rem(16px) rem(6px) auto;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: rem(4px);
}

.vtmn-card_variant--side-image .vtmn-card_icons .vtmn-btn span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_title-5-font-size);
}

.vtmn-card_variant--side-image .vtmn-card_content_body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 rem(16px) rem(16px) 0;
}

.vtmn-card_variant--side-image .vtmn-card_content_image {
  align-self: flex-start;
  height: max-content;
  margin: 0 rem(16px) rem(16px) rem(16px);
}

.vtmn-card_variant--side-image .vtmn-card_content_image img {
  min-width: rem(96px);
}

.vtmn-card_variant--side-image .vtmn-card_content_body .vtmn-btn {
  width: fit-content;
}

.vtmn-card_variant--full-image .vtmn-card_image {
  width: 100%;
  height: 100%;
  margin: 0;
}

.vtmn-card_variant--full-image img {
  height: 100%;
  border-radius: var(--vtmn-radius_200);
}

.vtmn-card_variant--full-image > .vtmn-card_content {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  height: auto;
  border-radius: var(--vtmn-radius_200);
  color: var(--vtmn-semantic-color_content-primary-reversed);
}

.vtmn-card_variant--full-image
  > .vtmn-card_content:not(.vtmn-card_content--opaque) {
  background: linear-gradient(
    180deg,
    color-mod(var(--vtmn-semantic-color_background-primary-reversed) alpha(0%))
      20%,
    var(--vtmn-semantic-color_background-primary-reversed) 100%
  );
}

.vtmn-card_variant--full-image > .vtmn-card_content.vtmn-card_content--opaque {
  background-color: hsl(
    var(--vtmn-semantic-color_background-primary-reversed--h)
      var(--vtmn-semantic-color_background-primary-reversed--s)
      var(--vtmn-semantic-color_background-primary-reversed--l) / 60%
  );
}

<div class="block">
  <div class="vtmn-card vtmn-card_variant--side-image">
    <div class="vtmn-card_icons">
      <button
        class="vtmn-btn vtmn-btn_variant--ghost vtmn-btn_size--small vtmn-btn--icon-alone"
        aria-label="add"
      >
        <span class="vtmx-printer-line"></span>
      </button>
      <button
        class="vtmn-btn vtmn-btn_variant--ghost vtmn-btn_size--small vtmn-btn--icon-alone"
        aria-label="add"
      >
        <span class="vtmx-edit-line"></span>
      </button>
      <button
        class="vtmn-btn vtmn-btn_variant--ghost vtmn-btn_size--small vtmn-btn--icon-alone"
        aria-label="add"
      >
        <span class="vtmx-delete-bin-line"></span>
      </button>
    </div>
    <div class="vtmn-card_content">
      <div class="vtmn-card_content_image">
        <img
          src="https://storage.googleapis.com/dkt-design-cdn/images/landscape-placeholder.jpg"
          alt=""
        />
      </div>
      <div class="vtmn-card_content_body">
        <span class="vtmn-card_content_body--title">Card Title</span>
        <span class="vtmn-card_content_body--text">
          A container for content representing a single entity. e.g. a contact,
          article, or task. Lorem ipsum dolor sit amet consectetur adipisicing
          elit.
        </span>
      </div>
    </div>
  </div>
</div>