gantri-components 2.254.4 → 2.256.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CLAUDE.md
CHANGED
|
@@ -235,12 +235,14 @@ Without `rounded`, the button stays the normal shape — `iconLocation` is silen
|
|
|
235
235
|
|
|
236
236
|
| Figma font size | Variant | Font |
|
|
237
237
|
|---|---|---|
|
|
238
|
-
|
|
|
238
|
+
| 148px | `mh1` | Roboto Mono |
|
|
239
239
|
| 36px | `mh2` | Roboto Mono |
|
|
240
|
-
|
|
|
241
|
-
|
|
|
242
|
-
|
|
|
243
|
-
|
|
|
240
|
+
| 24px desktop / 18px mobile | `mp1` | Roboto Mono |
|
|
241
|
+
| 15px | `mp2` | Roboto Mono |
|
|
242
|
+
| 11px (mono) | `mp3` | Roboto Mono |
|
|
243
|
+
| 12px (mono) | `mh3`-`mh6` | Roboto Mono |
|
|
244
|
+
| 52px desktop / 36px mobile (marketing) | `xl` | Söhne Buch (regular) |
|
|
245
|
+
| 52px (app/admin) | `h1` | Söhne Kraftig (bold) |
|
|
244
246
|
| 44px | `h2` | Söhne |
|
|
245
247
|
| 28px | `h3` | Söhne |
|
|
246
248
|
| 22px | `h4` | Söhne |
|
|
@@ -251,6 +253,8 @@ Without `rounded`, the button stays the normal shape — `iconLocation` is silen
|
|
|
251
253
|
| 15px (body) | `p2` | Söhne |
|
|
252
254
|
| 12px (body) | `p3` | Söhne |
|
|
253
255
|
|
|
256
|
+
**Editorial marketing scale (all Söhne Buch):** XL (52px desktop / 36px mobile) → `xl` — htmlTag `<h1>`, L (36px) → `mh2`, M (24px desktop / 18px mobile) → `mp1`, S (15px) → `mp2`, XS (11px) → `mp3`. The marketing `xl` (Söhne Buch, regular) is distinct from the standard `h1` (Söhne Kraftig, bold) for app/admin surfaces even though both are 52px.
|
|
257
|
+
|
|
254
258
|
**Color prop values:** `t1` (primary), `t2` (secondary), `t3` (tertiary), `alt` (white/contrast), `link` (green), `alert` (red), `success`, `warning`
|
|
255
259
|
|
|
256
260
|
**Spacing:** Typography extends ElementSpacingProps — use `marginTop="2x"`, `paddingBottom="x"`, etc.
|
|
@@ -4,7 +4,7 @@ import { AriaAttributes, CSSProperties, ReactElement } from 'react';
|
|
|
4
4
|
import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
|
|
5
5
|
import { ElementSpacingProps } from '../box/box.types';
|
|
6
6
|
export type TypographyColor = keyof DefaultTheme['colors']['typography'];
|
|
7
|
-
export type TextVariant = 'p0' | 'p1' | 'p2' | 'p3' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hero' | 'mh1' | 'mh2' | 'mh3' | 'mh4' | 'mh5' | 'mh6' | 'mp1' | 'mp2' | 'mp3' | string;
|
|
7
|
+
export type TextVariant = 'p0' | 'p1' | 'p2' | 'p3' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hero' | 'mh1' | 'mh2' | 'mh3' | 'mh4' | 'mh5' | 'mh6' | 'mp1' | 'mp2' | 'mp3' | 'xl' | string;
|
|
8
8
|
export type TextStyle = 'regular' | 'bold';
|
|
9
9
|
export interface TypographyProps extends Partial<TypographyDefaultProps>, AriaAttributes, ElementSpacingProps {
|
|
10
10
|
align?: ResolutionAwareProp<string>;
|