{"id":13422332,"url":"https://github.com/TylerAPfledderer/chakra-ui-typescale","last_synced_at":"2025-03-15T12:30:39.477Z","repository":{"id":37045530,"uuid":"501399379","full_name":"TylerAPfledderer/chakra-ui-typescale","owner":"TylerAPfledderer","description":"⚖️ A ChakraUI theme extension for generating type scale.","archived":false,"fork":false,"pushed_at":"2023-06-10T01:49:13.000Z","size":3012,"stargazers_count":15,"open_issues_count":6,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-11T04:16:47.404Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@tylerapfledderer/chakra-ui-typescale","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TylerAPfledderer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-06-08T20:22:10.000Z","updated_at":"2024-08-25T17:14:26.000Z","dependencies_parsed_at":"2024-01-16T00:18:56.014Z","dependency_job_id":"cfa9be2b-32e5-4c7f-af83-b2f8c79915e6","html_url":"https://github.com/TylerAPfledderer/chakra-ui-typescale","commit_stats":{"total_commits":135,"total_committers":3,"mean_commits":45.0,"dds":"0.49629629629629635","last_synced_commit":"411b7ab62b136bb67b02d6277ba25b2c696e5d64"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerAPfledderer%2Fchakra-ui-typescale","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerAPfledderer%2Fchakra-ui-typescale/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerAPfledderer%2Fchakra-ui-typescale/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerAPfledderer%2Fchakra-ui-typescale/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TylerAPfledderer","download_url":"https://codeload.github.com/TylerAPfledderer/chakra-ui-typescale/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243730938,"owners_count":20338742,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:00:41.831Z","updated_at":"2025-03-15T12:30:39.074Z","avatar_url":"https://github.com/TylerAPfledderer.png","language":"TypeScript","funding_links":[],"categories":["🛠️ Tools"],"sub_categories":[],"readme":"# withTypeScale for ChakraUI\r\n\r\n![NPM Package License](https://img.shields.io/npm/l/@tylerapfledderer/chakra-ui-typescale?style=for-the-badge)\r\n![LGTM Grade](https://img.shields.io/lgtm/grade/javascript/github/TylerAPfledderer/chakra-ui-typescale?style=for-the-badge)\r\n\r\nA theme extension for ChakraUI to generate a type scale for use with the `Text`\r\nand `Heading` components.\r\n\r\n\u003e Any feedback and help to make the extension better is always welcome! 😁\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm i @tylerapfledderer/chakra-ui-typescale\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add @tylerapfledderer/chakra-ui-typescale\r\n```\r\n\r\n---\r\n\r\n## Usage\r\n\r\nBecause `withTypeScale` is a theme extension, it is included as an additional argument to the\r\n`extendTheme`, along with any other extension that may be used.\r\n\r\n```ts\r\nimport { withTypeScale } from '@tylerapfledderer/chakra-ui-typescale';\r\n\r\nconst customTheme = extendTheme(\r\n  {\r\n    // default custom styles\r\n  },\r\n  withTypeScale({ scale: 1.25 }),\r\n);\r\n\r\nexport default customTheme;\r\n```\r\n\r\n### `scale` prop\r\n\r\nIt requires one prop, referred to as the `scale`. It is a unitless number value,\r\nwith the lowest common value usually `1.067` (or the \"Minor Second\") up to\r\n`1.618` (the \"Golden Ratio\") and any other scale or custom value in between.\r\nThere is a [type-scale generator](https://type-scale.com/) by Jeremy Church for\r\nreference. (Scroll down on the page to see his suggestions on picking a scale\r\nvalue!)\r\n\r\n### `lineHeight` prop _(optional)_\r\n\r\nAn optional prop is the `lineHeight` which is also passed as a unitless number\r\nvalue, but renders as a `rem` value. It needs to be unitless to allow for\r\ncertain calculations on the return to the theme.\r\n\r\nWhy `rem` for the `lineHeight` value? This is to allow easier consistency with\r\nthe different font sizes to stay within a \"baseline\" separation for vertical\r\nrhythm. In other words, if the line height in pixels for a `16px` body copy is\r\n`24px`, and the `h1` is given a font size of `56px`, then the lineHeight for the\r\n`h1` should be `3 * 24 = 72px`. This means the `h1` takes up three \"rows\" in the\r\nbase line height.\r\n\r\nThis `lineHeight` value is also used to generate a new set of `space` theme tokens specifically for the vertical rhythm in line with the type scale. This provides spacing consistency between text content, regardless of any other content that may not fit in the baseline.\r\n\r\n\u003e To learn more on vertical rhythm check out the discussion from designer Matej\r\n\u003e Latin on his site\r\n\u003e [BetterWebType.com](https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/#vertical-rhythm)\r\n\r\n### `isClamped` prop _(optional)_\r\n\r\n\u003e Defaults to `false`\r\n\r\nThis prop toggles between the use of custom functionality with the CSS `clamp()` function, or Chakra's breakpoint array feature. This is applied to the `Heading` component font sizes and line heights generated in the `sizes` theme object.\r\n\r\n- If `true` a custom function with `clamp()` is used so the font sizes and line heights are scaled gradually throughout screen sizes instead of breakpoints. By default, the minimum screen size set is `375px` and the maximum screen size is `640px`.\r\n  - Instead of true, you can also define an object to set a `minVW` and/or `maxVW` in pixels.\r\n\r\n```ts\r\nwithTypeScale({\r\n  scale: 1.25,\r\n  lineHeight: 1.45,\r\n  isClamped: { minVW: 300, maxVW: 1200 },\r\n});\r\n```\r\n\r\n- If `false` Chakra's breakpoint array is used to declare change of the font sizes and line heights via a sensible breakpoint. (breakpoint used is `min-width` 48em, aka `md`). For more information, see Chakra UI's page on [Responsive Styles](https://chakra-ui.com/docs/styled-system/responsive-styles)\r\n\r\n---\r\n\r\n## Return Object\r\n\r\n`withTypeScale` generates the following set of token values for sizing:\r\n\r\n`['sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']`\r\n\r\nThese are then paired with each value in the scale as font sizes, from a text\r\nused one smaller than the body copy up to a size that can be for the `h1` tag.\r\nSince some projects may only require 3 of the six heading and/or of drastically\r\nvarying sizes, any of the sizes in scales can certainly be used for any heading\r\n(give the `h3` element a font size from the `lg` token, say, instead of `3xl`).\r\n\r\nThe `Text` component gets a base style `lineHeight` of the `base` token line\r\nheight value.\r\n\r\nBoth the `Heading` and `Text` components receive a base style `marginBottom` of the `vertical.2` token denoting the line height value in `rem`. (See below) They also receive an object for its `sizes` group of `fontSize` /\r\n`lineHeight` array pairs which are also assigned the same token values. See the\r\nsection in the ChakraUI docsite on\r\n[Changing font size](https://chakra-ui.com/docs/components/typography/heading#changing-font-size)\r\nto get an idea on how `withTypeScale` returns a similar set.\r\n\r\nThis extension also generates a subset of tokens under the `space` theme object with the object name `vertical`. There are 13 whole-number tokens, with values equal to multiple of half the given `lineHeight` from the extension's props in `rem`.\r\n\r\n\u003e Using whole numbers to prevent confusion and minimize complexity when calling the tokens.\r\n\u003e i.e. `vertical.1, vertical.2` instead of `vertical.1, vertical.1.5`\r\n\r\n```js\r\n// lineHeight value: 1.5\r\n{\r\n  space: {\r\n    // Other values\r\n    vertical: {\r\n      1: \"0.75rem\",\r\n      2: \"1.5rem\",\r\n      3: \"2.25rem\"\r\n      // etc. up to 13\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n\u003e **So use the even token numbers if you want to use multiples of the line height!**\r\n\r\n### Extended Theme Output\r\n\r\n```ts\r\n{\r\n  fontSizes: fontSizesObj,\r\n  space: {\r\n    vertical,\r\n  },\r\n  components: {\r\n    Heading: {\r\n      baseStyle: {\r\n        marginBottom: vertical[2],\r\n      },\r\n      sizes: sizesObj,\r\n    },\r\n    Text: {\r\n      baseStyle: {\r\n        lineHeight: sizesObj.base.lineHeight,\r\n        marginBottom: vertical[2],\r\n      },\r\n      sizes: sizesObj,\r\n    },\r\n  },\r\n}\r\n```\r\n\r\n## Future Considerations\r\n\r\n- As the extension gets used, there may be discovery of other ways to generate\r\n  the values more efficiently or with more flexibility.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTylerAPfledderer%2Fchakra-ui-typescale","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTylerAPfledderer%2Fchakra-ui-typescale","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTylerAPfledderer%2Fchakra-ui-typescale/lists"}