Text

The Text component displays textual information in a number of optional styles and variants.

You can learn more about this component in the Working with Text article.

Also note that variants of the Text component are also mapped to HtmlTag components. See the variant section to check which variant maps to which HtmlTag.

Custom Variants

In addition to the predefined variants, the Text component supports custom variant names that can be styled using theme variables. This allows you to create application-specific text styles without modifying the component itself.

When you use a custom variant name (one not in the predefined list), the component automatically applies theme variables following the naming pattern: {cssProperty}-Text-{variantName}.

<App>
  <Theme 
    textColor-Text-brandTitle="rgb(41, 128, 185)"
    fontSize-Text-brandTitle="28px"
    fontWeight-Text-brandTitle="bold"
    letterSpacing-Text-brandTitle="2px"
  >
    <Text variant="brandTitle">
      Welcome to Our Application
    </Text>
  </Theme>
</App>

Example: custom variants

<App>
  <Theme 
    textColor-Text-brandTitle="rgb(41, 128, 185)"
    fontSize-Text-brandTitle="28px"
    fontWeight-Text-brandTitle="bold"
    letterSpacing-Text-brandTitle="2px"
  >
    <Text variant="brandTitle">
      Welcome to Our Application
    </Text>
  </Theme>
</App>

In this example, the custom variant brandTitle is styled using theme variables. Any CSS text property can be configured, including textColor, fontSize, fontWeight, fontFamily, textDecoration*, lineHeight, backgroundColor, textTransform, letterSpacing, wordSpacing, textShadow, and more.

Behaviors

This component supports the following behaviors:

Behavior	Properties
Animation	`animation`, `animationOptions`
Bookmark	`bookmark`, `bookmarkLevel`, `bookmarkTitle`, `bookmarkOmitFromToc`
Component Label	`label`, `labelPosition`, `labelWidth`, `labelBreak`, `required`, `enabled`, `shrinkToLabel`, `style`, `readOnly`
Publish/Subscribe	`subscribeToTopic`
Tooltip	`tooltip`, `tooltipMarkdown`, `tooltipOptions`
Styling Variant	`variant`

Properties

`breakMode`

default: "normal"

This property controls how text breaks into multiple lines. normal uses standard word boundaries, word breaks long words to prevent overflow, anywhere breaks at any character, keep prevents word breaking, and hyphenate uses automatic hyphenation. When not specified, uses the default browser behavior or theme variables.

Available values:

Value	Description
`normal`	Uses standard word boundaries for breaking (default)
`word`	Breaks long words when necessary to prevent overflow
`anywhere`	Breaks at any character if needed to fit content
`keep`	Prevents breaking within words entirely
`hyphenate`	Uses automatic hyphenation when breaking words

<App>
  <VStack gap="16px">
    <VStack gap="8px">
      <Text variant="strong">breakMode="normal" (default)</Text>
      <Text
        width="150px"
        backgroundColor="lightblue"
        padding="8px"
        breakMode="normal">
        This text uses standardwordbreaking at natural boundaries 
        like spaces and hyphens.
      </Text>
    </VStack>
    
    <VStack gap="8px">
      <Text variant="strong">breakMode="word"</Text>
      <Text
        width="150px"
        backgroundColor="lightgreen"
        padding="8px"
        breakMode="word">
        This text will breakverylongwordswhenneeded to prevent 
        overflow while preserving readability.
      </Text>
    </VStack>
    
    <VStack gap="8px">
      <Text variant="strong">breakMode="anywhere"</Text>
      <Text
        width="150px"
        backgroundColor="lightyellow"
        padding="8px"
        breakMode="anywhere">
        Thistext willbreakanywhereif neededtofit thecontainer 
        eveninthe middleofwords.
      </Text>
    </VStack>
    
    <VStack gap="8px">
      <Text variant="strong">breakMode="keep"</Text>
      <Text
        width="150px"
        backgroundColor="lightcoral"
        padding="8px"
        breakMode="keep">
        This text will keep verylongwords intact and prevent 
        breaking within words entirely.
      </Text>
    </VStack>
    
    <VStack gap="8px">
      <Text variant="strong">breakMode="hyphenate"</Text>
      <Text
        width="150px"
        backgroundColor="lavender"
        padding="8px"
        breakMode="hyphenate"
        lang="en">
        This text uses automatic hyphenation for 
        supercalifragilisticexpialidocious words.
      </Text>
    </VStack>
  </VStack>
