UNPKG

goobs-frontend

Version:

A comprehensive React-based libary for building modern web applications

136 lines 7.47 kB
import { default as React } from 'react'; /** * Props for Typography. The top-level keys are the common shortcuts; the * `styles` object carries the full override surface, and a `styles` key * always WINS over its top-level twin (e.g. `styles.fontSize` over * `fontSize`). */ export interface TypographyProps { /** Text content. Wins over `children` when both are set (a falsy `''` falls back to `children`). */ text?: string; /** Content rendered when `text` is absent. */ children?: React.ReactNode; /** * Variant name, resolved by case-insensitive SUBSTRING match (default * `'body1'`), in this precedence order: `cinzel*` → Cinzel serif at the * sacred heading sizes; `merri*` → Merriweather (this branch runs before * the heading check so `merrih1` etc. can never be hijacked to Cinzel — * `merrih1`–`merrih6` render at the heading sizes / weight 700, * `*helper*`/`*footer*` at 0.85rem with a muted per-theme pinned color, * any other `merri*` as 1rem body text); plain `h1`–`h6` → Cinzel 600 at * the heading sizes; `body2`/`small` → 0.875rem; anything else → 1rem * body. Beyond that, ANY variant string containing an `'h'` is treated * as a heading for font-family purposes (Cinzel). Overridden by * `styles.variant`. */ variant?: 'h5' | 'body1' | 'body2' | 'h1' | 'h2' | 'h3' | 'h4' | 'h6' | string; /** Text color. Unset → the per-theme CSS fallback (near-white base, gold on sacred, dark-on-light on light). The merri helper/footer variants pin their own color, which wins over this. */ color?: string; /** Font size; wins over the variant's default size. */ fontSize?: string; /** Font family for body variants (default `'"Crimson Text", serif'`). Ignored when the variant pins a family (cinzel/merri/heading variants). */ fontFamily?: string; /** Font weight; ALWAYS wins over the variant's default weight. */ fontWeight?: number | string; /** Text alignment (default `'left'`). */ textAlign?: 'left' | 'center' | 'right'; /** Bottom margin (default `'0'`; replaced by `0.35em` when `gutterBottom` is set, suppressed entirely by `styles.margin`). */ marginBottom?: string; /** Top margin (default `'0'`; suppressed by `styles.margin`). */ marginTop?: string; /** CSS `width` of the rendered span. */ width?: string; /** CSS `outline` value, passed through verbatim. String form only here — the boolean opt-in lives on `styles.outline`, which also wins when both are set. */ outline?: string; /** Replaces the bottom margin with `0.35em` of paragraph spacing. */ gutterBottom?: boolean; /** * Full styling override surface. Each key WINS over its top-level twin. * Scalar values ride into Typography.module.css as `--typography-*` * custom properties; margin/padding stay real inline properties so a * shorthand suppresses its longhands. */ styles?: { /** Variant name; wins over the top-level `variant`. Same substring resolution — see the `variant` doc. */ variant?: string; /** Text color; wins over the top-level `color` (merri helper/footer variants still pin their own). */ color?: string; /** Font size; wins over the top-level `fontSize` and the variant default. */ fontSize?: string; /** Font family; wins over the top-level `fontFamily` for body variants. Ignored when the variant pins a family. */ fontFamily?: string; /** Font weight; wins over the top-level `fontWeight` and ALWAYS over the variant weight. */ fontWeight?: number | string; /** Text alignment; wins over the top-level `textAlign`. */ textAlign?: 'left' | 'center' | 'right'; /** Bottom margin; wins over the top-level `marginBottom`. Suppressed by `margin` and by `gutterBottom`. */ marginBottom?: string; /** Top margin; wins over the top-level `marginTop`. Suppressed by `margin`. */ marginTop?: string; /** Left margin (default `'0'`). Suppressed by `margin`. */ marginLeft?: string; /** Right margin (default `'0'`). Suppressed by `margin`. */ marginRight?: string; /** Margin shorthand. When set, the four margin longhands (and `gutterBottom`) are ignored. */ margin?: string; /** Padding shorthand. When set, the four padding longhands are ignored. */ padding?: string; /** Left padding (only when `padding` is unset). */ paddingLeft?: string; /** Right padding (only when `padding` is unset). */ paddingRight?: string; /** Top padding (only when `padding` is unset). */ paddingTop?: string; /** Bottom padding (only when `padding` is unset). */ paddingBottom?: string; /** CSS `line-height`. */ lineHeight?: string | number; /** CSS `letter-spacing`. */ letterSpacing?: string; /** CSS `text-shadow`. */ textShadow?: string; /** CSS `font-style` (e.g. `italic`). */ fontStyle?: string; /** CSS `text-transform`. */ textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase'; /** CSS `white-space`. */ whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line'; /** CSS `opacity`. */ opacity?: number | string; /** CSS `max-width`. */ maxWidth?: string; /** CSS `min-width`. */ minWidth?: string; /** CSS `background-color`. */ backgroundColor?: string; /** CSS `border-left` shorthand (e.g. a quote/callout bar). */ borderLeft?: string; /** CSS `flex` shorthand. */ flex?: string | number; /** CSS `align-self`. */ alignSelf?: string; /** Theme, emitted as `data-theme`: `'sacred'` flips the default color fallback to gold; `'light'`/`'dark'` remap it to their role text tokens. Unset → the near-white non-sacred default. An explicit `color` always wins over the theme fallback. */ theme?: 'sacred' | 'dark' | 'light' | string; /** `true` → the visible outline treatment (`1px solid currentcolor` + 3px offset, keyed to the resolved per-theme text color); a string passes through verbatim as the CSS `outline` value; `false`/unset → no outline. Wins over the top-level `outline`. */ outline?: string | boolean; /** CSS `width`; wins over the top-level `width`. */ width?: string; /** Replaces the bottom margin with `0.35em`; wins over the top-level `gutterBottom`. */ gutterBottom?: boolean; /** CSS `border-radius`. */ borderRadius?: string; /** CSS `overflow` (pair with `textOverflow` for ellipsis truncation). */ overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | string; /** CSS `text-overflow` (needs `overflow: 'hidden'` and a constrained width to clip). */ textOverflow?: 'clip' | 'ellipsis' | string; }; } /** * Themeable text primitive rendering a `<span>` (valid as phrasing content * inside buttons, links, and headings) with heading, body, and sacred * Cinzel/Merriweather variants. Resolves font family, weight, and color per * variant and theme, and forwards scalar style overrides as CSS variables. */ declare const Typography: React.FC<TypographyProps>; export default Typography; //# sourceMappingURL=index.d.ts.map