CT3-516: Migrate @ot-react-ui/typography-desktop to design-tokens

[karuto]

Hi all, as part of Content team's Q2 roadmap, we are migrating @ot-react-ui/typography-desktop into this repo. I have presented this proposal twice already during the previous Buffet / OTKit meetings dating all the way back to Q4 2021, here are some docs I drafted back then to provide context on the problems we were trying to solve.

@ot-react-ui/typography-desktop is basically a small static util that generates a set of mixin groupings based on the existing token values in otkit/typography-desktop, you can read about our motivation and context in depth in the README. That's it, nothing fancy about it. It has been used for thousands of times across CFE, OT4R (monorepo) and many other projects (see Known Consumers doc).

I think the utils folder in design-tokens is a perfect place for it, I have set the script to run every time the entire OTKit is built or released. This solution is identical to the current build-icons tool in the utils folder, which generates composites / mixins based on current token assets - build-typography does basically the exact thing, but for typography-desktop.

When the util script is executed, it generates an index.css (we can debate on the name, I don't have fixations on what we should call the output) file inside the otkit/typography-desktop repo which looks like this:

.xxxsmall-regular {
  font-size: 10px;
  font-weight: normal;
  line-height: 12px;
}

.xxsmall-regular {
  font-size: 12px;
  font-weight: normal;
  line-height: 16px;
}

.xsmall-bold {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

.xsmall-medium {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.xsmall-regular {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}

.small-regular {
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
}

.small-medium {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.small-bold {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
}

.medium-bold {
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
}

.large-medium {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.large-bold {
  font-size: 24px;
  font-weight: bold;
  line-height: 28px;
}

.xlarge-bold {
  font-size: 32px;
  font-weight: bold;
  line-height: 36px;
}

.xxlarge-bold {
  font-size: 48px;
  font-weight: bold;
  line-height: 56px;
}