dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
90 lines (89 loc) • 5.14 kB
TypeScript
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<Size, 'lg' | 'md' | 'sm' | 'xs'> | null | undefined;
type HeadingProps = {
variant: Extract<TypographyVariant, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
size?: TypographySize;
};
type BodyProps = {
variant: Extract<TypographyVariant, 'body'>;
size: TypographySize;
};
type CaptionProps = {
variant: Extract<TypographyVariant, 'caption'>;
size: never;
};
type DescriptionProps = {
variant: Extract<TypographyVariant, 'description'>;
size: Extract<TypographySize, 'lg' | 'sm'>;
};
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<TypographyProps> {
static tagName: string;
/**
* The variant of the typography.
* @type {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'description'}
*/
variant: TypographyVariant;
/**
* The size of the typography.
* @type {'xs' | '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<any> | Map<PropertyKey, unknown>): void;
private get elementId();
private _renderHeading;
private _renderBody;
private _renderCaption;
private _renderDescription;
private _getElement;
render(): import('lit-html').TemplateResult | null;
}
export {};