@fvc/typography 3.0.2 → 3.0.3-next-6b8cbfd15ef8dcb6b5e4daff4edbe4b03517b606
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/README.md +68 -24
- package/dist/lib/index.js +2 -2
- package/dist/lib/typography/src/Typography.d.ts +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -123,17 +123,17 @@ All sub-components share a common set of extended props in addition to their res
|
|
|
123
123
|
|
|
124
124
|
### Shared Extended Props
|
|
125
125
|
|
|
126
|
-
| Prop | Type
|
|
127
|
-
| ------------ |
|
|
128
|
-
| `align` | `CSSProperties['textAlign']`
|
|
129
|
-
| `color` | `string`
|
|
130
|
-
| `font` | `'Roboto' \| 'Montserrat'`
|
|
126
|
+
| Prop | Type | Description |
|
|
127
|
+
| ------------ | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- |
|
|
128
|
+
| `align` | `CSSProperties['textAlign']` | Text alignment. |
|
|
129
|
+
| `color` | `string` | Arbitrary CSS color value. |
|
|
130
|
+
| `font` | `'Roboto' \| 'Montserrat'` | Font family. |
|
|
131
131
|
| `lineHeight` | `'base' \| '12' \| '13' \| '14' \| '16' \| '20' \| '24' \| '32' \| number` | Line height in px or a named token. |
|
|
132
132
|
| `size` | `'12' \| '13' \| '14' \| '16' \| '20' \| '24' \| '32' \| number` | Font size in px. |
|
|
133
133
|
| `type` | `'black' \| 'white' \| 'blue' \| 'gray' \| 'green' \| 'light-gray' \| 'dark-gray' \| 'darker-gray' \| 'label' \| 'bold'` | Preset color variant from the design palette. |
|
|
134
|
-
| `underline` | `boolean`
|
|
134
|
+
| `underline` | `boolean` | Adds underline text decoration. |
|
|
135
135
|
| `weight` | `'200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900' \| number` | Font weight. |
|
|
136
|
-
| `testId` | `string`
|
|
136
|
+
| `testId` | `string` | Maps to `data-testid` on the rendered element. |
|
|
137
137
|
|
|
138
138
|
### `<Typography.Title>`
|
|
139
139
|
|
|
@@ -197,29 +197,73 @@ export function ArticlePreview({ title, summary, authorUrl, authorName }) {
|
|
|
197
197
|
screen.getByTestId('username-label');
|
|
198
198
|
```
|
|
199
199
|
|
|
200
|
-
##
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
|
211
|
-
|
|
|
212
|
-
| `--
|
|
213
|
-
|
|
214
|
-
|
|
200
|
+
## Customisation
|
|
201
|
+
|
|
202
|
+
Set CSS custom properties in your own stylesheet to restyle `@fvc/typography` without forking the component or shipping a theme override file. No rebuild needed — the variables are read at runtime.
|
|
203
|
+
|
|
204
|
+
The component uses a two-tier CSS custom property system.
|
|
205
|
+
|
|
206
|
+
### Typography scale tokens (global defaults)
|
|
207
|
+
|
|
208
|
+
Override these in `:root` to restyle all instances without touching props. Defaults ship in `styles/variables.scss`.
|
|
209
|
+
|
|
210
|
+
| Token | Default | Applies to |
|
|
211
|
+
| ------------------------------- | ----------------------------------- | ----------------------------------- |
|
|
212
|
+
| `--typography-font-family` | `'Roboto', sans-serif` | Font family for all elements |
|
|
213
|
+
| `--typography-text-color` | `var(--body-text-color-1000)` | Default text color |
|
|
214
|
+
| `--typography-link-color` | `var(--link-on-light-bg-color-500)` | Default link color |
|
|
215
|
+
| `--typography-link-hover-color` | `var(--link-on-light-bg-color-500)` | Link color on hover |
|
|
216
|
+
| `--typography-h1-fz` | `32px` | H1 font size |
|
|
217
|
+
| `--typography-h1-fw` | `700` | H1 font weight |
|
|
218
|
+
| `--typography-h1-lh` | `32px` | H1 line height |
|
|
219
|
+
| `--typography-h2-fz` | `24px` | H2 font size |
|
|
220
|
+
| `--typography-h2-fw` | `700` | H2 font weight |
|
|
221
|
+
| `--typography-h2-lh` | `32px` | H2 line height |
|
|
222
|
+
| `--typography-h3-fz` | `20px` | H3 font size |
|
|
223
|
+
| `--typography-h3-fw` | `700` | H3 font weight |
|
|
224
|
+
| `--typography-h3-lh` | `20px` | H3 line height |
|
|
225
|
+
| `--typography-h4-fz` | `13px` | H4 font size |
|
|
226
|
+
| `--typography-h4-fw` | `700` | H4 font weight |
|
|
227
|
+
| `--typography-h4-lh` | `17px` | H4 line height |
|
|
228
|
+
| `--typography-h5-fz` | `14px` | H5 font size |
|
|
229
|
+
| `--typography-h5-fw` | `700` | H5 font weight |
|
|
230
|
+
| `--typography-h5-lh` | `17px` | H5 line height |
|
|
231
|
+
| `--typography-text-fz` | `16px` | Text / Paragraph / Link font size |
|
|
232
|
+
| `--typography-text-fw` | `400` | Text / Paragraph / Link font weight |
|
|
233
|
+
| `--typography-text-lh` | `20px` | Text / Paragraph / Link line height |
|
|
234
|
+
|
|
235
|
+
### Per-element inline tokens (set by props)
|
|
236
|
+
|
|
237
|
+
These are injected as inline styles by the component and take precedence over scale tokens. You do not normally set them manually.
|
|
238
|
+
|
|
239
|
+
| Token | Set by prop |
|
|
240
|
+
| -------------- | ------------ |
|
|
241
|
+
| `--text-color` | `color` |
|
|
242
|
+
| `--text-fz` | `size` |
|
|
243
|
+
| `--text-fw` | `weight` |
|
|
244
|
+
| `--text-lh` | `lineHeight` |
|
|
245
|
+
| `--text-ff` | `font` |
|
|
246
|
+
| `--text-align` | `align` |
|
|
247
|
+
|
|
248
|
+
### Override examples
|
|
215
249
|
|
|
216
250
|
```css
|
|
251
|
+
/* Restyle the entire typography scale for a branded theme */
|
|
217
252
|
:root {
|
|
218
|
-
--
|
|
219
|
-
--
|
|
253
|
+
--typography-font-family: 'Inter', sans-serif;
|
|
254
|
+
--typography-text-color: #1a1a1a;
|
|
255
|
+
--typography-link-color: #2563eb;
|
|
256
|
+
--typography-link-hover-color: #1d4ed8;
|
|
257
|
+
|
|
258
|
+
--typography-h1-fz: 40px;
|
|
259
|
+
--typography-h1-lh: 48px;
|
|
260
|
+
--typography-text-fz: 15px;
|
|
261
|
+
--typography-text-lh: 24px;
|
|
220
262
|
}
|
|
221
263
|
```
|
|
222
264
|
|
|
265
|
+
> **Note on `h4`:** `<Typography.Title level={4}>` renders with `text-transform: uppercase` by default. This is a deliberate design-system choice; override it with a scoped CSS rule if needed.
|
|
266
|
+
|
|
223
267
|
## Development
|
|
224
268
|
|
|
225
269
|
```bash
|
package/dist/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{Typography as t}from"antd";import
|
|
1
|
+
import{Typography as t}from"antd";import r,{useMemo as o}from"react";import{cssVarResolver as a}from"@fvc/utils";function e(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}"function"==typeof SuppressedError&&SuppressedError;var p,n={exports:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|
|
5
5
|
http://jedwatson.github.io/classnames
|
|
6
|
-
*/var
|
|
6
|
+
*/var y,h=e((p||(p=1,y=n,function(){var t={}.hasOwnProperty;function r(){for(var t="",r=0;r<arguments.length;r++){var e=arguments[r];e&&(t=a(t,o(e)))}return t}function o(o){if("string"==typeof o||"number"==typeof o)return o;if("object"!=typeof o)return"";if(Array.isArray(o))return r.apply(null,o);if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]"))return o.toString();var e="";for(var p in o)t.call(o,p)&&o[p]&&(e=a(e,p));return e}function a(t,r){return r?t?t+" "+r:t+r:t}y.exports?(r.default=r,y.exports=r):window.classNames=r}()),n.exports));!function(t,r){void 0===r&&(r={});var o=r.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css","top"===o&&a.firstChild?a.insertBefore(e,a.firstChild):a.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}}(":root {\n /* Typography Default Variables */\n --typography-font-family: 'Roboto', sans-serif;\n --typography-text-color: var(--body-text-color-1000);\n --typography-link-color: var(--link-on-light-bg-color-500);\n --typography-link-hover-color: var(--link-on-light-bg-color-500);\n /* Typography Scale - h1 */\n --typography-h1-fz: 32px;\n --typography-h1-fw: 700;\n --typography-h1-lh: 32px;\n /* Typography Scale - h2 */\n --typography-h2-fz: 24px;\n --typography-h2-fw: 700;\n --typography-h2-lh: 32px;\n /* Typography Scale - h3 */\n --typography-h3-fz: 20px;\n --typography-h3-fw: 700;\n --typography-h3-lh: 20px;\n /* Typography Scale - h4 */\n --typography-h4-fz: 13px;\n --typography-h4-fw: 700;\n --typography-h4-lh: 17px;\n /* Typography Scale - h5 */\n --typography-h5-fz: 14px;\n --typography-h5-fw: 700;\n --typography-h5-lh: 17px;\n /* Typography Scale - text / paragraph / article */\n --typography-text-fz: 16px;\n --typography-text-fw: 400;\n --typography-text-lh: 20px;\n}\n\n.fvc-typography + h1.fvc-typography, .fvc-typography + h2.fvc-typography, .fvc-typography + h3.fvc-typography, .fvc-typography + h4.fvc-typography, .fvc-typography + h5.fvc-typography,\n.fvc-typography p,\n.fvc-typography div {\n margin: 0;\n}\n\n.fvc-typography {\n color: var(--text-color, var(--typography-text-color));\n font-family: var(--text-ff, var(--typography-font-family));\n text-align: var(--text-align);\n}\n\narticle.fvc-typography,\nspan.fvc-typography,\ndiv.fvc-typography {\n color: var(--text-color, var(--typography-text-color));\n font-size: var(--text-fz, var(--typography-text-fz));\n font-weight: var(--text-fw, var(--typography-text-fw));\n line-height: var(--text-lh, var(--typography-text-lh));\n}\n\na.fvc-typography {\n color: var(--text-color, var(--typography-text-color));\n font-size: var(--text-fz, var(--typography-text-fz));\n font-weight: var(--text-fw, var(--typography-text-fw));\n line-height: var(--text-lh, var(--typography-text-lh));\n color: var(--text-color, var(--typography-link-color));\n text-decoration: underline;\n}\n\na.fvc-typography:hover {\n color: var(--text-color, var(--typography-link-hover-color));\n}\n\nh1.fvc-typography {\n color: var(--text-color, var(--typography-text-color));\n font-size: var(--text-fz, var(--typography-h1-fz));\n font-weight: var(--text-fw, var(--typography-h1-fw));\n line-height: var(--text-lh, var(--typography-h1-lh));\n}\n\nh2.fvc-typography {\n color: var(--text-color, var(--typography-text-color));\n font-size: var(--text-fz, var(--typography-h2-fz));\n font-weight: var(--text-fw, var(--typography-h2-fw));\n line-height: var(--text-lh, var(--typography-h2-lh));\n}\n\nh3.fvc-typography {\n color: var(--text-color, var(--typography-text-color));\n font-size: var(--text-fz, var(--typography-h3-fz));\n font-weight: var(--text-fw, var(--typography-h3-fw));\n line-height: var(--text-lh, var(--typography-h3-lh));\n}\n\nh4.fvc-typography {\n color: var(--text-color, var(--typography-text-color));\n font-size: var(--text-fz, var(--typography-h4-fz));\n font-weight: var(--text-fw, var(--typography-h4-fw));\n line-height: var(--text-lh, var(--typography-h4-lh));\n text-transform: uppercase;\n}\n\nh5.fvc-typography {\n color: var(--text-color, var(--typography-text-color));\n font-size: var(--text-fz, var(--typography-h5-fz));\n font-weight: var(--text-fw, var(--typography-h5-fw));\n line-height: var(--text-lh, var(--typography-h5-lh));\n}");const l="fvc-typography";function f(t){const e=e=>{var{align:p,color:n,className:y,font:f="Montserrat",lineHeight:g,size:c,testId:i,underline:v=!1,weight:x}=e,s=function(t,r){var o={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&r.indexOf(a)<0&&(o[a]=t[a]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var e=0;for(a=Object.getOwnPropertySymbols(t);e<a.length;e++)r.indexOf(a[e])<0&&Object.prototype.propertyIsEnumerable.call(t,a[e])&&(o[a[e]]=t[a[e]])}return o}(e,["align","color","className","font","lineHeight","size","testId","underline","weight"]);const u=h(l,y,{[`${l}-underline`]:v}),d=o(()=>Object.assign({"--text-color":n,"--text-ff":f,"--text-lh":a(g),"--text-fz":a(c),"--text-fw":x,"--text-align":p},s.style),[p,n,f,g,s.style,c,x]);return r.createElement(t,Object.assign({},s,{prefixCls:l,className:u,"data-test-id":i,style:d}))};return e.displayName=t.displayName,e}const g=f(t),c=f(t.Title),i=f(t.Text),v=f(t.Paragraph),x=f(t.Link);g.Title=c,g.Text=i,g.Paragraph=v,g.Link=x;export{g as Typography};
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fvc/typography",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3-next-6b8cbfd15ef8dcb6b5e4daff4edbe4b03517b606",
|
|
4
4
|
"main": "./dist/lib/index.js",
|
|
5
5
|
"types": "./dist/lib/typography/src/index.d.ts",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist/lib/index.js",
|
|
8
8
|
"dist/lib/typography",
|
|
9
|
-
"package.json"
|
|
9
|
+
"package.json",
|
|
10
|
+
"README.md"
|
|
10
11
|
],
|
|
11
12
|
"exports": {
|
|
12
13
|
".": {
|