</App>

Example: breakMode

<App>
  <VStack gap="16px">
    <VStack gap="8px">
      <Text variant="strong">breakMode="normal" (default)</Text>
      <Text
        width="150px"
        backgroundColor="lightblue"
        padding="8px"
        breakMode="normal">
        This text uses standardwordbreaking at natural boundaries 
        like spaces and hyphens.
      </Text>
    </VStack>
    
    <VStack gap="8px">
      <Text variant="strong">breakMode="word"</Text>
      <Text
        width="150px"
        backgroundColor="lightgreen"
        padding="8px"
        breakMode="word">
        This text will breakverylongwordswhenneeded to prevent 
        overflow while preserving readability.
      </Text>
    </VStack>
    
    <VStack gap="8px">
      <Text variant="strong">breakMode="anywhere"</Text>
      <Text
        width="150px"
        backgroundColor="lightyellow"
        padding="8px"
        breakMode="anywhere">
        Thistext willbreakanywhereif neededtofit thecontainer 
        eveninthe middleofwords.
      </Text>
    </VStack>
    
    <VStack gap="8px">
      <Text variant="strong">breakMode="keep"</Text>
      <Text
        width="150px"
        backgroundColor="lightcoral"
        padding="8px"
        breakMode="keep">
        This text will keep verylongwords intact and prevent 
        breaking within words entirely.
      </Text>
    </VStack>
    
    <VStack gap="8px">
      <Text variant="strong">breakMode="hyphenate"</Text>
      <Text
        width="150px"
        backgroundColor="lavender"
        padding="8px"
        breakMode="hyphenate"
        lang="en">
        This text uses automatic hyphenation for 
        supercalifragilisticexpialidocious words.
      </Text>
    </VStack>
  </VStack>
</App>

`ellipses`

default: true

This property indicates whether ellipses should be displayed when the text is cropped (true) or not (false).

<App>
  <VStack width="120px">
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1"
      ellipses="false">
      Though this long text does is about to crop!
    </Text>
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1">
      Though this long text does is about to crop!
    </Text>
  </VStack>
</App>

Example: ellipses

<App>
  <VStack width="120px">
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1"
      ellipses="false">
      Though this long text does is about to crop!
    </Text>
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1">
      Though this long text does is about to crop!
    </Text>
  </VStack>
</App>

`maxLines`

This property determines the maximum number of lines the component can wrap to. If there is no space to display all the contents, the component displays up to as many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines.

<App>
  <Text
    maxWidth="120px"
    backgroundColor="cyan"
    color="black"
    value="A long text that will likely overflow"
    maxLines="2" />
</App>

Example: maxLines

<App>
  <Text
    maxWidth="120px"
    backgroundColor="cyan"
    color="black"
    value="A long text that will likely overflow"
    maxLines="2" />
</App>

`overflowMode`

default: "not specified"

This property controls how text overflow is handled. none prevents wrapping and shows no overflow indicator, ellipsis shows ellipses when text is truncated, scroll forces single line with horizontal scrolling, and flow allows multi-line wrapping with vertical scrolling when needed (ignores maxLines). When not specified, uses the default text behavior.

Available values:

Value	Description
`none`	No wrapping, text stays on a single line with no overflow indicator (ignores maxLines)
`ellipsis`	Truncates with an ellipsis (default)
`scroll`	Forces single line with horizontal scrolling when content overflows (ignores maxLines)
`flow`	Allows text to wrap into multiple lines with vertical scrolling when container height is constrained (ignores maxLines)

Here are a few examples.

<App>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    maxLines="2">
    This is a very long text that will be clipped with an 
    ellipsis indicator when it exceeds the specified lines.
  </Text>
</App>

Example: overflowMode not specified (maxlines='2')

<App>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    maxLines="2">
    This is a very long text that will be clipped with an 
    ellipsis indicator when it exceeds the specified lines.
  </Text>
</App>

<App>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="none"
    maxLines="2">
    This is a very long text that will be clipped cleanly without 
    any overflow indicator when it exceeds the specified lines.
  </Text>
</App>

