{"_id":"@asyarb/capsize-fluid","name":"@asyarb/capsize-fluid","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@asyarb/capsize-fluid","version":"1.0.1","description":"Responsive capsize utils","repository":{"type":"git","url":"git+https://github.com/asyarb/capsize-fluid.git"},"author":{"name":"Anthony Yarbrough","email":"asyarb@hawaii.edu"},"license":"MIT","publishConfig":{"access":"public"},"main":"./dist/index.js","module":"./dist/index.mjs","exports":{"require":"./dist/index.js","import":"./dist/index.mjs"},"types":"./dist/index.d.ts","scripts":{"dev":"vitest","build":"NODE_ENV=production tsup","test":"vitest run","prepublishOnly":"pnpm run build"},"dependencies":{"@capsizecss/core":"^3.0.0"},"devDependencies":{"@types/node":"^17.0.31","prettier":"^2.2.1","tsup":"5.12.6","typescript":"4.6.4","vite":"^2.9.6","vitest":"0.10.0","@capsizecss/metrics":"^0.2.0"},"gitHead":"53a864914987e9fa302ec3ee589451657d442270","bugs":{"url":"https://github.com/asyarb/capsize-fluid/issues"},"homepage":"https://github.com/asyarb/capsize-fluid#readme","_id":"@asyarb/capsize-fluid@1.0.1","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-ek3QIx45yih0F78lJFtsC676Hp7UMWvvMftnRWlLXbwfH5knGi3/xil8+LQ1GmBeR0CP2004HVGGp+8CVgYy8w==","shasum":"bb59355badf841efd59fcaf2284fd710094b0346","tarball":"https://registry.npmjs.org/@asyarb/capsize-fluid/-/capsize-fluid-1.0.1.tgz","fileCount":6,"unpackedSize":13098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHIrBQZUWrRGTqQj1ntUqya2FL7ff4XBbqLXeWDpJEuUAiBlssh4HRjVR0PpqIfuHfxpanfJqQflksLWChtbwujXsw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifGXGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUkA/5AUkMpqVgfmSSyueVxsxmdqZYkGHDrD2UXIm3ktUNyIRcgoCu\r\n3psF+fmWJxvyUaq4+8l0guTj3MdeXkcWWa2XVnBELWNlcIklW6btGftF1pkx\r\ni+eeXJFzBy563BqGO3pJxds5DXMPVIktXZZ7i/1sarFrzHsH7qTJPXz2SJwL\r\nTVFSkFnEVkMu1HjSYKabVQOiv1EBSuulyvmj1dwxrClyr/N6WpFdv8Y9T4Q2\r\nplOKtMROFxDasWrQoJdNUfSXTPChGScsFI6aiO5qlGdqqX2gC+y8XnRz4xO0\r\ndj97EAnzP+T9QRAT5BI3PDFvFm0NAhNBXVtj/S/JVEQ0VlIbSwxcmtEzEkVa\r\nTBNAtqDeq9tl/Q0OHPcBDCEZhq+/e8l5WMnscmXIt3rytVFnlqHElpu1jWKK\r\nUQ0pZfhh65FvxAH3MGQdvWgI9a30ybmvmfnXyvHGw0JWdmkoKwGsxUs9HzDG\r\nYAMo6EPdzxRbOBV1bjvOuVnjSoAK/PvRnzof54Y74F89LO7foc8jiLR6t4hv\r\nbzk0hfM/+WpT2jNNW30E6mFw2ZRICgUGfjMKt/nM2Nk/AWQLEVYcC66ksiXV\r\njeRXmXiYbV6GG0Bs7D4wSPPxKcYT7f25Bpk+otDq3aKv1Znb5WAARpKGeH5n\r\n4BlHDOEMHs4Ri2v+WOUuPeBd0P8SpyS3LeI=\r\n=Ybuf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyarb","email":"asyarb@hawaii.edu"},"directories":{},"maintainers":[{"name":"asyarb","email":"asyarb@hawaii.edu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/capsize-fluid_1.0.1_1652319685978_0.23387437673435207"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-12T01:41:25.909Z","1.0.1":"2022-05-12T01:41:26.159Z","modified":"2022-05-12T01:41:26.306Z"},"maintainers":[{"name":"asyarb","email":"asyarb@hawaii.edu"}],"description":"Responsive capsize utils","homepage":"https://github.com/asyarb/capsize-fluid#readme","repository":{"type":"git","url":"git+https://github.com/asyarb/capsize-fluid.git"},"author":{"name":"Anthony Yarbrough","email":"asyarb@hawaii.edu"},"bugs":{"url":"https://github.com/asyarb/capsize-fluid/issues"},"license":"MIT","readme":"# Capsize Fluid <!-- omit in toc -->\n\nA small abstraction over\n[`@capsizecss/core`](https://github.com/seek-oss/capsize) to create fluid\n\"capsized\" typographic CSS styles.\n\nBased on the fluid typography detailed in\n[Smashing Magazine](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/).\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [`createFluidStyleObject`](#createfluidstyleobject)\n    - [Example Output](#example-output)\n  - [`createFluidStyleString`](#createfluidstylestring)\n    - [Example Output](#example-output-1)\n  - [`precomputeFluidValues`](#precomputefluidvalues)\n- [CSS Variable Version](#css-variable-version)\n- [License](#license)\n\n## Installation\n\n```bash\n# npm\nnpm i --save-dev @asyarb/capsize-fluid\n```\n\n## Usage\n\n### `createFluidStyleObject`\n\nReturns a CSS-in-JS style object.\n\n```tsx\nimport { createFluidStyleObject } from '@asyarb/capsize-fluid'\nimport metrics from '@capsizecss/metrics/inter'\n\nconst styles = createFluidStyleObject({\n  max: { fontSize: 36, screenSize: 1440 },\n  min: { fontSize: 24, screenSize: 360 },\n  fontMetrics: metrics,\n  lineHeight: 1.25,\n  rootFontSize: 16,\n})\n\nconst Example = () => <div css={styles} />\n```\n\n#### Example Output\n\n```ts\nconst values = {\n  fontSize: \"clamp(1.5rem, 1.1111vw + 1.25rem, 2.25rem)\",\n  lineHeight: \"1.25\",\n  \"::after\": {\n    content: \"\\\\\"\\\\\"\",\n    display: \"table\",\n    marginTop: \"-0.2614em\",\n  },\n  \"::before\": {\n    content: \"\\\\\"\\\\\"\",\n    display: \"table\",\n    marginBottom: \"-0.2614em\",\n  }\n}\n```\n\n### `createFluidStyleString`\n\nReturns a CSS string that can be inserted into a style tag or appended to a\nstylesheet.\n\n```ts\nimport { createFluidStyleString } from '@asyarb/capsize-fluid'\nimport metrics from '@capsizecss/metrics/inter'\n\nconst styleRule = createFluidStyleString('fluid-capsize', {\n  max: { fontSize: 36, screenSize: 1440 },\n  min: { fontSize: 24, screenSize: 360 },\n  fontMetrics: metrics,\n  lineHeight: 1.25,\n  rootFontSize: 16,\n})\n\ndocument.write(`\n  <style type=\"text/css\">\n    ${styleRule}\n  </style>\n  <div class=\"fluid-capsize\">\n    My capsized text 🛶\n  </div>\n`)\n```\n\n#### Example Output\n\n```css\n.fluid-capsize {\n  font-size: clamp(1.5rem, 1.1111vw + 1.25rem, 2.25rem);\n  line-height: 1.25;\n}\n\n.fluid-capsize::before {\n  content: \\\\'\\\\';\n  display: table;\n  margin-bottom: -0.2614em;\n}\n\n.fluid-capsize::after {\n  content: \\\\'\\\\';\n  display: table;\n  margin-top: -0.2614em;\n}\n```\n\n### `precomputeFluidValues`\n\nReturns all the information required to create styles for a specific fluid font\nsize with the provided options.\n\n```ts\nimport { precomputeFluidValues } from '@asyarb/capsize-fluid'\nimport metrics from '@capsizecss/metrics/inter'\n\nconst values = precomputeFluidValues({\n  max: { fontSize: 36, screenSize: 1440 },\n  min: { fontSize: 24, screenSize: 360 },\n  fontMetrics: interFontMetrics,\n  lineHeight: 1.25,\n  rootFontSize: 16,\n})\n\n// `precomputeFluidValues` returns the following:\ninterface ComputedFluidValues {\n  minFontSize: string\n  maxFontSize: string\n  baselineTrim: string\n  capHeightTrim: string\n  vw: string\n  rem: string\n}\n```\n\n## CSS Variable Version\n\nIf you are looking for a \"plain\" CSS version of this library, checkout this\n[Gist](https://gist.github.com/asyarb/162bf0a8b5d238de01bd2832094727ad).\n\n## License\n\nMIT.\n","readmeFilename":"README.md"}