From 05438e86a91120a75339fa51ca1ebdd45c71cab6 Mon Sep 17 00:00:00 2001 From: Bas Milius Date: Sat, 11 Jul 2026 19:42:50 +0200 Subject: [PATCH 1/2] feat(typography): add FluxTypography prose component Introduce FluxTypography, a prose wrapper that scopes the rich typographic system (vertical rhythm, decorated blockquotes, lists, code, tables, images) that used to apply globally. Outside the component only light element defaults remain: heading sizes, links and the monospace font. - Add FluxTypography with tag, as-child and container props - Add FluxTypographyReset to opt a subtree out of the prose styling while it keeps flowing in the vertical rhythm - Reset bare list styling globally; align prose tables with FluxTable - Add docs page, runnable examples and VitePress theme carve-outs so previews render with the real Flux typography BREAKING CHANGE: the automatic vertical spacing between bare headings, paragraphs, lists, blockquotes and images no longer applies globally. Wrap document content in FluxTypography to restore it. --- docs/.vitepress/component-navigation.ts | 3 +- docs/.vitepress/theme/FluxView.vue | 2 +- docs/.vitepress/theme/override/vp-doc.css | 44 ++--- docs/.vitepress/theme/style.css | 6 +- docs/code/components/flyout/preview.vue | 14 +- docs/code/components/typography/article.vue | 91 +++++++++++ .../code/components/typography/blockquote.vue | 12 ++ docs/code/components/typography/code.vue | 15 ++ docs/code/components/typography/headings.vue | 16 ++ docs/code/components/typography/lists.vue | 28 ++++ docs/code/components/typography/paragraph.vue | 13 ++ docs/code/components/typography/preview.vue | 24 +++ docs/code/components/typography/reset.vue | 41 +++++ docs/code/components/typography/table.vue | 36 +++++ .../introduction/typography/blockquote.vue | 5 +- .../introduction/typography/headings.vue | 15 +- .../guide/introduction/typography/image.vue | 7 +- .../guide/introduction/typography/lists.vue | 27 ++-- .../introduction/typography/paragraph.vue | 9 +- docs/components/typography.md | 77 +++++++++ docs/guide/introduction/typography.md | 2 + .../src/component/FluxTypography.vue | 42 +++++ .../src/component/FluxTypographyReset.vue | 22 +++ packages/components/src/component/index.ts | 2 + .../src/css/component/Typography.module.scss | 150 ++++++++++++++++++ packages/components/src/css/reset.scss | 6 + packages/components/src/css/typography.scss | 37 ----- 27 files changed, 652 insertions(+), 94 deletions(-) create mode 100644 docs/code/components/typography/article.vue create mode 100644 docs/code/components/typography/blockquote.vue create mode 100644 docs/code/components/typography/code.vue create mode 100644 docs/code/components/typography/headings.vue create mode 100644 docs/code/components/typography/lists.vue create mode 100644 docs/code/components/typography/paragraph.vue create mode 100644 docs/code/components/typography/preview.vue create mode 100644 docs/code/components/typography/reset.vue create mode 100644 docs/code/components/typography/table.vue create mode 100644 docs/components/typography.md create mode 100644 packages/components/src/component/FluxTypography.vue create mode 100644 packages/components/src/component/FluxTypographyReset.vue create mode 100644 packages/components/src/css/component/Typography.module.scss diff --git a/docs/.vitepress/component-navigation.ts b/docs/.vitepress/component-navigation.ts index 08e5cfef..63918df3 100644 --- a/docs/.vitepress/component-navigation.ts +++ b/docs/.vitepress/component-navigation.ts @@ -12,7 +12,8 @@ const navigation: SidebarItem[] = [ {text: 'Link', link: '/components/link', image: '/assets/components/link.svg'}, {text: 'Pressable', link: '/components/pressable'}, {text: 'Root', link: '/components/root'}, - {text: 'Text', link: '/components/text'} + {text: 'Text', link: '/components/text'}, + {text: 'Typography', link: '/components/typography'} ] }, { diff --git a/docs/.vitepress/theme/FluxView.vue b/docs/.vitepress/theme/FluxView.vue index ecf34e7b..c15b1170 100644 --- a/docs/.vitepress/theme/FluxView.vue +++ b/docs/.vitepress/theme/FluxView.vue @@ -14,7 +14,7 @@ line-height: 1.6; } - :global(p) { + :global(p:not(:where([data-flux-typography] *))) { margin: unset; line-height: 1.6; } diff --git a/docs/.vitepress/theme/override/vp-doc.css b/docs/.vitepress/theme/override/vp-doc.css index ffef7b6d..c64849fa 100644 --- a/docs/.vitepress/theme/override/vp-doc.css +++ b/docs/.vitepress/theme/override/vp-doc.css @@ -13,13 +13,13 @@ outline: none; } -.vp-doc h1 { +.vp-doc h1:not(:where([data-flux-typography] *)) { letter-spacing: -0.02em; line-height: 40px; font-size: 28px; } -.vp-doc h2 { +.vp-doc h2:not(:where([data-flux-typography] *)) { margin: 48px 0 16px; border-top: 1px solid var(--vp-c-divider); padding-top: 24px; @@ -28,14 +28,14 @@ font-size: 24px; } -.vp-doc h3 { +.vp-doc h3:not(:where([data-flux-typography] *)) { margin: 32px 0 0; letter-spacing: -0.01em; line-height: 28px; font-size: 20px; } -.vp-doc h4 { +.vp-doc h4:not(:where([data-flux-typography] *)) { margin: 24px 0 0; letter-spacing: -0.01em; line-height: 24px; @@ -76,7 +76,7 @@ } @media (min-width: 768px) { - .vp-doc h1 { + .vp-doc h1:not(:where([data-flux-typography] *)) { letter-spacing: -0.02em; line-height: 40px; font-size: 32px; @@ -91,16 +91,16 @@ * Paragraph and inline elements * -------------------------------------------------------------------------- */ -.vp-doc p, -.vp-doc summary { +.vp-doc p:not(:where([data-flux-typography] *)), +.vp-doc summary:not(:where([data-flux-typography] *)) { margin: 16px 0; } -.vp-doc p { +.vp-doc p:not(:where([data-flux-typography] *)) { line-height: 28px; } -.vp-doc blockquote { +.vp-doc blockquote:not(:where([data-flux-typography] *)) { margin: 16px 0; border-left: 2px solid var(--vp-c-divider); padding-left: 16px; @@ -108,7 +108,7 @@ color: var(--vp-c-text-2); } -.vp-doc blockquote > p { +.vp-doc blockquote:not(:where([data-flux-typography] *)) > p { margin: 0; font-size: 16px; transition: color 0.5s; @@ -136,26 +136,26 @@ * Lists * -------------------------------------------------------------------------- */ -.vp-doc ul, -.vp-doc ol { +.vp-doc ul:not(:where([data-flux-typography] *)), +.vp-doc ol:not(:where([data-flux-typography] *)) { padding-left: 1.25rem; margin: 16px 0; } -.vp-doc ul { +.vp-doc ul:not(:where([data-flux-typography] *)) { list-style: disc; } -.vp-doc ol { +.vp-doc ol:not(:where([data-flux-typography] *)) { list-style: decimal; } -.vp-doc li + li { +.vp-doc li:not(:where([data-flux-typography] *)) + li { margin-top: 8px; } -.vp-doc li > ol, -.vp-doc li > ul { +.vp-doc li:not(:where([data-flux-typography] *)) > ol, +.vp-doc li:not(:where([data-flux-typography] *)) > ul { margin: 8px 0 0; } @@ -163,7 +163,7 @@ * Decorational elements * -------------------------------------------------------------------------- */ -.vp-doc hr:not(:only-child) { +.vp-doc hr:not(:only-child):not(:where([data-flux-typography] *)) { margin: 16px 0; border: none; border-top: 1px solid var(--vp-c-divider); @@ -206,12 +206,12 @@ * -------------------------------------------------------------------------- */ /* inline code */ -.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code { +.vp-doc :not(pre, h1, h2, h3, h4, h5, h6):not(:where([data-flux-typography] *)) > code { font-size: var(--vp-code-font-size); color: var(--vp-code-color); } -.vp-doc :not(pre) > code { +.vp-doc :not(pre):not(:where([data-flux-typography] *)) > code { border-radius: 4px; padding: 3px 6px; background-color: var(--vp-code-bg); @@ -283,7 +283,7 @@ hyphens: none; } -.vp-doc [class*='language-'] pre { +.vp-doc [class*='language-'] pre:not(:where([data-flux-typography] *)) { position: relative; z-index: 1; margin: 0; @@ -292,7 +292,7 @@ overflow-x: auto; } -.vp-doc [class*='language-'] code { +.vp-doc [class*='language-'] code:not(:where([data-flux-typography] *)) { display: block; padding: 0 24px; width: fit-content; diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index bf199517..9aceb212 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -37,7 +37,7 @@ button { padding: 18px; } -.vp-adaptive-theme p { +.vp-adaptive-theme p:not(:where([data-flux-typography] *)) { margin: unset; } @@ -101,12 +101,12 @@ button { z-index: 0; } -.vp-code-group .blocks :where(h1, h2, h3, h4, h5, h6) { +.vp-code-group .blocks :where(h1, h2, h3, h4, h5, h6):not(:where([data-flux-typography] *)) { margin: unset; line-height: 1.6; } -.vp-code-group .blocks p { +.vp-code-group .blocks p:not(:where([data-flux-typography] *)) { margin: unset; line-height: 1.6; } diff --git a/docs/code/components/flyout/preview.vue b/docs/code/components/flyout/preview.vue index 708ae790..aa295bb2 100644 --- a/docs/code/components/flyout/preview.vue +++ b/docs/code/components/flyout/preview.vue @@ -11,12 +11,14 @@ @@ -27,5 +29,5 @@ diff --git a/docs/code/components/typography/article.vue b/docs/code/components/typography/article.vue new file mode 100644 index 00000000..28c07f66 --- /dev/null +++ b/docs/code/components/typography/article.vue @@ -0,0 +1,91 @@ + + + diff --git a/docs/code/components/typography/blockquote.vue b/docs/code/components/typography/blockquote.vue new file mode 100644 index 00000000..faa3bbaf --- /dev/null +++ b/docs/code/components/typography/blockquote.vue @@ -0,0 +1,12 @@ + + + diff --git a/docs/code/components/typography/code.vue b/docs/code/components/typography/code.vue new file mode 100644 index 00000000..e2f65037 --- /dev/null +++ b/docs/code/components/typography/code.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/code/components/typography/headings.vue b/docs/code/components/typography/headings.vue new file mode 100644 index 00000000..9e1ade31 --- /dev/null +++ b/docs/code/components/typography/headings.vue @@ -0,0 +1,16 @@ + + + diff --git a/docs/code/components/typography/lists.vue b/docs/code/components/typography/lists.vue new file mode 100644 index 00000000..17e2ee0f --- /dev/null +++ b/docs/code/components/typography/lists.vue @@ -0,0 +1,28 @@ + + + diff --git a/docs/code/components/typography/paragraph.vue b/docs/code/components/typography/paragraph.vue new file mode 100644 index 00000000..a9203e8d --- /dev/null +++ b/docs/code/components/typography/paragraph.vue @@ -0,0 +1,13 @@ + + + diff --git a/docs/code/components/typography/preview.vue b/docs/code/components/typography/preview.vue new file mode 100644 index 00000000..bdf79927 --- /dev/null +++ b/docs/code/components/typography/preview.vue @@ -0,0 +1,24 @@ + + + diff --git a/docs/code/components/typography/reset.vue b/docs/code/components/typography/reset.vue new file mode 100644 index 00000000..9daa8289 --- /dev/null +++ b/docs/code/components/typography/reset.vue @@ -0,0 +1,41 @@ + + + diff --git a/docs/code/components/typography/table.vue b/docs/code/components/typography/table.vue new file mode 100644 index 00000000..ccfec743 --- /dev/null +++ b/docs/code/components/typography/table.vue @@ -0,0 +1,36 @@ + + + diff --git a/docs/code/guide/introduction/typography/blockquote.vue b/docs/code/guide/introduction/typography/blockquote.vue index aa270508..f51d7085 100644 --- a/docs/code/guide/introduction/typography/blockquote.vue +++ b/docs/code/guide/introduction/typography/blockquote.vue @@ -1,8 +1,11 @@ diff --git a/docs/code/guide/introduction/typography/headings.vue b/docs/code/guide/introduction/typography/headings.vue index 47e6eda9..89f0b04b 100644 --- a/docs/code/guide/introduction/typography/headings.vue +++ b/docs/code/guide/introduction/typography/headings.vue @@ -1,13 +1,16 @@ diff --git a/docs/code/guide/introduction/typography/image.vue b/docs/code/guide/introduction/typography/image.vue index 765d1ca6..79cc175c 100644 --- a/docs/code/guide/introduction/typography/image.vue +++ b/docs/code/guide/introduction/typography/image.vue @@ -1,9 +1,12 @@ diff --git a/docs/code/guide/introduction/typography/lists.vue b/docs/code/guide/introduction/typography/lists.vue index 5a3a076f..ad8666e3 100644 --- a/docs/code/guide/introduction/typography/lists.vue +++ b/docs/code/guide/introduction/typography/lists.vue @@ -1,20 +1,23 @@ diff --git a/docs/code/guide/introduction/typography/paragraph.vue b/docs/code/guide/introduction/typography/paragraph.vue index 6d9fd96c..02545eff 100644 --- a/docs/code/guide/introduction/typography/paragraph.vue +++ b/docs/code/guide/introduction/typography/paragraph.vue @@ -1,10 +1,13 @@ diff --git a/docs/components/typography.md b/docs/components/typography.md new file mode 100644 index 00000000..28abfbcd --- /dev/null +++ b/docs/components/typography.md @@ -0,0 +1,77 @@ +--- +outline: deep + +props: + - name: asChild + description: Merges the typography styling onto the single child element instead of rendering a wrapper. Useful when you already have a semantic root such as an article. + type: boolean + optional: true + + - name: container + description: Constrains the content to a centered reading measure. Set the width through the --flux-typography-container custom property, which defaults to 90ch. + type: boolean + optional: true + + - name: tag + description: The HTML element that is rendered. Defaults to a div, use article or section for document content. + type: string + optional: true + +slots: + - name: default + description: The prose content, made up of regular HTML elements such as headings, paragraphs, lists and tables. +--- + +# Typography + +The Typography component turns plain HTML into rich, readable prose. Everything you drop inside it, headings, paragraphs, lists, blockquotes, code, tables and images, is styled with a consistent type scale and vertical rhythm, so you can write an article without reaching for custom CSS. + +::: render +render=../code/components/typography/preview.vue +::: + +::: tip +Outside of Typography, Flux keeps only light element defaults (heading sizes, link and monospace styling). The rich prose styling, vertical rhythm, decorated blockquotes, list markers and table borders, applies only within `FluxTypography`. +::: + +By default Typography renders a `div`. Set `tag` to render a different wrapper such as an `article`, or use `as-child` to merge the styling onto the single child element without any wrapper at all. + +For long form reading, add the `container` prop to cap the content at a comfortable measure and center it. The width is driven by the `--flux-typography-container` custom property (default `90ch`), so you can set it to `72ch`, `78ch`, `84ch` or any value you like. + +Use [Text](/components/text) instead when you need a single styled piece of inline text, such as a label, a metric or a caption. Typography is for flowing document content, Text is for individual strings. + + + +## Examples + +::: example Headings || The six heading levels, each with its own size and weight. +example=../code/components/typography/headings.vue +::: + +::: example Paragraphs || Body copy flows with a comfortable line height and automatic spacing between blocks. +example=../code/components/typography/paragraph.vue +::: + +::: example Lists || Ordered and unordered lists get markers, indentation and nested styling. +example=../code/components/typography/lists.vue +::: + +::: example Blockquote || A quote is set off with an accent border and italics. +example=../code/components/typography/blockquote.vue +::: + +::: example Code || Inline code renders as a chip, while a pre block becomes a scrollable code block. +example=../code/components/typography/code.vue +::: + +::: example Table || Tables get borders, padding and a subtle header background. +example=../code/components/typography/table.vue +::: + +::: example Reset || Wrap a foreign component in Typography Reset to keep it out of the prose styling while it still flows in the vertical rhythm. +example=../code/components/typography/reset.vue +::: + +::: example Full article || Everything together: headings, body copy, lists, a blockquote, inline and block code, a keyboard shortcut, a table, an image, and a Flux pane embedded through Typography Reset. +example=../code/components/typography/article.vue +::: diff --git a/docs/guide/introduction/typography.md b/docs/guide/introduction/typography.md index e76c3103..a832b9b6 100644 --- a/docs/guide/introduction/typography.md +++ b/docs/guide/introduction/typography.md @@ -6,6 +6,8 @@ outline: deep Flux ships a consistent typographic system covering font families, sizes, weights, and spacing. This page documents how typography works in Flux and how to apply it to text throughout your application. +Outside of any container, Flux applies only light element defaults: heading sizes and weights, link styling and a monospace font for code. Rich prose, with vertical rhythm, decorated blockquotes, list markers and styled tables, lives inside the [Typography](/components/typography) component. Every example below is wrapped in `FluxTypography`. + ::: tip Flux uses the [Inter Variable](https://rsms.me/inter/) font family by default, you will need to include the font in your application for it to work. ::: diff --git a/packages/components/src/component/FluxTypography.vue b/packages/components/src/component/FluxTypography.vue new file mode 100644 index 00000000..439d4656 --- /dev/null +++ b/packages/components/src/component/FluxTypography.vue @@ -0,0 +1,42 @@ + + + diff --git a/packages/components/src/component/FluxTypographyReset.vue b/packages/components/src/component/FluxTypographyReset.vue new file mode 100644 index 00000000..3c283296 --- /dev/null +++ b/packages/components/src/component/FluxTypographyReset.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/components/src/component/index.ts b/packages/components/src/component/index.ts index f80fb494..eb99f3d4 100644 --- a/packages/components/src/component/index.ts +++ b/packages/components/src/component/index.ts @@ -183,4 +183,6 @@ export { default as FluxTooltipProvider } from './FluxTooltipProvider.vue'; export { default as FluxTour } from './FluxTour.vue'; export { default as FluxTourItem } from './FluxTourItem.vue'; export { default as FluxTreeView } from './FluxTreeView.vue'; +export { default as FluxTypography } from './FluxTypography.vue'; +export { default as FluxTypographyReset } from './FluxTypographyReset.vue'; export { default as FluxWindow } from './FluxWindow.vue'; diff --git a/packages/components/src/css/component/Typography.module.scss b/packages/components/src/css/component/Typography.module.scss new file mode 100644 index 00000000..8992ebb6 --- /dev/null +++ b/packages/components/src/css/component/Typography.module.scss @@ -0,0 +1,150 @@ +// Prose styling is skipped inside a FluxTypographyReset boundary so foreign +// components dropped into an article keep their own styling. +$guard: ':not(:where([data-flux-prose-reset], [data-flux-prose-reset] *))'; +$rhythm: ':where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, pre, table, [data-typography-aware])'; + +.container { + max-width: var(--flux-typography-container, 90ch); + margin-left: auto; + margin-right: auto; +} + +.typography { + line-height: 1.6; + color: var(--foreground); + + // Vertical rhythm between flow elements. + #{$rhythm} + :where(h1, h2, h3)#{$guard} { + margin-top: 33px; + } + + #{$rhythm} + :where(h4, h5, h6, p, ul, ol, blockquote, img, pre, table)#{$guard} { + margin-top: 12px; + } + + #{$rhythm} + :where([data-typography-aware]) { + margin-top: 21px; + } + + // Headings. + :where(h1, h2)#{$guard} { + letter-spacing: -.01em; + } + + h2#{$guard} { + padding-bottom: 9px; + border-bottom: 1px solid var(--surface-stroke); + } + + // Lists. + :where(ul, ol)#{$guard} { + padding-left: 24px; + } + + ul#{$guard} { + list-style: disc; + } + + ol#{$guard} { + list-style: decimal; + } + + :where(ul, ol) ul#{$guard} { + list-style-type: circle; + } + + :where(ul, ol) ol#{$guard} { + list-style-type: lower-alpha; + } + + li + li#{$guard} { + margin-top: 6px; + } + + li > :where(ul, ol)#{$guard} { + margin-top: 6px; + } + + // Blockquote. + blockquote#{$guard} { + font-style: italic; + padding-left: 18px; + color: var(--gray-600); + border-left: 3px solid var(--surface-stroke); + } + + // Inline code and sample output. + :where(code, samp):not(pre code)#{$guard} { + font-size: .875em; + padding: 3px 6px; + border-radius: var(--radius-half); + background: var(--gray-100); + } + + // Code block. + pre#{$guard} { + overflow-x: auto; + padding: 15px 18px; + border-radius: var(--radius); + background: var(--gray-100); + } + + pre code { + font-size: inherit; + padding: 0; + background: none; + } + + // Keyboard key. + kbd#{$guard} { + font-size: .8125em; + padding: 3px 6px; + border: 1px solid var(--surface-stroke); + border-radius: var(--radius-half); + box-shadow: 0 1px 0 var(--surface-stroke); + } + + // Divider. + hr#{$guard} { + margin: 33px 0; + border: 0; + border-top: 1px solid var(--surface-stroke); + } + + // Table, matching the FluxTable component. + table#{$guard} { + width: 100%; + border-collapse: collapse; + text-align: start; + } + + :where(th, td)#{$guard} { + padding: 12px 15px; + text-align: start; + word-break: break-word; + } + + :where(th, td) + :where(th, td)#{$guard} { + border-left: 1px solid var(--gray-100); + } + + tr + tr > :where(th, td)#{$guard} { + border-top: 1px solid var(--gray-100); + } + + thead th#{$guard} { + font-size: 14px; + font-weight: 700; + color: var(--foreground-prominent); + border-bottom: 2px solid var(--gray-100); + background: var(--gray-50); + } + + // Image. + img#{$guard} { + height: unset; + border-radius: var(--radius-half); + outline: 1px solid rgb(0 0 0 / .025); + outline-offset: -1px; + } +} diff --git a/packages/components/src/css/reset.scss b/packages/components/src/css/reset.scss index f4322616..6c377db2 100644 --- a/packages/components/src/css/reset.scss +++ b/packages/components/src/css/reset.scss @@ -9,6 +9,12 @@ margin: 0; } + // Remove default list styling; rich prose re-adds it inside FluxTypography. + ul, ol { + padding: 0; + list-style: none; + } + body { // Accessible line-height. line-height: 1.5; diff --git a/packages/components/src/css/typography.scss b/packages/components/src/css/typography.scss index 3c4907f1..cb062819 100644 --- a/packages/components/src/css/typography.scss +++ b/packages/components/src/css/typography.scss @@ -56,44 +56,7 @@ font-size: 14px; } - blockquote { - position: relative; - margin-left: 30px; - padding: 15px 21px; - background: var(--gray-100); - border-radius: var(--radius); - - &::before { - position: absolute; - top: 5px; - left: -27px; - content: '”'; - color: var(--primary-600); - font-size: 39px; - font-weight: 700; - } - } - code, kbd, samp, pre { font-family: var(--font-monospace), monospace; } - - img:not([class]) { - height: unset; - border-radius: var(--radius-half); - outline: 1px solid rgb(0 0 0 / .025); - outline-offset: -1px; - } - - :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, [data-typography-aware]) + :where(h1, h2, h3) { - margin-top: 33px; - } - - :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, [data-typography-aware]) + :where(h4, h5, h6, p, ul, ol, li, blockquote, img) { - margin-top: 12px; - } - - :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, [data-typography-aware]) + :where([data-typography-aware]) { - margin-top: 21px; - } } From 005be9084a0b4447904a66074f43ec00667a8ba4 Mon Sep 17 00:00:00 2001 From: Bas Milius Date: Sat, 11 Jul 2026 19:55:35 +0200 Subject: [PATCH 2/2] refactor(typography): apply review feedback - Use overflow-wrap instead of the deprecated word-break in table cells - Hyphenate "long-form" in the docs --- docs/components/typography.md | 2 +- packages/components/src/css/component/Typography.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components/typography.md b/docs/components/typography.md index 28abfbcd..002e8df9 100644 --- a/docs/components/typography.md +++ b/docs/components/typography.md @@ -36,7 +36,7 @@ Outside of Typography, Flux keeps only light element defaults (heading sizes, li By default Typography renders a `div`. Set `tag` to render a different wrapper such as an `article`, or use `as-child` to merge the styling onto the single child element without any wrapper at all. -For long form reading, add the `container` prop to cap the content at a comfortable measure and center it. The width is driven by the `--flux-typography-container` custom property (default `90ch`), so you can set it to `72ch`, `78ch`, `84ch` or any value you like. +For long-form reading, add the `container` prop to cap the content at a comfortable measure and center it. The width is driven by the `--flux-typography-container` custom property (default `90ch`), so you can set it to `72ch`, `78ch`, `84ch` or any value you like. Use [Text](/components/text) instead when you need a single styled piece of inline text, such as a label, a metric or a caption. Typography is for flowing document content, Text is for individual strings. diff --git a/packages/components/src/css/component/Typography.module.scss b/packages/components/src/css/component/Typography.module.scss index 8992ebb6..a374cc5f 100644 --- a/packages/components/src/css/component/Typography.module.scss +++ b/packages/components/src/css/component/Typography.module.scss @@ -121,7 +121,7 @@ $rhythm: ':where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, pre, ta :where(th, td)#{$guard} { padding: 12px 15px; text-align: start; - word-break: break-word; + overflow-wrap: break-word; } :where(th, td) + :where(th, td)#{$guard} {