overflowMode='none' (maxlines='2')

<App>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="none"
    maxLines="2">
    This is a very long text that will be clipped cleanly without 
    any overflow indicator when it exceeds the specified lines.
  </Text>
</App>

<App>
  <Text variant="strong">overflowMode="ellipsis" (default, maxlines='1')</Text>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="ellipsis"
    maxLines="1">
    This is a very long text that will show ellipsis when it 
    overflows the container width.
  </Text>

  <Text variant="strong">overflowMode="ellipsis" (default, maxlines='2')</Text>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="ellipsis"
    maxLines="2">
    This is a very long text that will show ellipsis when it 
    overflows the container width.
  </Text>
</App>

overflowMode='ellipsis'

<App>
  <Text variant="strong">overflowMode="ellipsis" (default, maxlines='1')</Text>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="ellipsis"
    maxLines="1">
    This is a very long text that will show ellipsis when it 
    overflows the container width.
  </Text>

  <Text variant="strong">overflowMode="ellipsis" (default, maxlines='2')</Text>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="ellipsis"
    maxLines="2">
    This is a very long text that will show ellipsis when it 
    overflows the container width.
  </Text>
</App>

<App>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="scroll">
    This is a very long text that will enable horizontal scrolling 
    when it overflows the container width.
  </Text>
</App>

overflowMode='scroll'

<App>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="scroll">
    This is a very long text that will enable horizontal scrolling 
    when it overflows the container width.
  </Text>
</App>

<App>
  <Text variant="strong">overflowMode="flow"</Text>
  <Text
    width="200px"
    height="100px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="flow">
    This is a very long text that will wrap to multiple lines and show 
    a vertical scrollbar when the content exceeds the container height. 
    This mode ignores maxLines and allows unlimited text wrapping with 
    vertical scrolling when needed.
  </Text>
  
  <Text variant="strong">overflowMode="flow" (no height constraint)</Text>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="flow">
    This is a very long text that demonstrates flow mode without a 
    height constraint. The text will wrap to multiple lines naturally 
    and the container will grow to accommodate all the content. No 
    scrollbar will appear since there's no height limitation - the text 
    flows freely across as many lines as needed.
  </Text>
</App>

overflowMode='flow'

<App>
  <Text variant="strong">overflowMode="flow"</Text>
  <Text
    width="200px"
    height="100px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="flow">
    This is a very long text that will wrap to multiple lines and show 
    a vertical scrollbar when the content exceeds the container height. 
    This mode ignores maxLines and allows unlimited text wrapping with 
    vertical scrolling when needed.
  </Text>
  
  <Text variant="strong">overflowMode="flow" (no height constraint)</Text>
  <Text
    width="200px"
    backgroundColor="lightblue"
    padding="8px"
    overflowMode="flow">
    This is a very long text that demonstrates flow mode without a 
    height constraint. The text will wrap to multiple lines naturally 
    and the container will grow to accommodate all the content. No 
    scrollbar will appear since there's no height limitation - the text 
    flows freely across as many lines as needed.
  </Text>
</App>

`preserveLinebreaks`

default: false

This property indicates if linebreaks should be preserved when displaying text.

<App>
  <HStack>
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      preserveLinebreaks="true"
      value="(preserve) This long text

      with several line breaks

              does not fit into a viewport with a 200-pixel width." />
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      preserveLinebreaks="false"
      value="(don't preserve) This long text

      with several line breaks

              does not fit into a viewport with a 200-pixel width." />
  </HStack>
</App>

Example: preserveLinebreaks

<App>
  <HStack>
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      preserveLinebreaks="true"
      value="(preserve) This long text

      with several line breaks

              does not fit into a viewport with a 200-pixel width." />
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      preserveLinebreaks="false"
      value="(don't preserve) This long text

      with several line breaks

              does not fit into a viewport with a 200-pixel width." />
  </HStack>
</App>

Note: Remember to use the value property of the Text. Linebreaks are converted to spaces when nesting the text inside the Text component.

`value`

The text to be displayed. This value can also be set via nesting the text into the Text component.

<App>
  <Text value="An example text" />
  <Text>An example text</Text>
</App>

Example: value

<App>
  <Text value="An example text" />
  <Text>An example text</Text>
</App>

`variant`

