goobs-frontend
Version:
A comprehensive React-based libary for building modern web applications
136 lines • 7.47 kB
TypeScript
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