@twind/preset-typography
Version:
A twind preset that provides a set of `prose` classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control, like HTML rendered from Markdown, or pulled from a CMS.
206 lines (203 loc) • 5.08 kB
TypeScript
import { BaseTheme, CSSNested, Preset } from '@twind/core';
declare module '@twind/core' {
interface CustomProperties {
'--tw-prose-body'?: string;
'--tw-prose-lead'?: string;
'--tw-prose-headings'?: string;
'--tw-prose-links'?: string;
'--tw-prose-bold'?: string;
'--tw-prose-counters'?: string;
'--tw-prose-bullets'?: string;
'--tw-prose-hr'?: string;
'--tw-prose-quote-borders'?: string;
'--tw-prose-captions'?: string;
'--tw-prose-code'?: string;
'--tw-prose-pre-code'?: string;
'--tw-prose-pre-bg'?: string;
'--tw-prose-th-borders'?: string;
'--tw-prose-td-borders'?: string;
}
}
declare type FontSizeValue = string | [size: string, lineHeight: string] | [size: string, options: {
lineHeight?: string;
letterSpacing?: string;
}];
interface TypographyTheme extends BaseTheme {
fontSize: Record<string, FontSizeValue>;
}
interface TypographyOptions {
/**
* The class name to use the typographic utilities.
* To undo the styles to the elements, use it like
* `not-${className}` which is by default `not-prose`.
*
* Note: `not` utility is only available in class.
*
* @defaultValue `prose`
*/
className?: string;
/**
* Default color to use.
*
* @defaultValue 'gray'
*/
defaultColor?: string;
colors?: {
/**
* @defaultValue '700'
*/
body?: string;
/**
* @defaultValue '900'
*/
headings?: string;
/**
* @defaultValue '600'
*/
lead?: string;
/**
* @defaultValue '900'
*/
links?: string;
/**
* @defaultValue '900'
*/
bold?: string;
/**
* @defaultValue '500'
*/
counters?: string;
/**
* @defaultValue '300'
*/
bullets?: string;
/**
* @defaultValue '200'
*/
hr?: string;
/**
* @defaultValue '900'
*/
quotes?: string;
/**
* @defaultValue '200'
*/
'quote-borders'?: string;
/**
* @defaultValue '500'
*/
captions?: string;
/**
* @defaultValue '900'
*/
code?: string;
/**
* @defaultValue '200'
*/
'pre-code'?: string;
/**
* @defaultValue '800'
*/
'pre-bg'?: string;
/**
* @defaultValue '300'
*/
'th-borders'?: string;
/**
* @defaultValue '200'
*/
'td-borders'?: string;
dark?: null | undefined | {
/**
* @defaultValue '300'
*/
body?: string;
/**
* @defaultValue '#fff'
*/
headings?: string;
/**
* @defaultValue '400'
*/
lead?: string;
/**
* @defaultValue '#fff'
*/
links?: string;
/**
* @defaultValue '#fff'
*/
bold?: string;
/**
* @defaultValue '400'
*/
counters?: string;
/**
* @defaultValue '600'
*/
bullets?: string;
/**
* @defaultValue '700'
*/
hr?: string;
/**
* @defaultValue '100'
*/
quotes?: string;
/**
* @defaultValue '700'
*/
'quote-borders'?: string;
/**
* @defaultValue '400'
*/
captions?: string;
/**
* @defaultValue '#fff'
*/
code?: string;
/**
* @defaultValue '300'
*/
'pre-code'?: string;
/**
* @defaultValue 'rgb(0 0 0 / 50%)'
*/
'pre-bg'?: string;
/**
* @defaultValue '600'
*/
'th-borders'?: string;
/**
* @defaultValue '700'
*/
'td-borders'?: string;
};
};
/**
* Extend or override CSS selectors with CSS declaration block.
*
* @defaultValue undefined
*/
extend?: CSSNested;
}
/**
* Twind Preset for Typography
*
* ```js
* // twind.config.js
* import { defineConfig } from '@twind/core'
* import presetTypography from '@twind/preset-typography'
*
* export default defineConfig({
* presets: [
* presetTypography(),
* ],
* })
* ```
*
* @returns typography preset
*/
declare function presetTypography({ className, defaultColor, extend, colors, }?: TypographyOptions): Preset<TypographyTheme>;
export { FontSizeValue, TypographyOptions, TypographyTheme, presetTypography as default };
//# sourceMappingURL=preset-typography.d.ts.map