An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context. In addition to predefined variants, you can specify custom variant names and style them using theme variables with the pattern {cssProperty}-Text-{variantName} (e.g., textColor-Text-brandTitle, fontSize-Text-highlight). See the documentation for a complete list of supported CSS properties.

Available values:

Value	Description
`abbr`	Represents an abbreviation or acronym
`caption`	Represents the caption (or title) of a table
`cite`	Is used to mark up the title of a cited work
`code`	Represents a line of code
`deleted`	Represents text that has been deleted
`em`	Marks text to stress emphasis
`inherit`	Represents text that inherits the style from its parent element
`inserted`	Represents a range of text that has been added to a document
`keyboard`	Represents a span of text denoting textual user input from a keyboard or voice input
`marked`	Represents text which is marked or highlighted for reference or notation
`mono`	Text using a mono style font family
`paragraph`	Represents a paragraph
`placeholder`	Text that is mostly used as the placeholder style in input controls
`sample`	Represents sample (or quoted) output from a computer program
`secondary`	Represents a bit dimmed secondary text
`small`	Represents side-comments and small print
`sub`	Specifies inline text as subscript
`strong`	Contents have strong importance
`subheading`	Indicates that the text is the subtitle in a heading
`subtitle`	Indicates that the text is the subtitle of some other content
`sup`	Specifies inline text as superscript
`tableheading`	Indicates that the text is a table heading
`title`	Indicates that the text is the title of some other content
`var`	Represents the name of a variable in a mathematical expression

Example: variant

HtmlTag Mappings

The table below indicates which Text variant maps to which HtmlTag component.

Variant	Component
`abbr`	abbr
`cite`	cite
`code`	code
`deleted`	del
`inserted`	ins
`keyboard`	kbd
`marked`	mark
`sample`	samp
`sub`	sub
`sup`	sup
`var`	var
`strong`	strong
`em`	em
`paragraph`	p

Events

`contextMenu`

This event is triggered when the Text is right-clicked (context menu).

Signature: contextMenu(event: MouseEvent): void

event: The mouse event object.

Exposed Methods

`hasOverflow`

Returns true when the displayed text overflows its container boundaries.

Signature: hasOverflow(): boolean

Styling

Custom Variant Theme Variables

When using custom variants, you can style them using theme variables with the naming pattern {propertyName}-Text-{variantName}. The following CSS properties are supported:

Theme Variable Name	Description	Example Value
`textColor-Text-{variant}`	Text color	`rgb(255, 0, 0)`, `#ff0000`, `red`
`fontFamily-Text-{variant}`	Font family	`"Arial, sans-serif"`, `monospace`
`fontSize-Text-{variant}`	Font size	`16px`, `1.5rem`, `large`
`fontStyle-Text-{variant}`	Font style	`normal`, `italic`, `oblique`
`fontWeight-Text-{variant}`	Font weight	`normal`, `bold`, `700`
`fontStretch-Text-{variant}`	Font stretch	`normal`, `expanded`, `condensed`
`textDecorationLine-Text-{variant}`	Decoration line type	`none`, `underline`, `overline`, `line-through`
`textDecorationColor-Text-{variant}`	Decoration color	`rgb(255, 0, 0)`, `currentColor`
`textDecorationStyle-Text-{variant}`	Decoration style	`solid`, `dashed`, `dotted`, `wavy`
`textDecorationThickness-Text-{variant}`	Decoration thickness	`2px`, `from-font`, `auto`
`textUnderlineOffset-Text-{variant}`	Underline offset	`5px`, `0.2em`, `auto`
`lineHeight-Text-{variant}`	Line height	`1.5`, `24px`, `normal`
`backgroundColor-Text-{variant}`	Background color	`rgb(255, 255, 0)`, `transparent`
`textTransform-Text-{variant}`	Text transformation	`none`, `uppercase`, `lowercase`, `capitalize`
`letterSpacing-Text-{variant}`	Space between letters	`1px`, `0.1em`, `normal`
`wordSpacing-Text-{variant}`	Space between words	`5px`, `0.2em`, `normal`
`textShadow-Text-{variant}`	Text shadow	`2px 2px 4px rgba(0,0,0,0.5)`
`textIndent-Text-{variant}`	First line indentation	`20px`, `2em`, `0`
`textAlign-Text-{variant}`	Horizontal alignment	`left`, `center`, `right`, `justify`
`textAlignLast-Text-{variant}`	Last line alignment	`left`, `center`, `right`, `justify`
`wordBreak-Text-{variant}`	Word breaking behavior	`normal`, `break-all`, `keep-all`
`wordWrap-Text-{variant}`	Word wrapping	`normal`, `break-word`
`direction-Text-{variant}`	Text direction	`ltr`, `rtl`
`writingMode-Text-{variant}`	Writing mode	`horizontal-tb`, `vertical-rl`, `vertical-lr`
`lineBreak-Text-{variant}`	Line breaking rules	`auto`, `normal`, `strict`, `loose`

