vite-plugin-capsize-radix 0.0.7 → 0.0.9

package/README.md

@@ -81,8 +81,20 @@ to be slightly smaller than on desktop. We do that by shifting the text a size s
 
 ## Parameters:
 
-* __outputPath (string): Required__: The file path where the generated CSS or design tokens should be saved.
-* __fontSizes (number[]): Optional__: An array of numerical font size values (presumably in pixels). Defaults to [9, 11, 12, 14, 18, 24, 36, 48, 64].
-* __lineHeights (number[]): Optional__: An array of numerical line height values. Defaults to [21, 24, 26, 27, 29, 36, 44, 52, 64].
-* __defaultFontStack (FontMetrics[])__: Optional. An array of `FontMetrics` objects. Defaults to a System Font stack.
-* __headingFontStack (FontMetrics[])__: Optional. An array of `FontMetrics` objects. Defaults to your `defaultFontStack`.
+* __outputPath (string): Required__. The file path where the generated CSS or design tokens should be saved.
+* __textStyles (TextStyle[]): Optional__. An array of objects, each representing a text style. Each object contains two properties: `fontSize` and `lineHeight`, which are numerical values, pixels for `fontSize` and pixels or relative value for `lineHeight`. Defaults to:
+    ```ts
+    [
+      { fontSize: 9, lineHeight: 21 },
+      { fontSize: 11, lineHeight: 24 },
+      { fontSize: 12, lineHeight: 26 },
+      { fontSize: 14, lineHeight: 27 },
+      { fontSize: 18, lineHeight: 29 },
+      { fontSize: 24, lineHeight: 36 },
+      { fontSize: 36, lineHeight: 44 },
+      { fontSize: 48, lineHeight: 52 },
+      { fontSize: 64, lineHeight: 64 }
+    ]
+    ```
+* __defaultFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to a System Font stack.
+* __headingFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to your `defaultFontStack`.

package/dist/index.d.mts

@@ -1,13 +1,16 @@
 import { Plugin } from 'vite';
 import { FontMetrics } from '@capsizecss/core';
 
+interface TextStyle {
+    fontSize: number;
+    lineHeight: number;
+}
 interface Options {
     outputPath: string;
-    fontSizes?: number[];
-    lineHeights?: number[];
+    textStyles?: TextStyle[];
     defaultFontStack?: FontMetrics[];
     headingFontStack?: FontMetrics[];
 }
-declare function capsizeRadixPlugin({ outputPath, fontSizes, lineHeights, defaultFontStack, headingFontStack, }: Options): Plugin;
+declare function capsizeRadixPlugin({ outputPath, textStyles, defaultFontStack, headingFontStack, }: Options): Plugin;
 
 export { capsizeRadixPlugin };

package/dist/index.d.ts

@@ -1,13 +1,16 @@
 import { Plugin } from 'vite';
 import { FontMetrics } from '@capsizecss/core';
 
+interface TextStyle {
+    fontSize: number;
+    lineHeight: number;
+}
 interface Options {
     outputPath: string;
-    fontSizes?: number[];
-    lineHeights?: number[];
+    textStyles?: TextStyle[];
     defaultFontStack?: FontMetrics[];
     headingFontStack?: FontMetrics[];
 }
-declare function capsizeRadixPlugin({ outputPath, fontSizes, lineHeights, defaultFontStack, headingFontStack, }: Options): Plugin;
+declare function capsizeRadixPlugin({ outputPath, textStyles, defaultFontStack, headingFontStack, }: Options): Plugin;
 
 export { capsizeRadixPlugin };

package/dist/index.js

@@ -117,9 +117,9 @@ async function generate(options) {
   } else {
     headingFontStack = defaultFontStack;
   }
