rendered-typography.pr

{*

Injectable blueprint that represents Typography token as CSS string. 
Note that this only converts the value, actual name is provided somewhere else


Source data: Shadow Value (https://developers.supernova.io/design-system-data/tokens/typographies)
Note: Value is passed as `context` property because it is injected

{
  "id": string
  "name": string
  "description": string
  "tokenType": "Typography"
  "origin": ItemOrigin | null
  "value": {
    "font": {
      "family": string,
      "subfamily": string
      "referencedToken": Font | null
    },
    "fontSize": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "letterSpacing": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "lineHeight": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "paragraphIndent": {
      "unit": "px",
      "measure": double
      "referencedToken": Measure | null
    },
    "textDecoration": "None" | "Underline" | "Strikethrough"
    "textCase": "Original" | "Upper" | "Lower" | "Camel"
    "referencedToken": Typography | null
  }
}


Rendered as:

[text]

*}
{[ let fontStyle = "normal" /]}
{[ if ds.isFontItalic(context.font) ]}
  {[ fontStyle = "italic" /]}
{[/]}
font-family: "{{ context.font.family }}";
font-style: {{ fontStyle }};
font-weight: {{ ds.fontWeight(context.font) }};
font-size: {[ inject "rendered-measure" context context.fontSize /]};
{[ if context.lineHeight ]}
line-height: {[ inject "rendered-measure" context context.lineHeight /]};
{[/]}
letter-spacing: {[if (context.letterSpacing.unit === "Percent") ]}
{{ (context.letterSpacing.measure / 100).rounded(2) }}em;
{[ else ]}
{[ inject "rendered-measure" context context.letterSpacing /]};
{[/]}
text-indent: {[ inject "rendered-measure" context context.paragraphIndent /]};