<App>
  <Theme 
    textColor-Text-highlight="rgb(255, 193, 7)"
    fontWeight-Text-highlight="bold"
    backgroundColor-Text-highlight="rgba(0, 0, 0, 0.8)"
    padding-Text-highlight="4px 8px"
    textShadow-Text-highlight="0 2px 4px rgba(0,0,0,0.5)"
  >
    <Text variant="highlight">Important Notice</Text>
    <Text variant="highlight">This is Important Too</Text>
  </Theme>
</App>

Example: custom variant styles

<App>
  <Theme 
    textColor-Text-highlight="rgb(255, 193, 7)"
    fontWeight-Text-highlight="bold"
    backgroundColor-Text-highlight="rgba(0, 0, 0, 0.8)"
    padding-Text-highlight="4px 8px"
    textShadow-Text-highlight="0 2px 4px rgba(0,0,0,0.5)"
  >
    <Text variant="highlight">Important Notice</Text>
    <Text variant="highlight">This is Important Too</Text>
  </Theme>
</App>

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-Text	none	none
backgroundColor-Text-code	rgb(from $color-surface-100 r g b / 0.4)	rgb(from $color-surface-100 r g b / 0.4)
backgroundColor-Text-keyboard	rgb(from $color-surface-100 r g b / 0.4)	rgb(from $color-surface-100 r g b / 0.4)
backgroundColor-Text-marked	rgb(from $color-primary-200 r g b / 0.4)	rgb(from $color-primary-400 r g b / 0.4)
borderColor-Text-code	$color-surface-100	$color-surface-100
borderColor-Text-keyboard	$color-surface-300	$color-surface-300
borderRadius-Text	$borderRadius	$borderRadius
borderRadius-Text-code	4px	4px
borderRadius-Text-keyboard	none	none
borderStyle-Text	solid	solid
borderStyle-Text-code	solid	solid
borderStyle-Text-keyboard	none	none
borderWidth-Text	$space-0	$space-0
borderWidth-Text-code	1px	1px
borderWidth-Text-keyboard	1px	1px
direction-Text	none	none
fontFamily-Text	$fontFamily	$fontFamily
fontFamily-Text-code	$fontFamily-monospace	$fontFamily-monospace
fontFamily-Text-codefence	$fontFamily-monospace	$fontFamily-monospace
fontFamily-Text-keyboard	$fontFamily-monospace	$fontFamily-monospace
fontFamily-Text-mono	$fontFamily-monospace	$fontFamily-monospace
fontFamily-Text-sample	$fontFamily-monospace	$fontFamily-monospace
fontSize-Text	$fontSize	$fontSize
fontSize-Text-code	$fontSize-sm	$fontSize-sm
fontSize-Text-codefence	$fontSize-code	$fontSize-code
fontSize-Text-keyboard	$fontSize-sm	$fontSize-sm
fontSize-Text-paragraph	none	none
fontSize-Text-placeholder	$fontSize-xs	$fontSize-xs
fontSize-Text-sample	$fontSize-sm	$fontSize-sm
fontSize-Text-secondary	$fontSize-sm	$fontSize-sm
fontSize-Text-small	$fontSize-sm	$fontSize-sm
fontSize-Text-sub	$fontSize-xs	$fontSize-xs
fontSize-Text-subheading	$fontSize-H6	$fontSize-H6
fontSize-Text-subtitle	$fontSize-xl	$fontSize-xl
fontSize-Text-sup	$fontSize-xs	$fontSize-xs
fontSize-Text-tableheading	$fontSize-H6	$fontSize-H6
fontSize-Text-title	$fontSize-2xl	$fontSize-2xl
fontStretch-Text	none	none
fontStyle-Text	none	none
fontStyle-Text-cite	italic	italic
fontStyle-Text-em	italic	italic
fontStyle-Text-marked	none	none
fontStyle-Text-placeholder	none	none
fontStyle-Text-subheading	none	none
fontStyle-Text-var	italic	italic
fontVariant-Text	none	none
fontWeight-Text	$fontWeight-normal	$fontWeight-normal
fontWeight-Text-abbr	$fontWeight-bold	$fontWeight-bold
fontWeight-Text-keyboard	$fontWeight-bold	$fontWeight-bold
fontWeight-Text-marked	none	none
fontWeight-Text-placeholder	none	none
fontWeight-Text-strong	$fontWeight-bold	$fontWeight-bold
fontWeight-Text-subheading	$fontWeight-bold	$fontWeight-bold
fontWeight-Text-tableheading	$fontWeight-bold	$fontWeight-bold
letterSpacing-Text	none	none
letterSpacing-Text-caption	0.05rem	0.05rem
letterSpacing-Text-subheading	0.04em	0.04em
lineBreak-Text	none	none
lineHeight-Text	none	none
lineHeight-Text-codefence	1.5	1.5
lineHeight-Text-marked	none	none
marginBottom-Text	none	none
marginBottom-Text-code	none	none
marginBottom-Text-small	none	none
marginBottom-Text-tableheading	$space-4	$space-4
marginLeft-Text	none	none
marginLeft-Text-code	none	none
marginLeft-Text-small	none	none
marginRight-Text	none	none
marginRight-Text-code	none	none
marginRight-Text-small	none	none
marginTop-Text	none	none
marginTop-Text-code	none	none
marginTop-Text-small	none	none
marginTop-Text-tableheading	$space-1	$space-1
paddingBottom-Text-code	2px	2px
paddingHorizontal-Text-code	$space-0_5	$space-0_5
paddingHorizontal-Text-codefence	$space-4	$space-4
paddingHorizontal-Text-keyboard	$space-1	$space-1
paddingHorizontal-Text-marked	none	none
paddingHorizontal-Text-tableheading	$space-1	$space-1
paddingVertical-Text-codefence	$space-3	$space-3
paddingVertical-Text-paragraph	$space-1	$space-1
textAlign-Text	none	none
textAlignLast-Text	none	none
textColor-Text	$textColor	$textColor
textColor-Text--hover	none	none
textColor-Text-code--hover	initial	initial
textColor-Text-codefence	$color-surface-900	$color-surface-900
textColor-Text-marked	none	none
textColor-Text-placeholder	$color-surface-500	$color-surface-500
textColor-Text-placeholder--hover	none	none
textColor-Text-secondary	$textColor-secondary	$textColor-secondary
textColor-Text-secondary--hover	none	none
textColor-Text-small--hover	none	none
textColor-Text-subheading	$textColor-secondary	$textColor-secondary
textColor-Text-subheading--hover	none	none
textDecorationColor-Text	none	none
textDecorationColor-Text-deleted	none	none
textDecorationColor-Text-inserted	none	none
textDecorationLine-Text	none	none
textDecorationLine-Text-deleted	line-through	line-through
textDecorationLine-Text-inserted	underline	underline
textDecorationStyle-Text	none	none
textDecorationStyle-Text-deleted	none	none
textDecorationStyle-Text-inserted	none	none
textDecorationThickness-Text	none	none
textDecorationThickness-Text-deleted	none	none
textDecorationThickness-Text-inserted	none	none
textIndent-Text	none	none
textShadow-Text	none	none
textTransform-Text	none	none
textTransform-Text-abbr	uppercase	uppercase
textTransform-Text-subheading	uppercase	uppercase
textUnderlineOffset-Text	none	none
verticalAlignment-Text	none	none
verticalAlignment-Text-code	none	none
verticalAlignment-Text-small	none	none
verticalAlignment-Text-sub	sub	sub
verticalAlignment-Text-sup	super	super
wordBreak-Text	none	none
wordSpacing-Text	none	none
wordWrap-Text	none	none
writingMode-Text	none	none