Esri Text pattern

[alexcarol]

Migrated from: https://github.com/aemsites/esri/issues/32

Implement Esri's text pairing pattern.

Current implementation uses the following classes: .esri-text .esri-text-container, .esri-text__iconContainer, .esri-text__category, .esri-text__title, .esri-text__subtitle, .esri-text__description

/* works with text-pairings.css */
/* Default size +4 */

:root {
  --category-size: var(--font--2);
  --title-size: var(--font-4);
  --subtitle-size: var(--font-2);
  --description-size: var(--font-0);
  --content-spacing: var(--space-2);
  --content-end-spacing: var(--space-6);
}

.esri-text-container {
  max-width: 80ch;
  word-break: break-word;
  margin-bottom: var(--content-spacing);
}

:is(.text-center, .centered-text, .hbgv2-text--centered) .esri-text-container {
  margin-inline: auto;
}

.esri-text__iconContainer {
  margin-block-end: var(--content-spacing);
}

.esri-text__iconContainer :where(svg, .icon-ui-svg, .icons-ui-svg, .svg) {
  inline-size: 48px;
  block-size: 48px;
}

.esri-text__iconContainer :where(img) {
  block-size: 48px;
  inline-size: auto;
}

.esri-text__category {
  font-weight: var(--calcite-font-weight-bold);
  text-transform: uppercase;
  color: var(--calcite-ui-text-2);
  font-size: var(--category-size);
  margin-block-end: var(--content-spacing);
}

.esri-text__title {
  color: var(--calcite-ui-text-1);
  font-size: var(--title-size);
  margin-block-end: var(--content-spacing);
}

.esri-text__subtitle {
  color: var(--calcite-ui-text-2);
  font-size: var(--subtitle-size);
  margin-block-end: var(--content-spacing);
}

.esri-text__description {
  color: var(--calcite-ui-text-1);
  font-size: var(--description-size);
  margin-block-end: var(--content-end-spacing);
}

html[dir="rtl"] .esri-text__description p[dir=ltr] {
  display: table;
}

Text pairings

/* Size 0-4 = cards only, see card-pairings.css */
/* Size 3-8 = components */

:where(.size-8) {
    --category-size: var(--font-0);
    --title-size: var(--font-8);
    --subtitle-size: var(--font-4);
    --description-size: var(--font-2);
    --content-spacing: var(--space-3);
    --content-end-spacing: var(--space-10);
}

:where(.size-7) {
    --category-size: var(--font--1);
    --title-size: var(--font-7);
    --subtitle-size: var(--font-4);
    --description-size: var(--font-2);
}

:where(.size-6) {
    --category-size: var(--font--1);
    --title-size: var(--font-6);
    --subtitle-size: var(--font-3);
    --description-size: var(--font-2);
}

:where(.size-5) {
    --category-size: var(--font--1);
    --title-size: var(--font-5);
    --subtitle-size: var(--font-3);
    --description-size: var(--font-1);
}

:where(.size-7, .size-6, .size-5) {
    --content-spacing: var(--space-2);
    --content-end-spacing: var(--space-8);
}

:where(.size-4) {
    --category-size: var(--font--2);
    --title-size: var(--font-4);
    --subtitle-size: var(--font-2);
    --description-size: var(--font-0);
}

:where(.size-3) {
    --category-size: var(--font--2);
    --title-size: var(--font-3);
    --subtitle-size: var(--font-1);
    --description-size: var(--font-0);
}

:where(.size-4, .size-3) {
    --content-spacing: var(--space-2);
    --content-end-spacing: var(--space-6);
}

:where(.size-2) {
    --category-size: var(--font--2);
    --title-size: var(--font-2);
    --subtitle-size: var(--font--1);
    --description-size: var(--font--1);
}

:where(.size-1) {
    --category-size: var(--font--2);
    --title-size: var(--font-1);
    --subtitle-size: var(--font--1);
    --description-size: var(--font--1);
}

:where(.size-0) {
    --category-size: var(--font--3);
    --title-size: var(--font-0);
    --subtitle-size: var(--font--2);
    --description-size: var(--font--1);
}

:where(.size-2, .size-1, .size-0) {
    --content-spacing: var(--space-2);
    --content-end-spacing: var(--space-5);
}

/* Icon size */
:where(.size-6, .size-7, .size-8) .esri-text__iconContainer :is(img, svg, .icon-ui-svg, .icons-ui-svg) {
    inline-size: 64px;
    block-size: 64px;
}