Unnecessary rules in new .coop-t-headline-mega class

In the following lines of the typography.pcss file we don't need text-transform: uppercase; set on the .coop-t-headline-mega class as this headline might sometimes appear lowercase. This was down to my bad instructions. If we want uppercase we should apply the modifier class .coop-t-headline-upper.

The result can be seen on this page where the second Heading Mega is uppercase - it should be lowercase.

There are before and after screenshots included.

Screenshot 2024-09-03 at 16 33 34 Screenshot 2024-09-03 at 16 34 56

The lowercase variation should have a line height of 105% where as upper should always be 100%.

Current CSS:

.coop-t-headline-upper {
  font-family: var(--font-family-headline);
  text-transform: uppercase;
  line-height: 100%;
}

.coop-t-headline-mega {
  font-family: var(--font-family-headline);
  color: var(--color-brand-coop);
  text-transform: uppercase; 
  line-height: 100%;
  font-size: var(--type-headline-mega-xs);

  @media (--mq-small) {
    font-size: var(--type-headline-mega-s);
  }

  @media (--mq-medium) {
    font-size: var(--type-headline-mega-m);
  }
}

Suggested amends:

.coop-t-headline-upper {
// removed font family as this is specified on .coop-t-headline
  text-transform: uppercase;
  line-height: 100%;
}

.coop-t-headline-mega {
  // removed font family as this is specified on .coop-t-headline
  color: var(--color-brand-coop);
   // removed uppercase as this is specified on .coop-t-headline-upper
   // removed line-height as this is specified on .coop-t-headline-upper and .coop-t-headline
  font-size: var(--type-headline-mega-xs);

  @media (--mq-small) {
    font-size: var(--type-headline-mega-s);
  }

  @media (--mq-medium) {
    font-size: var(--type-headline-mega-m);
  }
}

coopdigital / coop-frontend

Unnecessary rules in new .coop-t-headline-mega class #538