feat: add Fluid Typography Generator extension for VSCode

- Implemented core functionality to generate fluid typography CSS variables based on user-defined breakpoints and font sizes.
- Created configuration options for output format (Tailwind or vanilla CSS) and rounding settings.
- Added input parsing for settings from text files or VSCode interface.
- Developed CSS generation logic with support for `clamp()` and optional rounding.
- Included tests for parsing settings, generating CSS, and inserting text at selection in the editor.
- Documented project details and usage in project.md.
- Added example CSS output in typography.css.
This commit is contained in:
Keith Solomon
2026-06-06 22:21:22 -05:00
commit fa3df3e3f4
17 changed files with 4310 additions and 0 deletions
+37
View File
@@ -0,0 +1,37 @@
# Project: Fluid Typography Generator extension for VSCode
## Description
A VSCode extension to generate fluid typography CSS variables for themes.
Given a set of font sizes, this tool calculates the appropriate CSS `clamp()` values (with `round()` support) to create fluid typography that scales smoothly between a defined minimum and maximum size based on the viewport width. The generated CSS variables can be used in WordPress themes to ensure consistent and responsive font sizing across different screen sizes.
## Input
A text file containing a list of settings (low/high screen size breakpoints, variable names, and font sizes in pixels), one per line. For example:
```plain
Low: 360px
High: 1920px
text-14px: 12px-14px
text-16px: 14px-16px
text-18px: 16px-18px
text-20px: 18px-20px
text-22px: 20px-22px
text-25px: 22px-25px
text-30px: 25px-30px
text-35px: 30px-35px
text-38px: 35px-38px
text-40px: 38px-40px
text-45px: 40px-45px
text-50px: 45px-50px
text-70px: 50px-70px
text-75px: 70px-75px
```
Optionally, the inputs can be provided through a form in the VSCode extension interface, allowing users to easily customize their settings without editing a text file.
## Output
A CSS file containing the generated fluid typography variables and comments. See `typography.css` for an example.