-  const mobileFontData = [options.fontSizes[0], ...options.fontSizes].map(
-    (fontSize, i) => {
-      const lineGap = options.lineHeights[i - 1] - fontSize;
+  const mobileFontData = [options.textStyles[0], ...options.textStyles].map(
+    ({ fontSize, lineHeight }, i) => {
+      const lineGap = lineHeight - fontSize;
       const style = (0, import_core.createStyleString)(
         `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
         {
@@ -139,8 +139,8 @@ async function generate(options) {
       };
     }
   );
-  const fontData = options.fontSizes.map((fontSize, i) => {
-    const lineGap = options.lineHeights[i] - fontSize;
+  const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
+    const lineGap = lineHeight - fontSize;
     const style = (0, import_core.createStyleString)(
       `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
       {
@@ -160,33 +160,33 @@ async function generate(options) {
     };
   });
   const mobileTextStyles = (0, import_core.createStyleString)(`rt-Text`, {
-    capHeight: options.fontSizes[1],
-    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    capHeight: options.textStyles[1].fontSize,
+    lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const mobileEmStyles = (0, import_core.createStyleString)(`rt-Em`, {
-    capHeight: options.fontSizes[1],
-    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    capHeight: options.textStyles[1].fontSize,
+    lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const mobileQuoteStyles = (0, import_core.createStyleString)(`rt-Quote`, {
-    capHeight: options.fontSizes[1],
-    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    capHeight: options.textStyles[1].fontSize,
+    lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const textStyles = (0, import_core.createStyleString)(`rt-Text`, {
-    capHeight: options.fontSizes[2],
-    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    capHeight: options.textStyles[2].fontSize,
+    lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const emStyles = (0, import_core.createStyleString)(`rt-Em`, {
-    capHeight: options.fontSizes[2],
-    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    capHeight: options.textStyles[2].fontSize,
+    lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const quoteStyles = (0, import_core.createStyleString)(`rt-Quote`, {
-    capHeight: options.fontSizes[2],
-    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    capHeight: options.textStyles[2].fontSize,
+    lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   import_fs.default.writeFileSync(
@@ -207,8 +207,17 @@ async function generate(options) {
 }
 function capsizeRadixPlugin({
   outputPath,
-  fontSizes = [9, 11, 12, 14, 18, 24, 36, 48, 64],
-  lineHeights = [21, 24, 26, 27, 29, 36, 44, 52, 64],
+  textStyles = [
+    { fontSize: 9, lineHeight: 19 },
+    { fontSize: 11, lineHeight: 23 },
+    { fontSize: 12, lineHeight: 25 },
+    { fontSize: 14, lineHeight: 28 },
+    { fontSize: 18, lineHeight: 30 },
+    { fontSize: 24, lineHeight: 36 },
+    { fontSize: 36, lineHeight: 44 },
+    { fontSize: 48, lineHeight: 52 },
+    { fontSize: 64, lineHeight: 64 }
+  ],
   defaultFontStack,
   headingFontStack
 }) {
@@ -217,8 +226,7 @@ function capsizeRadixPlugin({
     buildStart() {
       generate({
         outputPath,
-        fontSizes,
-        lineHeights,
+        textStyles,
         defaultFontStack,
         headingFontStack
       });

package/dist/index.mjs

@@ -87,9 +87,9 @@ async function generate(options) {
   } else {
     headingFontStack = defaultFontStack;
   }
-  const mobileFontData = [options.fontSizes[0], ...options.fontSizes].map(
-    (fontSize, i) => {
-      const lineGap = options.lineHeights[i - 1] - fontSize;
+  const mobileFontData = [options.textStyles[0], ...options.textStyles].map(
+    ({ fontSize, lineHeight }, i) => {
+      const lineGap = lineHeight - fontSize;
       const style = createStyleString(
         `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
         {
@@ -109,8 +109,8 @@ async function generate(options) {
       };
     }
   );
-  const fontData = options.fontSizes.map((fontSize, i) => {
-    const lineGap = options.lineHeights[i] - fontSize;
+  const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
+    const lineGap = lineHeight - fontSize;
     const style = createStyleString(
       `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
       {
@@ -130,33 +130,33 @@ async function generate(options) {
     };
   });
   const mobileTextStyles = createStyleString(`rt-Text`, {
-    capHeight: options.fontSizes[1],
-    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    capHeight: options.textStyles[1].fontSize,
+    lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const mobileEmStyles = createStyleString(`rt-Em`, {
-    capHeight: options.fontSizes[1],
-    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    capHeight: options.textStyles[1].fontSize,
+    lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const mobileQuoteStyles = createStyleString(`rt-Quote`, {
-    capHeight: options.fontSizes[1],
-    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    capHeight: options.textStyles[1].fontSize,
+    lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const textStyles = createStyleString(`rt-Text`, {
-    capHeight: options.fontSizes[2],
-    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    capHeight: options.textStyles[2].fontSize,
+    lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const emStyles = createStyleString(`rt-Em`, {
-    capHeight: options.fontSizes[2],
-    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    capHeight: options.textStyles[2].fontSize,
+    lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   const quoteStyles = createStyleString(`rt-Quote`, {
-    capHeight: options.fontSizes[2],
-    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    capHeight: options.textStyles[2].fontSize,
+    lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
   fs.writeFileSync(
@@ -177,8 +177,17 @@ async function generate(options) {
 }
 function capsizeRadixPlugin({
   outputPath,
-  fontSizes = [9, 11, 12, 14, 18, 24, 36, 48, 64],
-  lineHeights = [21, 24, 26, 27, 29, 36, 44, 52, 64],
+  textStyles = [
+    { fontSize: 9, lineHeight: 19 },
+    { fontSize: 11, lineHeight: 23 },
+    { fontSize: 12, lineHeight: 25 },
+    { fontSize: 14, lineHeight: 28 },
+    { fontSize: 18, lineHeight: 30 },
+    { fontSize: 24, lineHeight: 36 },
+    { fontSize: 36, lineHeight: 44 },
+    { fontSize: 48, lineHeight: 52 },
+    { fontSize: 64, lineHeight: 64 }
+  ],
   defaultFontStack,
   headingFontStack
 }) {
@@ -187,8 +196,7 @@ function capsizeRadixPlugin({
     buildStart() {
       generate({
         outputPath,
-        fontSizes,
-        lineHeights,
+        textStyles,
         defaultFontStack,
         headingFontStack
       });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-capsize-radix",
   "description": "Great Typography with Radix & Capsize",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "@capsizecss/core": "^4.1.0",