import { PropertyValueMap } from 'lit'; import { Common, Size } from '../../common/types'; import { DdsElement } from '../../internal/dds-hu-element'; export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'description'; export type TypographySize = Extract | null | undefined; type HeadingProps = { variant: Extract; size?: TypographySize; }; type BodyProps = { variant: Extract; size: TypographySize; }; type CaptionProps = { variant: Extract; size: never; }; type DescriptionProps = { variant: Extract; size: Extract; }; export type TypographyProps = HeadingProps | BodyProps | CaptionProps | DescriptionProps; /** * @element dap-ds-typography * @summary Typography is used to display text in different styles. * @title - Typography * * @slot default - The content of the typography. * * @csspart base - The main typography container. * * @cssproperty --dds-text-color - The color of the typography. (default: var(--dds-text-neutral-base)) * @cssproperty --dds-text-color-inverted - The color of the typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) * @cssproperty --dds-text-heading-color - The color of the heading typography. (default: var(--dds-text-neutral-strong)) * @cssproperty --dds-text-heading-color-inverted - The color of the heading typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) * @cssproperty --dds-text-description-color - The color of the subtle typography. (default: var(--dds-text-neutral-subtle)) * @cssproperty --dds-text-description-color-inverted - The color of the subtle typography in inverted mode. (default: var(--dds-text-neutral-on-inverted)) * @cssproperty --dds-text-font-family - The font family of the typography. (default: var(--font-family)) * @cssproperty --dds-text-font-weight-medium - The font weight of the medium typography. (default: var(--dds-font-weight-medium)) * @cssproperty --dds-text-font-weight-bold - The font weight of the bold typography. (default: var(--dds-font-weight-bold)) * @cssproperty --dds-text-font-size-h1 - The font size of the h1 typography. (default: var(--dds-font-7xl)) * @cssproperty --dds-text-font-size-h2 - The font size of the h2 typography. (default: var(--dds-font-4xl)) * @cssproperty --dds-text-font-size-h3 - The font size of the h3 typography. (default: var(--dds-font-2xl)) * @cssproperty --dds-text-font-size-h4 - The font size of the h4 typography. (default: var(--dds-font-xl)) * @cssproperty --dds-text-font-size-h5 - The font size of the h5 typography. (default: var(--dds-font-lg)) * @cssproperty --dds-text-font-size-h6 - The font size of the h6 typography. (default: var(--dds-font-base)) * @cssproperty --dds-text-font-size-body - The font size of the body typography. (default: var(--dds-font-base)) * @cssproperty --dds-text-font-size-caption - The font size of the caption typography. (default: var(--dds-font-xs)) * @cssproperty --dds-text-font-size-description - The font size of the description typography. (default: var(--dds-font-base)) * @cssproperty --dds-text-font-size-description-lg - The font size of the description lg typography. (default: var(--dds-font-base)) * @cssproperty --dds-text-font-size-description-sm - The font size of the description sm typography. (default: var(--dds-font-sm)) * @cssproperty --dds-text-font-size-lg - The font size of the lg typography. (default: var(--dds-font-lg)) * @cssproperty --dds-text-font-size-md - The font size of the md typography. (default: var(--dds-font-base)) * @cssproperty --dds-text-font-size-sm - The font size of the sm typography. (default: var(--dds-font-sm)) * @cssproperty --dds-text-font-size-xs - The font size of the xs typography. (default: var(--dds-font-xs)) */ export default class DapDSTypography extends DdsElement implements Common { /** * The variant of the typography. * @type {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'description'} */ variant: TypographyVariant; /** * The size of the typography. * @type {'sm' | 'md' | 'lg'} */ size?: TypographySize; /** * The html element of the body typography. */ bodyAs?: string; /** The custom class of the typography. */ customClass?: string; /** Whether the typography is an anchor for the TOC component. */ anchor: boolean; /** Whether the typography is inverted. */ inverted: boolean; static readonly styles: import('lit').CSSResult; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; private get elementId(); private _renderHeading; private _renderBody; private _renderCaption; private _renderDescription; private _getElement; render(): import('lit-html').TemplateResult | null; } export {};