├── pnpm-workspace.yaml ├── example ├── src │ ├── vite-env.d.ts │ ├── App.css │ ├── index.css │ ├── main.tsx │ ├── assets │ │ └── react.svg │ ├── inter-typography.css │ ├── work-sans-typography.css │ └── App.tsx ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── README.md ├── public │ ├── vite.svg │ ├── inter-typography.css │ ├── ptsans.css │ ├── lato.css │ ├── alegreya.css │ ├── montserrat-arvo.css │ ├── caveat-brush-typography.css │ ├── josefin-typography.css │ └── playfair.css ├── package.json ├── vite.config.ts ├── test-setup.ts └── inter-typography.css ├── .npmrc ├── .prettierrc ├── .eslintrc.cjs ├── tsconfig.json ├── tests ├── plugin.test.ts └── test.css ├── LICENSE ├── package.json ├── .gitignore ├── README.md └── src └── index.ts /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - '.' 3 | - 'example' 4 | -------------------------------------------------------------------------------- /example/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | auto-install-peers=true 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "semi": false, 4 | "tabWidth": 2 5 | } 6 | -------------------------------------------------------------------------------- /example/src/App.css: -------------------------------------------------------------------------------- 1 | .radix-themes, body { 2 | --color-background: var(--indigo-2); 3 | background: var(--color-background); 4 | } 5 | -------------------------------------------------------------------------------- /example/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts", "../src/**/*"] 11 | } 12 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vite-plugin-capsize-radix-ui 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | `eslint:recommended`, 6 | `plugin:@typescript-eslint/recommended`, 7 | `plugin:react-hooks/recommended`, 8 | `plugin:prettier/recommended`, 9 | ], 10 | ignorePatterns: [`dist`, `.eslintrc.cjs`], 11 | parser: `@typescript-eslint/parser`, 12 | plugins: [`react-refresh`, `prettier`], 13 | rules: { 14 | quotes: [`error`, `backtick`], 15 | "react-refresh/only-export-components": [ 16 | `warn`, 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ES2020", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "Bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "strictNullChecks": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "include": ["src"] 25 | } 26 | -------------------------------------------------------------------------------- /tests/plugin.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect, vi, beforeEach } from "vitest" 2 | import { capsizeRadixPlugin } from "../src/index" 3 | import { PluginContext } from "vite" 4 | import inter from "@capsizecss/metrics/inter" 5 | import arial from "@capsizecss/metrics/arial" 6 | 7 | const buildFunctionMock = vi.fn() 8 | const pluginOptions = { 9 | outputPath: `./tests/test.css`, 10 | defaultFontStack: [inter, arial], 11 | } 12 | 13 | describe(`myVitePlugin`, () => { 14 | beforeEach(() => { 15 | buildFunctionMock.mockClear() 16 | }) 17 | 18 | it(`calls build on buildStart`, () => { 19 | const plugin = capsizeRadixPlugin(pluginOptions) 20 | plugin.buildStart(PluginContext) 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src", "../src/*"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Kyle Mathews 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default { 18 | // other rules... 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | sourceType: 'module', 22 | project: ['./tsconfig.json', './tsconfig.node.json'], 23 | tsconfigRootDir: __dirname, 24 | }, 25 | } 26 | ``` 27 | 28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 31 | -------------------------------------------------------------------------------- /example/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /example/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import ReactDOM from "react-dom/client" 3 | import App from "./App.tsx" 4 | import "@radix-ui/themes/styles.css" 5 | import "./App.css" 6 | import { Theme } from "@radix-ui/themes" 7 | import "@fontsource/inter/latin.css" 8 | import "@fontsource/work-sans/latin.css" 9 | import "@fontsource/josefin-sans/latin.css" 10 | import "@fontsource/source-serif-4/latin.css" 11 | import "@fontsource/source-sans-3/latin.css" 12 | import "@fontsource/rosario/latin.css" 13 | import "@fontsource/crimson-text/latin.css" 14 | import "@fontsource/crimson-pro/latin.css" 15 | import "@fontsource/montserrat/latin.css" 16 | import "@fontsource/arvo/latin.css" 17 | import "@fontsource/alegreya/latin.css" 18 | import "@fontsource/alegreya-sans/latin.css" 19 | import "@fontsource/playfair-display/latin.css" 20 | import "@fontsource/fira-sans/latin.css" 21 | import "@fontsource/quattrocento-sans/latin.css" 22 | import "@fontsource/libre-baskerville/latin.css" 23 | import "@fontsource/raleway/latin.css" 24 | import "@fontsource/lato/latin.css" 25 | import "@fontsource/pt-sans/latin.css" 26 | import "@fontsource/oswald/latin.css" 27 | import "@fontsource/merriweather/latin.css" 28 | import "@fontsource/merriweather-sans/latin.css" 29 | import "@fontsource/source-code-pro/latin.css" 30 | 31 | ReactDOM.createRoot(document.getElementById(`root`)!).render( 32 | 33 | 34 | 35 | 36 | 37 | ) 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-plugin-capsize-radix", 3 | "description": "Great Typography with Radix & Capsize", 4 | "version": "0.1.1", 5 | "author": "Kyle Mathews ", 6 | "dependencies": { 7 | "@capsizecss/core": "^4.1.0", 8 | "@capsizecss/metrics": "^3.4.0", 9 | "mustache": "^4.2.0" 10 | }, 11 | "devDependencies": { 12 | "@capsizecss/unpack": "^2.1.0", 13 | "@types/mustache": "^4.2.5", 14 | "@typescript-eslint/eslint-plugin": "^7.4.0", 15 | "@typescript-eslint/parser": "^7.4.0", 16 | "eslint": "^8.57.0", 17 | "eslint-config-prettier": "^9.1.0", 18 | "eslint-config-react": "^1.1.7", 19 | "eslint-plugin-prettier": "^5.1.3", 20 | "eslint-plugin-react": "^7.34.1", 21 | "eslint-plugin-react-hooks": "^4.6.0", 22 | "eslint-plugin-react-refresh": "^0.4.6", 23 | "prettier": "^3.2.5", 24 | "shx": "^0.3.4", 25 | "tsup": "^8.0.2", 26 | "typescript": "^5.4.3", 27 | "vite": "^6.2.3", 28 | "vitest": "^3.0.9" 29 | }, 30 | "directories": { 31 | "example": "example" 32 | }, 33 | "exports": { 34 | ".": { 35 | "types": { 36 | "import": "./dist/index.d.mts", 37 | "require": "./dist/index.d.ts" 38 | }, 39 | "require": "./dist/index.js", 40 | "import": "./dist/index.mjs" 41 | }, 42 | "./package.json": "./package.json" 43 | }, 44 | "files": [ 45 | "dist" 46 | ], 47 | "keywords": [ 48 | "capsizecss", 49 | "radix-ui", 50 | "typography", 51 | "vite-plugin" 52 | ], 53 | "license": "MIT", 54 | "main": "./dist/index.js", 55 | "module": "./dist/index.mjs", 56 | "scripts": { 57 | "build": "pnpm run clean && tsup --external @capsizecss/core --external mustache --external @capsizecss/metrics", 58 | "check": "tsc", 59 | "clean": "shx rm -rf dist *.d.ts", 60 | "prepublishOnly": "pnpm run build", 61 | "test": "echo \"Error: no test specified\" && exit 1" 62 | }, 63 | "tsup": { 64 | "entry": [ 65 | "src/index.ts" 66 | ], 67 | "format": [ 68 | "esm", 69 | "cjs" 70 | ], 71 | "dts": true 72 | }, 73 | "types": "./dist/index.d.ts" 74 | } 75 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@capsizecss/core": "^4.1.0", 14 | "@capsizecss/metrics": "^3.4.0", 15 | "@fontsource/alegreya": "^5.0.12", 16 | "@fontsource/alegreya-sans": "^5.0.12", 17 | "@fontsource/arvo": "^5.0.18", 18 | "@fontsource/caveat-brush": "^5.0.12", 19 | "@fontsource/crimson-pro": "^5.0.17", 20 | "@fontsource/crimson-text": "^5.0.12", 21 | "@fontsource/fira-sans": "^5.0.19", 22 | "@fontsource/inter": "^5.0.17", 23 | "@fontsource/josefin-sans": "^5.0.19", 24 | "@fontsource/lato": "^5.0.20", 25 | "@fontsource/libre-baskerville": "^5.0.12", 26 | "@fontsource/merriweather": "^5.0.12", 27 | "@fontsource/merriweather-sans": "^5.0.12", 28 | "@fontsource/montserrat": "^5.0.17", 29 | "@fontsource/oswald": "^5.0.19", 30 | "@fontsource/playfair-display": "^5.0.23", 31 | "@fontsource/pt-sans": "^5.0.12", 32 | "@fontsource/quattrocento-sans": "^5.0.12", 33 | "@fontsource/raleway": "^5.0.17", 34 | "@fontsource/rosario": "^5.0.12", 35 | "@fontsource/source-code-pro": "^5.2.5", 36 | "@fontsource/source-sans-3": "^5.0.19", 37 | "@fontsource/source-serif-4": "^5.0.17", 38 | "@fontsource/source-serif-pro": "^5.0.8", 39 | "@fontsource/work-sans": "^5.0.17", 40 | "@radix-ui/themes": "^3.0.1", 41 | "@types/mustache": "^4.2.5", 42 | "mustache": "^4.2.0", 43 | "react": "^18.2.0", 44 | "react-dom": "^18.2.0", 45 | "react-icons": "^5.0.1" 46 | }, 47 | "devDependencies": { 48 | "@types/react": "^18.2.66", 49 | "@types/react-dom": "^18.2.22", 50 | "@typescript-eslint/eslint-plugin": "^7.2.0", 51 | "@typescript-eslint/parser": "^7.2.0", 52 | "@vitejs/plugin-react-swc": "^3.5.0", 53 | "eslint": "^8.57.0", 54 | "eslint-plugin-react-hooks": "^4.6.0", 55 | "eslint-plugin-react-refresh": "^0.4.6", 56 | "typescript": "^5.2.2", 57 | "vite": "^6.2.3" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | .DS_Store 132 | -------------------------------------------------------------------------------- /example/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite" 2 | import react from "@vitejs/plugin-react-swc" 3 | import { capsizeRadixPlugin } from "../src/index" 4 | import inter from "@capsizecss/metrics/inter" 5 | import arial from "@capsizecss/metrics/arial" 6 | import workSans from "@capsizecss/metrics/workSans" 7 | import josefin from "@capsizecss/metrics/josefinSans" 8 | import caveatBrush from "@capsizecss/metrics/caveatBrush" 9 | import sourceSerif from "@capsizecss/metrics/sourceSerif4" 10 | import sourcesSans from "@capsizecss/metrics/sourceSans3" 11 | import crimsonText from "@capsizecss/metrics/crimsonText" 12 | import rosario from "@capsizecss/metrics/rosario" 13 | import montserrat from "@capsizecss/metrics/montserrat" 14 | import arvo from "@capsizecss/metrics/arvo" 15 | import alegreya from "@capsizecss/metrics/alegreya" 16 | import alegreyaSans from "@capsizecss/metrics/alegreyaSans" 17 | import firaSans from "@capsizecss/metrics/firaSans" 18 | import playfairDisplay from "@capsizecss/metrics/playfairDisplay" 19 | import quattrocentoSans from "@capsizecss/metrics/quattrocentoSans" 20 | import raleway from "@capsizecss/metrics/raleway" 21 | import libreBaskerville from "@capsizecss/metrics/libreBaskerville" 22 | import lato from "@capsizecss/metrics/lato" 23 | import oswald from "@capsizecss/metrics/oswald" 24 | import pTSans from "@capsizecss/metrics/pTSans" 25 | import merriweather from "@capsizecss/metrics/merriweather" 26 | import merriweatherSans from "@capsizecss/metrics/merriweatherSans" 27 | import sourceCodePro from "@capsizecss/metrics/sourceCodePro" 28 | 29 | // For variable fonts, we need to modify the familyName 30 | // workSans.familyName = `Work Sans Variable` 31 | 32 | // https://vitejs.dev/config/ 33 | export default defineConfig({ 34 | plugins: [ 35 | react(), 36 | capsizeRadixPlugin({ 37 | outputPath: `./public/inter-typography.css`, 38 | defaultFontStack: [inter, arial], 39 | codingFontStack: [sourceCodePro], 40 | }), 41 | capsizeRadixPlugin({ 42 | outputPath: `./public/work-sans-typography.css`, 43 | defaultFontStack: [quattrocentoSans, arial], 44 | headingFontStack: [workSans, arial], 45 | }), 46 | capsizeRadixPlugin({ 47 | outputPath: `./public/josefin-typography.css`, 48 | defaultFontStack: [josefin, arial], 49 | }), 50 | capsizeRadixPlugin({ 51 | outputPath: `./public/caveat-brush-typography.css`, 52 | defaultFontStack: [caveatBrush, arial], 53 | }), 54 | capsizeRadixPlugin({ 55 | outputPath: `./public/source-serif.css`, 56 | headingFontStack: [sourceSerif, arial], 57 | defaultFontStack: [sourcesSans, arial], 58 | }), 59 | capsizeRadixPlugin({ 60 | outputPath: `./public/rosario-crimson.css`, 61 | defaultFontStack: [crimsonText, arial], 62 | headingFontStack: [rosario, arial], 63 | }), 64 | capsizeRadixPlugin({ 65 | outputPath: `./public/montserrat-arvo.css`, 66 | defaultFontStack: [arvo, arial], 67 | headingFontStack: [montserrat, arial], 68 | }), 69 | capsizeRadixPlugin({ 70 | outputPath: `./public/alegreya.css`, 71 | defaultFontStack: [alegreya, arial], 72 | headingFontStack: [alegreyaSans, arial], 73 | }), 74 | capsizeRadixPlugin({ 75 | outputPath: `./public/playfair.css`, 76 | defaultFontStack: [firaSans, arial], 77 | headingFontStack: [playfairDisplay, arial], 78 | }), 79 | capsizeRadixPlugin({ 80 | outputPath: `./public/raleway.css`, 81 | defaultFontStack: [libreBaskerville, arial], 82 | headingFontStack: [raleway, arial], 83 | }), 84 | capsizeRadixPlugin({ 85 | outputPath: `./public/lato.css`, 86 | defaultFontStack: [lato, arial], 87 | }), 88 | capsizeRadixPlugin({ 89 | outputPath: `./public/ptsans.css`, 90 | defaultFontStack: [pTSans, arial], 91 | headingFontStack: [oswald, arial], 92 | }), 93 | capsizeRadixPlugin({ 94 | outputPath: `./public/merriweather.css`, 95 | defaultFontStack: [merriweather, arial], 96 | headingFontStack: [merriweatherSans, arial], 97 | }), 98 | capsizeRadixPlugin({ 99 | outputPath: `./public/system.css`, 100 | }), 101 | ], 102 | }) 103 | -------------------------------------------------------------------------------- /example/test-setup.ts: -------------------------------------------------------------------------------- 1 | /* Auto-generated by scripts/generate-typography-styles.ts */ 2 | /* Override Radix variables */ 3 | .radix-themes { 4 | --default-font-family: Inter, "Inter Fallback", Arial; 5 | --heading-font-family: Inter, "Inter Fallback", Arial; 6 | --font-size-1: 13.75px; 7 | --line-height-1: 16px; 8 | --font-size-2: 16.5px; 9 | --line-height-2: 20px; 10 | --font-size-3: 19.25px; 11 | --line-height-3: 24px; 12 | --font-size-4: 22px; 13 | --line-height-4: 26px; 14 | --font-size-5: 24.75px; 15 | --line-height-5: 26px; 16 | --font-size-6: 27.5px; 17 | --line-height-6: 28px; 18 | --font-size-7: 33px; 19 | --line-height-7: 32px; 20 | --font-size-8: 48.125px; 21 | --line-height-8: 40px; 22 | --font-size-9: 82.5px; 23 | --line-height-9: 60px; 24 | } 25 | 26 | /* Default text styles */ 27 | 28 | .rt-Text { 29 | font-size: 19.25px; 30 | line-height: 24px; 31 | } 32 | 33 | .rt-Text::before { 34 | content: ""; 35 | margin-bottom: -0.2597em; 36 | display: table; 37 | } 38 | 39 | .rt-Text::after { 40 | content: ""; 41 | margin-top: -0.2597em; 42 | display: table; 43 | } 44 | 45 | /* Class names for text elements */ 46 | 47 | .rt-r-size-1:not(.rt-DialogContent) { 48 | font-size: 13.75px; 49 | line-height: 16px; 50 | } 51 | 52 | .rt-r-size-1:not(.rt-DialogContent)::before { 53 | content: ""; 54 | margin-bottom: -0.2182em; 55 | display: table; 56 | } 57 | 58 | .rt-r-size-1:not(.rt-DialogContent)::after { 59 | content: ""; 60 | margin-top: -0.2182em; 61 | display: table; 62 | } 63 | 64 | .rt-r-size-2:not(.rt-DialogContent) { 65 | font-size: 16.5px; 66 | line-height: 20px; 67 | } 68 | 69 | .rt-r-size-2:not(.rt-DialogContent)::before { 70 | content: ""; 71 | margin-bottom: -0.2424em; 72 | display: table; 73 | } 74 | 75 | .rt-r-size-2:not(.rt-DialogContent)::after { 76 | content: ""; 77 | margin-top: -0.2424em; 78 | display: table; 79 | } 80 | 81 | .rt-r-size-3:not(.rt-DialogContent) { 82 | font-size: 19.25px; 83 | line-height: 24px; 84 | } 85 | 86 | .rt-r-size-3:not(.rt-DialogContent)::before { 87 | content: ""; 88 | margin-bottom: -0.2597em; 89 | display: table; 90 | } 91 | 92 | .rt-r-size-3:not(.rt-DialogContent)::after { 93 | content: ""; 94 | margin-top: -0.2597em; 95 | display: table; 96 | } 97 | 98 | .rt-r-size-4:not(.rt-DialogContent) { 99 | font-size: 22px; 100 | line-height: 26px; 101 | } 102 | 103 | .rt-r-size-4:not(.rt-DialogContent)::before { 104 | content: ""; 105 | margin-bottom: -0.2273em; 106 | display: table; 107 | } 108 | 109 | .rt-r-size-4:not(.rt-DialogContent)::after { 110 | content: ""; 111 | margin-top: -0.2273em; 112 | display: table; 113 | } 114 | 115 | .rt-r-size-5:not(.rt-DialogContent) { 116 | font-size: 24.75px; 117 | line-height: 26px; 118 | } 119 | 120 | .rt-r-size-5:not(.rt-DialogContent)::before { 121 | content: ""; 122 | margin-bottom: -0.1616em; 123 | display: table; 124 | } 125 | 126 | .rt-r-size-5:not(.rt-DialogContent)::after { 127 | content: ""; 128 | margin-top: -0.1616em; 129 | display: table; 130 | } 131 | 132 | .rt-r-size-6:not(.rt-DialogContent) { 133 | font-size: 27.5px; 134 | line-height: 28px; 135 | } 136 | 137 | .rt-r-size-6:not(.rt-DialogContent)::before { 138 | content: ""; 139 | margin-bottom: -0.1455em; 140 | display: table; 141 | } 142 | 143 | .rt-r-size-6:not(.rt-DialogContent)::after { 144 | content: ""; 145 | margin-top: -0.1455em; 146 | display: table; 147 | } 148 | 149 | .rt-r-size-7:not(.rt-DialogContent) { 150 | font-size: 33px; 151 | line-height: 32px; 152 | } 153 | 154 | .rt-r-size-7:not(.rt-DialogContent)::before { 155 | content: ""; 156 | margin-bottom: -0.1212em; 157 | display: table; 158 | } 159 | 160 | .rt-r-size-7:not(.rt-DialogContent)::after { 161 | content: ""; 162 | margin-top: -0.1212em; 163 | display: table; 164 | } 165 | 166 | .rt-r-size-8:not(.rt-DialogContent) { 167 | font-size: 48.125px; 168 | line-height: 40px; 169 | } 170 | 171 | .rt-r-size-8:not(.rt-DialogContent)::before { 172 | content: ""; 173 | margin-bottom: -0.0519em; 174 | display: table; 175 | } 176 | 177 | .rt-r-size-8:not(.rt-DialogContent)::after { 178 | content: ""; 179 | margin-top: -0.0519em; 180 | display: table; 181 | } 182 | 183 | .rt-r-size-9:not(.rt-DialogContent) { 184 | font-size: 82.5px; 185 | line-height: 60px; 186 | } 187 | 188 | .rt-r-size-9:not(.rt-DialogContent)::before { 189 | content: ""; 190 | margin-bottom: 0em; 191 | display: table; 192 | } 193 | 194 | .rt-r-size-9:not(.rt-DialogContent)::after { 195 | content: ""; 196 | margin-top: 0em; 197 | display: table; 198 | } 199 | -------------------------------------------------------------------------------- /example/inter-typography.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by scripts/generate-typography-styles.ts */ 2 | /* Override Radix variables */ 3 | .radix-themes { 4 | --default-font-family: Inter, "Inter Fallback", Arial; 5 | --heading-font-family: Inter, "Inter Fallback", Arial; 6 | --font-size-1: 13.75px; 7 | --line-height-1: 16px; 8 | --font-size-2: 16.5px; 9 | --line-height-2: 20px; 10 | --font-size-3: 19.25px; 11 | --line-height-3: 24px; 12 | --font-size-4: 22px; 13 | --line-height-4: 26px; 14 | --font-size-5: 24.75px; 15 | --line-height-5: 26px; 16 | --font-size-6: 27.5px; 17 | --line-height-6: 28px; 18 | --font-size-7: 33px; 19 | --line-height-7: 32px; 20 | --font-size-8: 48.125px; 21 | --line-height-8: 40px; 22 | --font-size-9: 82.5px; 23 | --line-height-9: 60px; 24 | } 25 | 26 | /* Default text styles */ 27 | 28 | .rt-Text { 29 | font-size: 19.25px; 30 | line-height: 24px; 31 | } 32 | 33 | .rt-Text::before { 34 | content: ""; 35 | margin-bottom: -0.2597em; 36 | display: table; 37 | } 38 | 39 | .rt-Text::after { 40 | content: ""; 41 | margin-top: -0.2597em; 42 | display: table; 43 | } 44 | 45 | /* Class names for text elements */ 46 | 47 | .rt-r-size-1:not(.rt-DialogContent) { 48 | font-size: 13.75px; 49 | line-height: 16px; 50 | } 51 | 52 | .rt-r-size-1:not(.rt-DialogContent)::before { 53 | content: ""; 54 | margin-bottom: -0.2182em; 55 | display: table; 56 | } 57 | 58 | .rt-r-size-1:not(.rt-DialogContent)::after { 59 | content: ""; 60 | margin-top: -0.2182em; 61 | display: table; 62 | } 63 | 64 | .rt-r-size-2:not(.rt-DialogContent) { 65 | font-size: 16.5px; 66 | line-height: 20px; 67 | } 68 | 69 | .rt-r-size-2:not(.rt-DialogContent)::before { 70 | content: ""; 71 | margin-bottom: -0.2424em; 72 | display: table; 73 | } 74 | 75 | .rt-r-size-2:not(.rt-DialogContent)::after { 76 | content: ""; 77 | margin-top: -0.2424em; 78 | display: table; 79 | } 80 | 81 | .rt-r-size-3:not(.rt-DialogContent) { 82 | font-size: 19.25px; 83 | line-height: 24px; 84 | } 85 | 86 | .rt-r-size-3:not(.rt-DialogContent)::before { 87 | content: ""; 88 | margin-bottom: -0.2597em; 89 | display: table; 90 | } 91 | 92 | .rt-r-size-3:not(.rt-DialogContent)::after { 93 | content: ""; 94 | margin-top: -0.2597em; 95 | display: table; 96 | } 97 | 98 | .rt-r-size-4:not(.rt-DialogContent) { 99 | font-size: 22px; 100 | line-height: 26px; 101 | } 102 | 103 | .rt-r-size-4:not(.rt-DialogContent)::before { 104 | content: ""; 105 | margin-bottom: -0.2273em; 106 | display: table; 107 | } 108 | 109 | .rt-r-size-4:not(.rt-DialogContent)::after { 110 | content: ""; 111 | margin-top: -0.2273em; 112 | display: table; 113 | } 114 | 115 | .rt-r-size-5:not(.rt-DialogContent) { 116 | font-size: 24.75px; 117 | line-height: 26px; 118 | } 119 | 120 | .rt-r-size-5:not(.rt-DialogContent)::before { 121 | content: ""; 122 | margin-bottom: -0.1616em; 123 | display: table; 124 | } 125 | 126 | .rt-r-size-5:not(.rt-DialogContent)::after { 127 | content: ""; 128 | margin-top: -0.1616em; 129 | display: table; 130 | } 131 | 132 | .rt-r-size-6:not(.rt-DialogContent) { 133 | font-size: 27.5px; 134 | line-height: 28px; 135 | } 136 | 137 | .rt-r-size-6:not(.rt-DialogContent)::before { 138 | content: ""; 139 | margin-bottom: -0.1455em; 140 | display: table; 141 | } 142 | 143 | .rt-r-size-6:not(.rt-DialogContent)::after { 144 | content: ""; 145 | margin-top: -0.1455em; 146 | display: table; 147 | } 148 | 149 | .rt-r-size-7:not(.rt-DialogContent) { 150 | font-size: 33px; 151 | line-height: 32px; 152 | } 153 | 154 | .rt-r-size-7:not(.rt-DialogContent)::before { 155 | content: ""; 156 | margin-bottom: -0.1212em; 157 | display: table; 158 | } 159 | 160 | .rt-r-size-7:not(.rt-DialogContent)::after { 161 | content: ""; 162 | margin-top: -0.1212em; 163 | display: table; 164 | } 165 | 166 | .rt-r-size-8:not(.rt-DialogContent) { 167 | font-size: 48.125px; 168 | line-height: 40px; 169 | } 170 | 171 | .rt-r-size-8:not(.rt-DialogContent)::before { 172 | content: ""; 173 | margin-bottom: -0.0519em; 174 | display: table; 175 | } 176 | 177 | .rt-r-size-8:not(.rt-DialogContent)::after { 178 | content: ""; 179 | margin-top: -0.0519em; 180 | display: table; 181 | } 182 | 183 | .rt-r-size-9:not(.rt-DialogContent) { 184 | font-size: 82.5px; 185 | line-height: 60px; 186 | } 187 | 188 | .rt-r-size-9:not(.rt-DialogContent)::before { 189 | content: ""; 190 | margin-bottom: 0em; 191 | display: table; 192 | } 193 | 194 | .rt-r-size-9:not(.rt-DialogContent)::after { 195 | content: ""; 196 | margin-top: 0em; 197 | display: table; 198 | } 199 | -------------------------------------------------------------------------------- /example/src/inter-typography.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by scripts/generate-typography-styles.ts */ 2 | /* Override Radix variables */ 3 | .radix-themes { 4 | --default-font-family: Inter, "Inter Fallback", Arial; 5 | --heading-font-family: Inter, "Inter Fallback", Arial; 6 | --font-size-1: 13.75px; 7 | --line-height-1: 16px; 8 | --font-size-2: 16.5px; 9 | --line-height-2: 20px; 10 | --font-size-3: 19.25px; 11 | --line-height-3: 24px; 12 | --font-size-4: 22px; 13 | --line-height-4: 26px; 14 | --font-size-5: 24.75px; 15 | --line-height-5: 26px; 16 | --font-size-6: 27.5px; 17 | --line-height-6: 28px; 18 | --font-size-7: 33px; 19 | --line-height-7: 32px; 20 | --font-size-8: 48.125px; 21 | --line-height-8: 40px; 22 | --font-size-9: 82.5px; 23 | --line-height-9: 60px; 24 | } 25 | 26 | /* Otherwise gets doesn't sit inline */ 27 | .rt-Link { 28 | display: inline-block; 29 | } 30 | 31 | /* Default text styles */ 32 | 33 | .rt-Text { 34 | font-size: 19.25px; 35 | line-height: 24px; 36 | } 37 | 38 | .rt-Text::before { 39 | content: ""; 40 | margin-bottom: -0.2597em; 41 | display: table; 42 | } 43 | 44 | .rt-Text::after { 45 | content: ""; 46 | margin-top: -0.2597em; 47 | display: table; 48 | } 49 | 50 | /* Class names for text elements */ 51 | 52 | .rt-r-size-1:not(.rt-DialogContent) { 53 | font-size: 13.75px; 54 | line-height: 16px; 55 | } 56 | 57 | .rt-r-size-1:not(.rt-DialogContent)::before { 58 | content: ""; 59 | margin-bottom: -0.2182em; 60 | display: table; 61 | } 62 | 63 | .rt-r-size-1:not(.rt-DialogContent)::after { 64 | content: ""; 65 | margin-top: -0.2182em; 66 | display: table; 67 | } 68 | 69 | .rt-r-size-2:not(.rt-DialogContent) { 70 | font-size: 16.5px; 71 | line-height: 20px; 72 | } 73 | 74 | .rt-r-size-2:not(.rt-DialogContent)::before { 75 | content: ""; 76 | margin-bottom: -0.2424em; 77 | display: table; 78 | } 79 | 80 | .rt-r-size-2:not(.rt-DialogContent)::after { 81 | content: ""; 82 | margin-top: -0.2424em; 83 | display: table; 84 | } 85 | 86 | .rt-r-size-3:not(.rt-DialogContent) { 87 | font-size: 19.25px; 88 | line-height: 24px; 89 | } 90 | 91 | .rt-r-size-3:not(.rt-DialogContent)::before { 92 | content: ""; 93 | margin-bottom: -0.2597em; 94 | display: table; 95 | } 96 | 97 | .rt-r-size-3:not(.rt-DialogContent)::after { 98 | content: ""; 99 | margin-top: -0.2597em; 100 | display: table; 101 | } 102 | 103 | .rt-r-size-4:not(.rt-DialogContent) { 104 | font-size: 22px; 105 | line-height: 26px; 106 | } 107 | 108 | .rt-r-size-4:not(.rt-DialogContent)::before { 109 | content: ""; 110 | margin-bottom: -0.2273em; 111 | display: table; 112 | } 113 | 114 | .rt-r-size-4:not(.rt-DialogContent)::after { 115 | content: ""; 116 | margin-top: -0.2273em; 117 | display: table; 118 | } 119 | 120 | .rt-r-size-5:not(.rt-DialogContent) { 121 | font-size: 24.75px; 122 | line-height: 26px; 123 | } 124 | 125 | .rt-r-size-5:not(.rt-DialogContent)::before { 126 | content: ""; 127 | margin-bottom: -0.1616em; 128 | display: table; 129 | } 130 | 131 | .rt-r-size-5:not(.rt-DialogContent)::after { 132 | content: ""; 133 | margin-top: -0.1616em; 134 | display: table; 135 | } 136 | 137 | .rt-r-size-6:not(.rt-DialogContent) { 138 | font-size: 27.5px; 139 | line-height: 28px; 140 | } 141 | 142 | .rt-r-size-6:not(.rt-DialogContent)::before { 143 | content: ""; 144 | margin-bottom: -0.1455em; 145 | display: table; 146 | } 147 | 148 | .rt-r-size-6:not(.rt-DialogContent)::after { 149 | content: ""; 150 | margin-top: -0.1455em; 151 | display: table; 152 | } 153 | 154 | .rt-r-size-7:not(.rt-DialogContent) { 155 | font-size: 33px; 156 | line-height: 32px; 157 | } 158 | 159 | .rt-r-size-7:not(.rt-DialogContent)::before { 160 | content: ""; 161 | margin-bottom: -0.1212em; 162 | display: table; 163 | } 164 | 165 | .rt-r-size-7:not(.rt-DialogContent)::after { 166 | content: ""; 167 | margin-top: -0.1212em; 168 | display: table; 169 | } 170 | 171 | .rt-r-size-8:not(.rt-DialogContent) { 172 | font-size: 48.125px; 173 | line-height: 40px; 174 | } 175 | 176 | .rt-r-size-8:not(.rt-DialogContent)::before { 177 | content: ""; 178 | margin-bottom: -0.0519em; 179 | display: table; 180 | } 181 | 182 | .rt-r-size-8:not(.rt-DialogContent)::after { 183 | content: ""; 184 | margin-top: -0.0519em; 185 | display: table; 186 | } 187 | 188 | .rt-r-size-9:not(.rt-DialogContent) { 189 | font-size: 82.5px; 190 | line-height: 60px; 191 | } 192 | 193 | .rt-r-size-9:not(.rt-DialogContent)::before { 194 | content: ""; 195 | margin-bottom: 0em; 196 | display: table; 197 | } 198 | 199 | .rt-r-size-9:not(.rt-DialogContent)::after { 200 | content: ""; 201 | margin-top: 0em; 202 | display: table; 203 | } 204 | -------------------------------------------------------------------------------- /example/src/work-sans-typography.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by scripts/generate-typography-styles.ts */ 2 | /* Override Radix variables */ 3 | .radix-themes { 4 | --default-font-family: "Work Sans Variable", "Work Sans Variable Fallback", Arial; 5 | --heading-font-family: "Work Sans Variable", "Work Sans Variable Fallback", Arial; 6 | --font-size-1: 15.1515px; 7 | --line-height-1: 16px; 8 | --font-size-2: 18.1818px; 9 | --line-height-2: 20px; 10 | --font-size-3: 21.2121px; 11 | --line-height-3: 24px; 12 | --font-size-4: 24.2424px; 13 | --line-height-4: 26px; 14 | --font-size-5: 27.2727px; 15 | --line-height-5: 26px; 16 | --font-size-6: 30.303px; 17 | --line-height-6: 28px; 18 | --font-size-7: 36.3636px; 19 | --line-height-7: 32px; 20 | --font-size-8: 53.0303px; 21 | --line-height-8: 40px; 22 | --font-size-9: 90.9091px; 23 | --line-height-9: 60px; 24 | } 25 | 26 | /* Otherwise gets doesn't sit inline */ 27 | .rt-Link { 28 | display: inline-block; 29 | } 30 | 31 | /* Default text styles */ 32 | 33 | .rt-Text { 34 | font-size: 21.2121px; 35 | line-height: 24px; 36 | } 37 | 38 | .rt-Text::before { 39 | content: ""; 40 | margin-bottom: -0.2492em; 41 | display: table; 42 | } 43 | 44 | .rt-Text::after { 45 | content: ""; 46 | margin-top: -0.2222em; 47 | display: table; 48 | } 49 | 50 | /* Class names for text elements */ 51 | 52 | .rt-r-size-1:not(.rt-DialogContent) { 53 | font-size: 15.1515px; 54 | line-height: 16px; 55 | } 56 | 57 | .rt-r-size-1:not(.rt-DialogContent)::before { 58 | content: ""; 59 | margin-bottom: -0.2115em; 60 | display: table; 61 | } 62 | 63 | .rt-r-size-1:not(.rt-DialogContent)::after { 64 | content: ""; 65 | margin-top: -0.1845em; 66 | display: table; 67 | } 68 | 69 | .rt-r-size-2:not(.rt-DialogContent) { 70 | font-size: 18.1818px; 71 | line-height: 20px; 72 | } 73 | 74 | .rt-r-size-2:not(.rt-DialogContent)::before { 75 | content: ""; 76 | margin-bottom: -0.2335em; 77 | display: table; 78 | } 79 | 80 | .rt-r-size-2:not(.rt-DialogContent)::after { 81 | content: ""; 82 | margin-top: -0.2065em; 83 | display: table; 84 | } 85 | 86 | .rt-r-size-3:not(.rt-DialogContent) { 87 | font-size: 21.2121px; 88 | line-height: 24px; 89 | } 90 | 91 | .rt-r-size-3:not(.rt-DialogContent)::before { 92 | content: ""; 93 | margin-bottom: -0.2492em; 94 | display: table; 95 | } 96 | 97 | .rt-r-size-3:not(.rt-DialogContent)::after { 98 | content: ""; 99 | margin-top: -0.2222em; 100 | display: table; 101 | } 102 | 103 | .rt-r-size-4:not(.rt-DialogContent) { 104 | font-size: 24.2424px; 105 | line-height: 26px; 106 | } 107 | 108 | .rt-r-size-4:not(.rt-DialogContent)::before { 109 | content: ""; 110 | margin-bottom: -0.2198em; 111 | display: table; 112 | } 113 | 114 | .rt-r-size-4:not(.rt-DialogContent)::after { 115 | content: ""; 116 | margin-top: -0.1927em; 117 | display: table; 118 | } 119 | 120 | .rt-r-size-5:not(.rt-DialogContent) { 121 | font-size: 27.2727px; 122 | line-height: 26px; 123 | } 124 | 125 | .rt-r-size-5:not(.rt-DialogContent)::before { 126 | content: ""; 127 | margin-bottom: -0.1602em; 128 | display: table; 129 | } 130 | 131 | .rt-r-size-5:not(.rt-DialogContent)::after { 132 | content: ""; 133 | margin-top: -0.1332em; 134 | display: table; 135 | } 136 | 137 | .rt-r-size-6:not(.rt-DialogContent) { 138 | font-size: 30.303px; 139 | line-height: 28px; 140 | } 141 | 142 | .rt-r-size-6:not(.rt-DialogContent)::before { 143 | content: ""; 144 | margin-bottom: -0.1455em; 145 | display: table; 146 | } 147 | 148 | .rt-r-size-6:not(.rt-DialogContent)::after { 149 | content: ""; 150 | margin-top: -0.1185em; 151 | display: table; 152 | } 153 | 154 | .rt-r-size-7:not(.rt-DialogContent) { 155 | font-size: 36.3636px; 156 | line-height: 32px; 157 | } 158 | 159 | .rt-r-size-7:not(.rt-DialogContent)::before { 160 | content: ""; 161 | margin-bottom: -0.1235em; 162 | display: table; 163 | } 164 | 165 | .rt-r-size-7:not(.rt-DialogContent)::after { 166 | content: ""; 167 | margin-top: -0.0965em; 168 | display: table; 169 | } 170 | 171 | .rt-r-size-8:not(.rt-DialogContent) { 172 | font-size: 53.0303px; 173 | line-height: 40px; 174 | } 175 | 176 | .rt-r-size-8:not(.rt-DialogContent)::before { 177 | content: ""; 178 | margin-bottom: -0.0606em; 179 | display: table; 180 | } 181 | 182 | .rt-r-size-8:not(.rt-DialogContent)::after { 183 | content: ""; 184 | margin-top: -0.0336em; 185 | display: table; 186 | } 187 | 188 | .rt-r-size-9:not(.rt-DialogContent) { 189 | font-size: 90.9091px; 190 | line-height: 60px; 191 | } 192 | 193 | .rt-r-size-9:not(.rt-DialogContent)::before { 194 | content: ""; 195 | margin-bottom: -0.0135em; 196 | display: table; 197 | } 198 | 199 | .rt-r-size-9:not(.rt-DialogContent)::after { 200 | content: ""; 201 | margin-top: 0.0135em; 202 | display: table; 203 | } 204 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vite-plugin-capsize-radix 2 | 3 | Generate bulletproof typography css for [@radix-ui/themes](https://www.radix-ui.com/) 4 | 5 | Now changing fonts is as easy as changing colors. 6 | 7 | ## Why 8 | 9 | Getting fonts to look right on the web is [_hard_](https://fantasai.inkedblade.net/style/talks/atypi-2021/atypi-2021-precise-text-alignment.mp4) — so most peoply rely on 10 | a few typography frameworks and fonts. But it doesn't have to be that way. 11 | [Capsize](https://seek-oss.github.io/capsize/) fixes text sizing and layout 12 | allowing for precise text alignment so changing fonts is as easy as changing 13 | colors. 14 | 15 | https://github.com/KyleAMathews/vite-plugin-capsize-radix-ui/assets/71047/3ec5d6ca-bf00-4b79-8552-4e3da3454f52 16 | 17 | Capsize makes fonts render the way you expect them to. With Capsize, if you 18 | assign a font to occupy 16px of height, it _actually_ will. 19 | 20 | This plugin glues Capsize with the fantastic Radix theming components. 21 | 22 | Similar plugins could be built for other meta-frameworks & component libraries — open an issue 23 | if you're interested on collaborating on one. 24 | 25 | ## How to use 26 | 27 | ### Install 28 | 29 | `npm install vite-plugin-capsize-radix` 30 | 31 | ### Add to vite.config.ts 32 | 33 | A sample React config: 34 | ```ts 35 | import { defineConfig } from "vite" 36 | import react from "@vitejs/plugin-react-swc" 37 | import { capsizeRadixPlugin } from "vite-plugin-capsize-radix" 38 | import merriweather from "@capsizecss/metrics/merriweather" 39 | import merriweatherSans from "@capsizecss/metrics/merriweatherSans" 40 | import sourceCodePro from "@capsizecss/metrics/sourceCodePro" 41 | import arial from "@capsizecss/metrics/arial" 42 | 43 | export default defineConfig({ 44 | plugins: [ 45 | react(), 46 | capsizeRadixPlugin({ 47 | // Import this file into your app after you import Radix's CSS. 48 | outputPath: `./public/merriweather.css`, 49 | // Pass in Capsize font metric objects. 50 | defaultFontStack: [merriweather, arial], 51 | headingFontStack: [merriweatherSans, arial], 52 | codingFontStack: [sourceCodePro, arial], 53 | }), 54 | ] 55 | }) 56 | ``` 57 | 58 | ### Using with Radix UI 59 | This plugin overrides all typography related CSS for Radix so you can simply 60 | use their typography components as normal (e.g. ``, ``, ``, etc) 61 | 62 | The plugin sets the variables for Radix's Type scale and Font family for Radix. 63 | It doesn't set Font weight. It sets the strong, em, and quote to use the default font family. 64 | You can set the default, heading, and coding font stacks separately. 65 | 66 | See e.g. the [documentation for ``](https://www.radix-ui.com/themes/docs/components/text). 67 | 68 | They all share a `size` prop from "1" to "10". This corresponds to the optional 69 | `fontSizes` array passed to the plugin e.g. `size="0"` is the first value of 70 | the array, etc. `` defaults to `size="2"` and `` defaults to 71 | `size="6"`. 72 | 73 | As Capsize trims _all_ space around text, you'll find that `` becomes 74 | your best friend for controlling spacing between elements e.g. 75 | 76 | Screenshot 2024-03-28 at 10 44 10 AM 77 | 78 | ### Fallback fonts 79 | 80 | Another great freebie Capsize gives you is it automatically generates CSS for 81 | aligning your fallback font with your main font, which can dramatically improve 82 | the [Cumulative Layout Shift](https://web.dev/cls/) metric for sites that depend on a web font 83 | 84 | ### Custom fonts 85 | 86 | Capsize has precalculated metrics for system and many open source fonts. If you're 87 | using a custom font, you can calculate the font metrics using their [@capsizecss/unpack](https://github.com/seek-oss/capsize?tab=readme-ov-file#unpack) package. 88 | 89 | ## Responsive styles 90 | This plugin automatically generates responsive styles. Typically you want your mobile font-size 91 | to be slightly smaller than on desktop. We do that by shifting the text a size smaller on mobile. 92 | 93 | ## Parameters: 94 | 95 | * __outputPath (string): Required__. The file path where the generated CSS or design tokens should be saved. 96 | * __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: 97 | ```ts 98 | [ 99 | { fontSize: 9, lineHeight: 21 }, 100 | { fontSize: 11, lineHeight: 23 }, 101 | { fontSize: 12, lineHeight: 25 }, 102 | { fontSize: 14, lineHeight: 27 }, 103 | { fontSize: 18, lineHeight: 29 }, 104 | { fontSize: 24, lineHeight: 36 }, 105 | { fontSize: 36, lineHeight: 44 }, 106 | { fontSize: 48, lineHeight: 52 }, 107 | { fontSize: 64, lineHeight: 64 } 108 | ] 109 | ``` 110 | * __defaultFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to a System Font stack. 111 | * __headingFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to your `defaultFontStack`. 112 | * __codingFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to your `defaultFontStack`. 113 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react" 2 | import { FaGithub } from "react-icons/fa" 3 | import { 4 | Heading, 5 | Flex, 6 | Text, 7 | Blockquote, 8 | Link, 9 | Strong, 10 | Em, 11 | Code, 12 | Quote, 13 | } from "@radix-ui/themes" 14 | 15 | const ThemeSelector = ({ themes }) => { 16 | const [selectedIndex, setSelectedIndex] = useState(0) 17 | 18 | useEffect(() => { 19 | const currentTheme = themes[selectedIndex] 20 | const link = document.getElementById(`theme-style`) 21 | if (!link) { 22 | const newLink = document.createElement(`link`) 23 | newLink.id = `theme-style` 24 | newLink.rel = `stylesheet` 25 | newLink.href = currentTheme.file 26 | document.head.appendChild(newLink) 27 | } else { 28 | link.href = currentTheme.file 29 | } 30 | }, [selectedIndex]) 31 | 32 | const handleKeyDown = (event) => { 33 | console.log({ selectedIndex }) 34 | // Determine the direction of navigation 35 | if (event.key === `ArrowUp`) { 36 | setSelectedIndex((prevIndex) => { 37 | console.log({ prevIndex }) 38 | console.log(Math.max(0, prevIndex - 1)) 39 | return Math.max(0, prevIndex - 1) 40 | }) 41 | } else if (event.key === `ArrowDown`) { 42 | setSelectedIndex((prevIndex) => 43 | Math.min(themes.length - 1, prevIndex + 1) 44 | ) 45 | } 46 | } 47 | 48 | const handleChange = (event) => { 49 | setSelectedIndex( 50 | themes.findIndex((theme) => theme.file === event.target.value) 51 | ) 52 | } 53 | 54 | // Update the selected theme based on selectedIndex 55 | const selectedTheme = themes[selectedIndex].file 56 | 57 | // onKeyDown={handleKeyDown} 58 | return ( 59 | 71 | ) 72 | } 73 | 74 | function TypographyShowcase() { 75 | // Generate a bunch of typography options and then people can switch between them. There's a unique parent class for each 76 | // theme? 77 | return ( 78 | 90 | 91 | vite-plugin-capsize-radix-ui{` `} 92 | 96 | 97 | 98 | 99 | 100 | 101 | Generate bulletproof typography css for{` `} 102 | @radix-ui/themes 103 | 104 | Now changing fonts is as easy as changing colors. 105 | 106 | 107 | Pick fontstack 108 | 109 | 129 | 130 | 131 | 132 | Size 6 - The Quantum Leap Across Time and Space 133 | 134 | 135 | In the world of quantum computing, entanglement and 136 | {` `} 137 | superposition lead to possibilities beyond classical 138 | comprehension. This sentence, much like a qubit, can be bold, 139 | {` `} 140 | italic, or{` `} 141 | 142 | both. 143 | 144 | 145 | 146 | 147 | Size 5 - Relativity's Fabric is Both Fragile and Easily Broken Apiece 148 | 149 | 150 | Imagine spacetime as a fabric stretched across the 151 | cosmos. The mass of objects bends this fabric, causing what we perceive 152 | as gravity—an elegant explanation from Einstein's general theory of 153 | relativity E = mc². 154 | 155 | 156 | 157 | Size 4 - The Genetic Code is Both Complex and Beautiful in its Modular 158 | Simplicity 159 | 160 | 161 | Life's complexity is encoded in the{` `} 162 | DNA, a molecule that carries 163 | the genetic instructions used in the growth, development, functioning, 164 | and reproduction of all known living organisms and many viruses. 165 | 166 | 167 | 168 | Size 3 - The Internet of Things (IoT) — Overhyped or Everpresent? 169 | 170 | 171 | In the Internet of Things, everyday objects become interconnected, 172 | communicating data seamlessly across the network, creating a smart world 173 | where efficiency and convenience are continually enhanced. 174 | 175 | 176 | 177 | Size 2 - Artificial Intelligence 178 | 179 | 180 | AI is like a phoenix in the tech world, continuously evolving from its 181 | ashes with new capabilities. It learns and adapts, creating a symbiosis 182 | between humans and machines, pushing the boundaries of what's possible. 183 | 184 | 185 | 186 | Size 1 - The Blockchain Revolution 187 | 188 | 189 | Blockchain technology offers a decentralized ledger, a chain of blocks, 190 | ensuring transparency and security in transactions. Like the strands of 191 | DNA, it's the backbone of cryptocurrencies, ensuring trust in a 192 | trustless world. 193 | 194 | 195 |
196 | "To be, or not to be, that is the question:"
- William 197 | Shakespeare, Hamlet 198 |
199 | 200 | 201 | This showcase spans the cosmos, from the microscopic 202 | {` `} 203 | strands of DNA to the vast, interstellar fabric of 204 | spacetime, illustrating the beauty and power of typography in conveying 205 | complex ideas. 206 | 207 | 208 | ) 209 | } 210 | 211 | export default TypographyShowcase 212 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { Plugin } from "vite" 2 | import fs from "fs" 3 | import { 4 | createStyleObject, 5 | createStyleString, 6 | createFontStack, 7 | FontMetrics, 8 | } from "@capsizecss/core" 9 | import Mustache from "mustache" 10 | 11 | // Metrics for system fonts 12 | import segoeUI from "@capsizecss/metrics/segoeUI" 13 | import appleSystem from "@capsizecss/metrics/appleSystem" 14 | import roboto from "@capsizecss/metrics/roboto" 15 | import ubuntu from "@capsizecss/metrics/ubuntu" 16 | import notoSans from "@capsizecss/metrics/notoSans" 17 | 18 | const template = `/* Auto-generated by vite-plugin-capsize-radix */ 19 | 20 | /* Override Radix variables */ 21 | .radix-themes { 22 | --default-font-family: {{{defaultFontFamily.fontFamily}}}; 23 | --em-font-family: {{{defaultFontFamily.fontFamily}}}; 24 | --quote-font-family: {{{defaultFontFamily.fontFamily}}}; 25 | --heading-font-family: {{{headingFontFamily.fontFamily}}}; 26 | --code-font-family: {{{codingFontFamily.fontFamily}}}; 27 | 28 | /* Mobile */ 29 | {{#mobileFontData}} 30 | --font-size-{{{i}}}: {{{fontSize}}}; 31 | --line-height-{{{i}}}: {{{lineHeight}}}; 32 | {{/mobileFontData}} 33 | 34 | /* Larger devices */ 35 | @media (min-width: 768px) { 36 | {{#fontData}} 37 | --font-size-{{{i}}}: {{{fontSize}}}; 38 | --line-height-{{{i}}}: {{{lineHeight}}}; 39 | {{/fontData}} 40 | } 41 | } 42 | 43 | /* Otherwise links don't flow inline */ 44 | .rt-Link { 45 | display: inline-block; 46 | } 47 | 48 | /* Default text styles */ 49 | {{{mobileTextStyles}}} 50 | @media (min-width: 768px) { 51 | {{{textStyles}}} 52 | } 53 | 54 | /* Em text styles */ 55 | {{{mobileEmStyles}}} 56 | @media (min-width: 768px) { 57 | {{{emStyles}}} 58 | } 59 | 60 | /* Quote text styles */ 61 | {{{mobileQuoteStyles}}} 62 | @media (min-width: 768px) { 63 | {{{quoteStyles}}} 64 | } 65 | 66 | /* Code text styles */ 67 | {{{mobileCodeStyles}}} 68 | @media (min-width: 768px) { 69 | {{{codeStyles}}} 70 | } 71 | 72 | /* Code size variants */ 73 | {{#mobileCodeFontData}} 74 | {{{style}}} 75 | {{/mobileCodeFontData}} 76 | @media (min-width: 768px) { 77 | {{#codeFontData}} 78 | {{{style}}} 79 | {{/codeFontData}} 80 | } 81 | 82 | .rt-Em, .rt-Quote, .rt-Code { 83 | display: inline-block; 84 | } 85 | 86 | /* Class names for text elements */ 87 | {{#mobileFontData}} 88 | {{{style}}} 89 | {{/mobileFontData}} 90 | @media (min-width: 768px) { 91 | {{#fontData}} 92 | {{{style}}} 93 | {{/fontData}} 94 | } 95 | ` 96 | 97 | async function generate(options: OptionsWithDefaults) { 98 | // Use any type to avoid TypeScript errors with the return type of createFontStack 99 | let defaultFontFamily: any 100 | let headingFontFamiliy: any 101 | let codingFontFamily: any 102 | 103 | if (!options.defaultFontStack) { 104 | options.defaultFontStack = [ 105 | appleSystem, 106 | segoeUI, 107 | roboto, 108 | ubuntu, 109 | notoSans, 110 | ] as unknown as FontMetrics[] 111 | defaultFontFamily = createFontStack(options.defaultFontStack) 112 | 113 | // We prefer to deterministically pick the font w/ the stack above so then the font trimmings work 114 | // but we if we can't, we'll fall back to these. 115 | defaultFontFamily.fontFamily += `, ui-sans-serif, system-ui, sans-serif` 116 | } else if (options.defaultFontStack) { 117 | defaultFontFamily = createFontStack(options.defaultFontStack) 118 | } 119 | 120 | if (options.headingFontStack) { 121 | headingFontFamiliy = createFontStack(options.headingFontStack) 122 | } else { 123 | headingFontFamiliy = defaultFontFamily 124 | } 125 | 126 | if (options.codingFontStack) { 127 | codingFontFamily = createFontStack(options.codingFontStack) 128 | } else { 129 | options.codingFontStack = [appleSystem] as unknown as FontMetrics[] 130 | codingFontFamily = createFontStack(options.codingFontStack) 131 | 132 | // We prefer to deterministically pick the font w/ the stack above so then the font trimmings work 133 | // but we if we can't, we'll fall back to these. 134 | codingFontFamily.fontFamily += `, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace` 135 | } 136 | 137 | const mobileFontData = [ 138 | options.textStyles[0], 139 | ...options.textStyles.slice(1), 140 | ].map(({ fontSize, lineHeight }, i) => { 141 | const lineGap = lineHeight - fontSize 142 | const style = createStyleString( 143 | `rt-r-size-${i + 1}:not(.rt-DialogContent)`, 144 | { 145 | capHeight: fontSize, 146 | lineGap, 147 | fontMetrics: options.defaultFontStack![0], 148 | } 149 | ) 150 | return { 151 | style, 152 | ...createStyleObject({ 153 | capHeight: fontSize, 154 | lineGap, 155 | fontMetrics: options.defaultFontStack![0], 156 | }), 157 | i: i + 1, 158 | } 159 | }) 160 | 161 | // Generate code-specific styles for each size variant 162 | const mobileCodeFontData = [ 163 | options.textStyles[0], 164 | ...options.textStyles.slice(1), 165 | ].map(({ fontSize, lineHeight }, i) => { 166 | const lineGap = lineHeight - fontSize 167 | const style = createStyleString(`rt-Code.rt-r-size-${i + 1}`, { 168 | capHeight: fontSize * 0.95, 169 | lineGap, 170 | fontMetrics: options.codingFontStack![0], 171 | }) 172 | return { 173 | style, 174 | ...createStyleObject({ 175 | capHeight: fontSize * 0.95, 176 | lineGap, 177 | fontMetrics: options.codingFontStack![0], 178 | }), 179 | i: i + 1, 180 | } 181 | }) 182 | 183 | const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => { 184 | const lineGap = lineHeight - fontSize 185 | const style = createStyleString( 186 | `rt-r-size-${i + 1}:not(.rt-DialogContent)`, 187 | { 188 | capHeight: fontSize, 189 | lineGap, 190 | fontMetrics: options.defaultFontStack![0], 191 | } 192 | ) 193 | return { 194 | style, 195 | ...createStyleObject({ 196 | capHeight: fontSize, 197 | lineGap, 198 | fontMetrics: options.defaultFontStack![0], 199 | }), 200 | i: i + 1, 201 | } 202 | }) 203 | 204 | // Generate code-specific styles for each size variant for larger screens 205 | const codeFontData = options.textStyles.map(({ fontSize, lineHeight }, i) => { 206 | const lineGap = lineHeight - fontSize 207 | const style = createStyleString(`rt-Code.rt-r-size-${i + 1}`, { 208 | capHeight: fontSize, 209 | lineGap, 210 | fontMetrics: options.codingFontStack![0], 211 | }) 212 | return { 213 | style, 214 | ...createStyleObject({ 215 | capHeight: fontSize, 216 | lineGap, 217 | fontMetrics: options.codingFontStack![0], 218 | }), 219 | i: i + 1, 220 | } 221 | }) 222 | 223 | const mobileTextStyles = createStyleString(`rt-Text`, { 224 | capHeight: options.textStyles[1].fontSize, 225 | lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize, 226 | fontMetrics: options.defaultFontStack![0], 227 | }) 228 | const mobileEmStyles = createStyleString(`rt-Em`, { 229 | capHeight: options.textStyles[1].fontSize, 230 | lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize, 231 | fontMetrics: options.defaultFontStack![0], 232 | }) 233 | const mobileQuoteStyles = createStyleString(`rt-Quote`, { 234 | capHeight: options.textStyles[1].fontSize, 235 | lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize, 236 | fontMetrics: options.defaultFontStack![0], 237 | }) 238 | const mobileCodeStyles = createStyleString(`rt-Code`, { 239 | capHeight: options.textStyles[1].fontSize * 0.95, 240 | lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize, 241 | fontMetrics: options.codingFontStack[0], 242 | }) 243 | 244 | const textStyles = createStyleString(`rt-Text`, { 245 | capHeight: options.textStyles[2].fontSize, 246 | lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize, 247 | fontMetrics: options.defaultFontStack![0], 248 | }) 249 | const emStyles = createStyleString(`rt-Em`, { 250 | capHeight: options.textStyles[2].fontSize, 251 | lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize, 252 | fontMetrics: options.defaultFontStack![0], 253 | }) 254 | const quoteStyles = createStyleString(`rt-Quote`, { 255 | capHeight: options.textStyles[2].fontSize, 256 | lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize, 257 | fontMetrics: options.defaultFontStack![0], 258 | }) 259 | 260 | const codeStyles = createStyleString(`rt-Code`, { 261 | capHeight: options.textStyles[2].fontSize * 0.95, 262 | lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize, 263 | fontMetrics: options.codingFontStack[0], 264 | }) 265 | 266 | fs.writeFileSync( 267 | options.outputPath, 268 | Mustache.render(template, { 269 | headingFontFamiliy, 270 | defaultFontFamily, 271 | codingFontFamily, 272 | mobileFontData, 273 | fontData, 274 | mobileCodeFontData, 275 | codeFontData, 276 | mobileTextStyles, 277 | textStyles, 278 | mobileEmStyles, 279 | emStyles, 280 | mobileQuoteStyles, 281 | quoteStyles, 282 | mobileCodeStyles, 283 | codeStyles, 284 | }) 285 | ) 286 | } 287 | 288 | interface TextStyle { 289 | fontSize: number 290 | lineHeight: number 291 | } 292 | 293 | interface Options { 294 | outputPath: string 295 | textStyles?: TextStyle[] 296 | defaultFontStack?: FontMetrics[] 297 | headingFontStack?: FontMetrics[] 298 | codingFontStack?: FontMetrics[] 299 | } 300 | interface OptionsWithDefaults { 301 | outputPath: string 302 | textStyles: TextStyle[] 303 | defaultFontStack?: FontMetrics[] 304 | headingFontStack?: FontMetrics[] 305 | codingFontStack?: FontMetrics[] 306 | } 307 | export function capsizeRadixPlugin({ 308 | outputPath, 309 | textStyles = [ 310 | { fontSize: 9, lineHeight: 19 }, 311 | { fontSize: 11, lineHeight: 23 }, 312 | { fontSize: 12, lineHeight: 25 }, 313 | { fontSize: 14, lineHeight: 28 }, 314 | { fontSize: 18, lineHeight: 30 }, 315 | { fontSize: 24, lineHeight: 36 }, 316 | { fontSize: 36, lineHeight: 44 }, 317 | { fontSize: 48, lineHeight: 52 }, 318 | { fontSize: 64, lineHeight: 64 }, 319 | ], 320 | defaultFontStack, 321 | headingFontStack, 322 | codingFontStack, 323 | }: Options): Plugin { 324 | return { 325 | name: `radix-capsize-plugin`, 326 | buildStart() { 327 | generate({ 328 | outputPath, 329 | textStyles, 330 | defaultFontStack, 331 | headingFontStack, 332 | codingFontStack, 333 | }) 334 | }, 335 | } 336 | } 337 | -------------------------------------------------------------------------------- /tests/test.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: Inter, "Inter Fallback", Arial; 6 | --em-font-family: Inter, "Inter Fallback", Arial; 7 | --quote-font-family: Inter, "Inter Fallback", Arial; 8 | --heading-font-family: Inter, "Inter Fallback", Arial; 9 | 10 | /* Mobile */ 11 | --font-size-1: 12.375px; 12 | --line-height-1: 19px; 13 | --font-size-2: 12.375px; 14 | --line-height-2: 19px; 15 | --font-size-3: 15.125px; 16 | --line-height-3: 23px; 17 | --font-size-4: 16.5px; 18 | --line-height-4: 25px; 19 | --font-size-5: 19.25px; 20 | --line-height-5: 28px; 21 | --font-size-6: 24.75px; 22 | --line-height-6: 30px; 23 | --font-size-7: 33px; 24 | --line-height-7: 36px; 25 | --font-size-8: 49.5px; 26 | --line-height-8: 44px; 27 | --font-size-9: 66px; 28 | --line-height-9: 52px; 29 | --font-size-10: 88px; 30 | --line-height-10: 64px; 31 | 32 | /* Larger devices */ 33 | @media (min-width: 768px) { 34 | --font-size-1: 12.375px; 35 | --line-height-1: 19px; 36 | --font-size-2: 15.125px; 37 | --line-height-2: 23px; 38 | --font-size-3: 16.5px; 39 | --line-height-3: 25px; 40 | --font-size-4: 19.25px; 41 | --line-height-4: 28px; 42 | --font-size-5: 24.75px; 43 | --line-height-5: 30px; 44 | --font-size-6: 33px; 45 | --line-height-6: 36px; 46 | --font-size-7: 49.5px; 47 | --line-height-7: 44px; 48 | --font-size-8: 66px; 49 | --line-height-8: 52px; 50 | --font-size-9: 88px; 51 | --line-height-9: 64px; 52 | } 53 | } 54 | 55 | /* Otherwise links don't flow inline */ 56 | .rt-Link { 57 | display: inline-block; 58 | } 59 | 60 | /* Default text styles */ 61 | 62 | .rt-Text { 63 | font-size: 15.125px; 64 | line-height: 23px; 65 | } 66 | 67 | .rt-Text::before { 68 | content: ""; 69 | margin-bottom: -0.3967em; 70 | display: table; 71 | } 72 | 73 | .rt-Text::after { 74 | content: ""; 75 | margin-top: -0.3967em; 76 | display: table; 77 | } 78 | @media (min-width: 768px) { 79 | 80 | .rt-Text { 81 | font-size: 16.5px; 82 | line-height: 25px; 83 | } 84 | 85 | .rt-Text::before { 86 | content: ""; 87 | margin-bottom: -0.3939em; 88 | display: table; 89 | } 90 | 91 | .rt-Text::after { 92 | content: ""; 93 | margin-top: -0.3939em; 94 | display: table; 95 | } 96 | } 97 | 98 | /* Em text styles */ 99 | 100 | .rt-Em { 101 | font-size: 15.125px; 102 | line-height: 23px; 103 | } 104 | 105 | .rt-Em::before { 106 | content: ""; 107 | margin-bottom: -0.3967em; 108 | display: table; 109 | } 110 | 111 | .rt-Em::after { 112 | content: ""; 113 | margin-top: -0.3967em; 114 | display: table; 115 | } 116 | @media (min-width: 768px) { 117 | 118 | .rt-Em { 119 | font-size: 16.5px; 120 | line-height: 25px; 121 | } 122 | 123 | .rt-Em::before { 124 | content: ""; 125 | margin-bottom: -0.3939em; 126 | display: table; 127 | } 128 | 129 | .rt-Em::after { 130 | content: ""; 131 | margin-top: -0.3939em; 132 | display: table; 133 | } 134 | } 135 | 136 | /* Quote text styles */ 137 | 138 | .rt-Quote { 139 | font-size: 15.125px; 140 | line-height: 23px; 141 | } 142 | 143 | .rt-Quote::before { 144 | content: ""; 145 | margin-bottom: -0.3967em; 146 | display: table; 147 | } 148 | 149 | .rt-Quote::after { 150 | content: ""; 151 | margin-top: -0.3967em; 152 | display: table; 153 | } 154 | @media (min-width: 768px) { 155 | 156 | .rt-Quote { 157 | font-size: 16.5px; 158 | line-height: 25px; 159 | } 160 | 161 | .rt-Quote::before { 162 | content: ""; 163 | margin-bottom: -0.3939em; 164 | display: table; 165 | } 166 | 167 | .rt-Quote::after { 168 | content: ""; 169 | margin-top: -0.3939em; 170 | display: table; 171 | } 172 | } 173 | 174 | .rt-Em, .rt-Quote { 175 | display: inline-block; 176 | } 177 | 178 | /* Class names for text elements */ 179 | 180 | .rt-r-size-1:not(.rt-DialogContent) { 181 | font-size: 12.375px; 182 | line-height: 19px; 183 | } 184 | 185 | .rt-r-size-1:not(.rt-DialogContent)::before { 186 | content: ""; 187 | margin-bottom: -0.404em; 188 | display: table; 189 | } 190 | 191 | .rt-r-size-1:not(.rt-DialogContent)::after { 192 | content: ""; 193 | margin-top: -0.404em; 194 | display: table; 195 | } 196 | 197 | .rt-r-size-2:not(.rt-DialogContent) { 198 | font-size: 12.375px; 199 | line-height: 19px; 200 | } 201 | 202 | .rt-r-size-2:not(.rt-DialogContent)::before { 203 | content: ""; 204 | margin-bottom: -0.404em; 205 | display: table; 206 | } 207 | 208 | .rt-r-size-2:not(.rt-DialogContent)::after { 209 | content: ""; 210 | margin-top: -0.404em; 211 | display: table; 212 | } 213 | 214 | .rt-r-size-3:not(.rt-DialogContent) { 215 | font-size: 15.125px; 216 | line-height: 23px; 217 | } 218 | 219 | .rt-r-size-3:not(.rt-DialogContent)::before { 220 | content: ""; 221 | margin-bottom: -0.3967em; 222 | display: table; 223 | } 224 | 225 | .rt-r-size-3:not(.rt-DialogContent)::after { 226 | content: ""; 227 | margin-top: -0.3967em; 228 | display: table; 229 | } 230 | 231 | .rt-r-size-4:not(.rt-DialogContent) { 232 | font-size: 16.5px; 233 | line-height: 25px; 234 | } 235 | 236 | .rt-r-size-4:not(.rt-DialogContent)::before { 237 | content: ""; 238 | margin-bottom: -0.3939em; 239 | display: table; 240 | } 241 | 242 | .rt-r-size-4:not(.rt-DialogContent)::after { 243 | content: ""; 244 | margin-top: -0.3939em; 245 | display: table; 246 | } 247 | 248 | .rt-r-size-5:not(.rt-DialogContent) { 249 | font-size: 19.25px; 250 | line-height: 28px; 251 | } 252 | 253 | .rt-r-size-5:not(.rt-DialogContent)::before { 254 | content: ""; 255 | margin-bottom: -0.3636em; 256 | display: table; 257 | } 258 | 259 | .rt-r-size-5:not(.rt-DialogContent)::after { 260 | content: ""; 261 | margin-top: -0.3636em; 262 | display: table; 263 | } 264 | 265 | .rt-r-size-6:not(.rt-DialogContent) { 266 | font-size: 24.75px; 267 | line-height: 30px; 268 | } 269 | 270 | .rt-r-size-6:not(.rt-DialogContent)::before { 271 | content: ""; 272 | margin-bottom: -0.2424em; 273 | display: table; 274 | } 275 | 276 | .rt-r-size-6:not(.rt-DialogContent)::after { 277 | content: ""; 278 | margin-top: -0.2424em; 279 | display: table; 280 | } 281 | 282 | .rt-r-size-7:not(.rt-DialogContent) { 283 | font-size: 33px; 284 | line-height: 36px; 285 | } 286 | 287 | .rt-r-size-7:not(.rt-DialogContent)::before { 288 | content: ""; 289 | margin-bottom: -0.1818em; 290 | display: table; 291 | } 292 | 293 | .rt-r-size-7:not(.rt-DialogContent)::after { 294 | content: ""; 295 | margin-top: -0.1818em; 296 | display: table; 297 | } 298 | 299 | .rt-r-size-8:not(.rt-DialogContent) { 300 | font-size: 49.5px; 301 | line-height: 44px; 302 | } 303 | 304 | .rt-r-size-8:not(.rt-DialogContent)::before { 305 | content: ""; 306 | margin-bottom: -0.0808em; 307 | display: table; 308 | } 309 | 310 | .rt-r-size-8:not(.rt-DialogContent)::after { 311 | content: ""; 312 | margin-top: -0.0808em; 313 | display: table; 314 | } 315 | 316 | .rt-r-size-9:not(.rt-DialogContent) { 317 | font-size: 66px; 318 | line-height: 52px; 319 | } 320 | 321 | .rt-r-size-9:not(.rt-DialogContent)::before { 322 | content: ""; 323 | margin-bottom: -0.0303em; 324 | display: table; 325 | } 326 | 327 | .rt-r-size-9:not(.rt-DialogContent)::after { 328 | content: ""; 329 | margin-top: -0.0303em; 330 | display: table; 331 | } 332 | 333 | .rt-r-size-10:not(.rt-DialogContent) { 334 | font-size: 88px; 335 | line-height: 64px; 336 | } 337 | 338 | .rt-r-size-10:not(.rt-DialogContent)::before { 339 | content: ""; 340 | margin-bottom: 0em; 341 | display: table; 342 | } 343 | 344 | .rt-r-size-10:not(.rt-DialogContent)::after { 345 | content: ""; 346 | margin-top: 0em; 347 | display: table; 348 | } 349 | @media (min-width: 768px) { 350 | 351 | .rt-r-size-1:not(.rt-DialogContent) { 352 | font-size: 12.375px; 353 | line-height: 19px; 354 | } 355 | 356 | .rt-r-size-1:not(.rt-DialogContent)::before { 357 | content: ""; 358 | margin-bottom: -0.404em; 359 | display: table; 360 | } 361 | 362 | .rt-r-size-1:not(.rt-DialogContent)::after { 363 | content: ""; 364 | margin-top: -0.404em; 365 | display: table; 366 | } 367 | 368 | .rt-r-size-2:not(.rt-DialogContent) { 369 | font-size: 15.125px; 370 | line-height: 23px; 371 | } 372 | 373 | .rt-r-size-2:not(.rt-DialogContent)::before { 374 | content: ""; 375 | margin-bottom: -0.3967em; 376 | display: table; 377 | } 378 | 379 | .rt-r-size-2:not(.rt-DialogContent)::after { 380 | content: ""; 381 | margin-top: -0.3967em; 382 | display: table; 383 | } 384 | 385 | .rt-r-size-3:not(.rt-DialogContent) { 386 | font-size: 16.5px; 387 | line-height: 25px; 388 | } 389 | 390 | .rt-r-size-3:not(.rt-DialogContent)::before { 391 | content: ""; 392 | margin-bottom: -0.3939em; 393 | display: table; 394 | } 395 | 396 | .rt-r-size-3:not(.rt-DialogContent)::after { 397 | content: ""; 398 | margin-top: -0.3939em; 399 | display: table; 400 | } 401 | 402 | .rt-r-size-4:not(.rt-DialogContent) { 403 | font-size: 19.25px; 404 | line-height: 28px; 405 | } 406 | 407 | .rt-r-size-4:not(.rt-DialogContent)::before { 408 | content: ""; 409 | margin-bottom: -0.3636em; 410 | display: table; 411 | } 412 | 413 | .rt-r-size-4:not(.rt-DialogContent)::after { 414 | content: ""; 415 | margin-top: -0.3636em; 416 | display: table; 417 | } 418 | 419 | .rt-r-size-5:not(.rt-DialogContent) { 420 | font-size: 24.75px; 421 | line-height: 30px; 422 | } 423 | 424 | .rt-r-size-5:not(.rt-DialogContent)::before { 425 | content: ""; 426 | margin-bottom: -0.2424em; 427 | display: table; 428 | } 429 | 430 | .rt-r-size-5:not(.rt-DialogContent)::after { 431 | content: ""; 432 | margin-top: -0.2424em; 433 | display: table; 434 | } 435 | 436 | .rt-r-size-6:not(.rt-DialogContent) { 437 | font-size: 33px; 438 | line-height: 36px; 439 | } 440 | 441 | .rt-r-size-6:not(.rt-DialogContent)::before { 442 | content: ""; 443 | margin-bottom: -0.1818em; 444 | display: table; 445 | } 446 | 447 | .rt-r-size-6:not(.rt-DialogContent)::after { 448 | content: ""; 449 | margin-top: -0.1818em; 450 | display: table; 451 | } 452 | 453 | .rt-r-size-7:not(.rt-DialogContent) { 454 | font-size: 49.5px; 455 | line-height: 44px; 456 | } 457 | 458 | .rt-r-size-7:not(.rt-DialogContent)::before { 459 | content: ""; 460 | margin-bottom: -0.0808em; 461 | display: table; 462 | } 463 | 464 | .rt-r-size-7:not(.rt-DialogContent)::after { 465 | content: ""; 466 | margin-top: -0.0808em; 467 | display: table; 468 | } 469 | 470 | .rt-r-size-8:not(.rt-DialogContent) { 471 | font-size: 66px; 472 | line-height: 52px; 473 | } 474 | 475 | .rt-r-size-8:not(.rt-DialogContent)::before { 476 | content: ""; 477 | margin-bottom: -0.0303em; 478 | display: table; 479 | } 480 | 481 | .rt-r-size-8:not(.rt-DialogContent)::after { 482 | content: ""; 483 | margin-top: -0.0303em; 484 | display: table; 485 | } 486 | 487 | .rt-r-size-9:not(.rt-DialogContent) { 488 | font-size: 88px; 489 | line-height: 64px; 490 | } 491 | 492 | .rt-r-size-9:not(.rt-DialogContent)::before { 493 | content: ""; 494 | margin-bottom: 0em; 495 | display: table; 496 | } 497 | 498 | .rt-r-size-9:not(.rt-DialogContent)::after { 499 | content: ""; 500 | margin-top: 0em; 501 | display: table; 502 | } 503 | } 504 | -------------------------------------------------------------------------------- /example/public/inter-typography.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: Inter, "Inter Fallback", Arial; 6 | --em-font-family: Inter, "Inter Fallback", Arial; 7 | --quote-font-family: Inter, "Inter Fallback", Arial; 8 | --heading-font-family: ; 9 | --code-font-family: "Source Code Pro"; 10 | 11 | /* Mobile */ 12 | --font-size-1: 12.3705px; 13 | --line-height-1: 19px; 14 | --font-size-2: 15.1195px; 15 | --line-height-2: 23px; 16 | --font-size-3: 16.494px; 17 | --line-height-3: 25px; 18 | --font-size-4: 19.243px; 19 | --line-height-4: 28px; 20 | --font-size-5: 24.7409px; 21 | --line-height-5: 30px; 22 | --font-size-6: 32.9879px; 23 | --line-height-6: 36px; 24 | --font-size-7: 49.4819px; 25 | --line-height-7: 44px; 26 | --font-size-8: 65.9758px; 27 | --line-height-8: 52px; 28 | --font-size-9: 87.9678px; 29 | --line-height-9: 64px; 30 | 31 | /* Larger devices */ 32 | @media (min-width: 768px) { 33 | --font-size-1: 12.3705px; 34 | --line-height-1: 19px; 35 | --font-size-2: 15.1195px; 36 | --line-height-2: 23px; 37 | --font-size-3: 16.494px; 38 | --line-height-3: 25px; 39 | --font-size-4: 19.243px; 40 | --line-height-4: 28px; 41 | --font-size-5: 24.7409px; 42 | --line-height-5: 30px; 43 | --font-size-6: 32.9879px; 44 | --line-height-6: 36px; 45 | --font-size-7: 49.4819px; 46 | --line-height-7: 44px; 47 | --font-size-8: 65.9758px; 48 | --line-height-8: 52px; 49 | --font-size-9: 87.9678px; 50 | --line-height-9: 64px; 51 | } 52 | } 53 | 54 | /* Otherwise links don't flow inline */ 55 | .rt-Link { 56 | display: inline-block; 57 | } 58 | 59 | /* Default text styles */ 60 | 61 | .rt-Text { 62 | font-size: 15.1195px; 63 | line-height: 23px; 64 | } 65 | 66 | .rt-Text::before { 67 | content: ""; 68 | margin-bottom: -0.3968em; 69 | display: table; 70 | } 71 | 72 | .rt-Text::after { 73 | content: ""; 74 | margin-top: -0.3968em; 75 | display: table; 76 | } 77 | @media (min-width: 768px) { 78 | 79 | .rt-Text { 80 | font-size: 16.494px; 81 | line-height: 25px; 82 | } 83 | 84 | .rt-Text::before { 85 | content: ""; 86 | margin-bottom: -0.3941em; 87 | display: table; 88 | } 89 | 90 | .rt-Text::after { 91 | content: ""; 92 | margin-top: -0.3941em; 93 | display: table; 94 | } 95 | } 96 | 97 | /* Em text styles */ 98 | 99 | .rt-Em { 100 | font-size: 15.1195px; 101 | line-height: 23px; 102 | } 103 | 104 | .rt-Em::before { 105 | content: ""; 106 | margin-bottom: -0.3968em; 107 | display: table; 108 | } 109 | 110 | .rt-Em::after { 111 | content: ""; 112 | margin-top: -0.3968em; 113 | display: table; 114 | } 115 | @media (min-width: 768px) { 116 | 117 | .rt-Em { 118 | font-size: 16.494px; 119 | line-height: 25px; 120 | } 121 | 122 | .rt-Em::before { 123 | content: ""; 124 | margin-bottom: -0.3941em; 125 | display: table; 126 | } 127 | 128 | .rt-Em::after { 129 | content: ""; 130 | margin-top: -0.3941em; 131 | display: table; 132 | } 133 | } 134 | 135 | /* Quote text styles */ 136 | 137 | .rt-Quote { 138 | font-size: 15.1195px; 139 | line-height: 23px; 140 | } 141 | 142 | .rt-Quote::before { 143 | content: ""; 144 | margin-bottom: -0.3968em; 145 | display: table; 146 | } 147 | 148 | .rt-Quote::after { 149 | content: ""; 150 | margin-top: -0.3968em; 151 | display: table; 152 | } 153 | @media (min-width: 768px) { 154 | 155 | .rt-Quote { 156 | font-size: 16.494px; 157 | line-height: 25px; 158 | } 159 | 160 | .rt-Quote::before { 161 | content: ""; 162 | margin-bottom: -0.3941em; 163 | display: table; 164 | } 165 | 166 | .rt-Quote::after { 167 | content: ""; 168 | margin-top: -0.3941em; 169 | display: table; 170 | } 171 | } 172 | 173 | /* Code text styles */ 174 | 175 | .rt-Code { 176 | font-size: 15.8333px; 177 | line-height: 22.45px; 178 | } 179 | 180 | .rt-Code::before { 181 | content: ""; 182 | margin-bottom: -0.4044em; 183 | display: table; 184 | } 185 | 186 | .rt-Code::after { 187 | content: ""; 188 | margin-top: -0.3534em; 189 | display: table; 190 | } 191 | @media (min-width: 768px) { 192 | 193 | .rt-Code { 194 | font-size: 17.2727px; 195 | line-height: 24.4px; 196 | } 197 | 198 | .rt-Code::before { 199 | content: ""; 200 | margin-bottom: -0.4018em; 201 | display: table; 202 | } 203 | 204 | .rt-Code::after { 205 | content: ""; 206 | margin-top: -0.3508em; 207 | display: table; 208 | } 209 | } 210 | 211 | /* Code size variants */ 212 | 213 | .rt-Code.rt-r-size-1 { 214 | font-size: 12.9545px; 215 | line-height: 18.55px; 216 | } 217 | 218 | .rt-Code.rt-r-size-1::before { 219 | content: ""; 220 | margin-bottom: -0.4115em; 221 | display: table; 222 | } 223 | 224 | .rt-Code.rt-r-size-1::after { 225 | content: ""; 226 | margin-top: -0.3605em; 227 | display: table; 228 | } 229 | 230 | .rt-Code.rt-r-size-2 { 231 | font-size: 15.8333px; 232 | line-height: 22.45px; 233 | } 234 | 235 | .rt-Code.rt-r-size-2::before { 236 | content: ""; 237 | margin-bottom: -0.4044em; 238 | display: table; 239 | } 240 | 241 | .rt-Code.rt-r-size-2::after { 242 | content: ""; 243 | margin-top: -0.3534em; 244 | display: table; 245 | } 246 | 247 | .rt-Code.rt-r-size-3 { 248 | font-size: 17.2727px; 249 | line-height: 24.4px; 250 | } 251 | 252 | .rt-Code.rt-r-size-3::before { 253 | content: ""; 254 | margin-bottom: -0.4018em; 255 | display: table; 256 | } 257 | 258 | .rt-Code.rt-r-size-3::after { 259 | content: ""; 260 | margin-top: -0.3508em; 261 | display: table; 262 | } 263 | 264 | .rt-Code.rt-r-size-4 { 265 | font-size: 20.1515px; 266 | line-height: 27.3px; 267 | } 268 | 269 | .rt-Code.rt-r-size-4::before { 270 | content: ""; 271 | margin-bottom: -0.3729em; 272 | display: table; 273 | } 274 | 275 | .rt-Code.rt-r-size-4::after { 276 | content: ""; 277 | margin-top: -0.3219em; 278 | display: table; 279 | } 280 | 281 | .rt-Code.rt-r-size-5 { 282 | font-size: 25.9091px; 283 | line-height: 29.1px; 284 | } 285 | 286 | .rt-Code.rt-r-size-5::before { 287 | content: ""; 288 | margin-bottom: -0.2571em; 289 | display: table; 290 | } 291 | 292 | .rt-Code.rt-r-size-5::after { 293 | content: ""; 294 | margin-top: -0.2061em; 295 | display: table; 296 | } 297 | 298 | .rt-Code.rt-r-size-6 { 299 | font-size: 34.5455px; 300 | line-height: 34.8px; 301 | } 302 | 303 | .rt-Code.rt-r-size-6::before { 304 | content: ""; 305 | margin-bottom: -0.1992em; 306 | display: table; 307 | } 308 | 309 | .rt-Code.rt-r-size-6::after { 310 | content: ""; 311 | margin-top: -0.1482em; 312 | display: table; 313 | } 314 | 315 | .rt-Code.rt-r-size-7 { 316 | font-size: 51.8182px; 317 | line-height: 42.2px; 318 | } 319 | 320 | .rt-Code.rt-r-size-7::before { 321 | content: ""; 322 | margin-bottom: -0.1027em; 323 | display: table; 324 | } 325 | 326 | .rt-Code.rt-r-size-7::after { 327 | content: ""; 328 | margin-top: -0.0517em; 329 | display: table; 330 | } 331 | 332 | .rt-Code.rt-r-size-8 { 333 | font-size: 69.0909px; 334 | line-height: 49.6px; 335 | } 336 | 337 | .rt-Code.rt-r-size-8::before { 338 | content: ""; 339 | margin-bottom: -0.0544em; 340 | display: table; 341 | } 342 | 343 | .rt-Code.rt-r-size-8::after { 344 | content: ""; 345 | margin-top: -0.0034em; 346 | display: table; 347 | } 348 | 349 | .rt-Code.rt-r-size-9 { 350 | font-size: 92.1212px; 351 | line-height: 60.8px; 352 | } 353 | 354 | .rt-Code.rt-r-size-9::before { 355 | content: ""; 356 | margin-bottom: -0.0255em; 357 | display: table; 358 | } 359 | 360 | .rt-Code.rt-r-size-9::after { 361 | content: ""; 362 | margin-top: 0.0255em; 363 | display: table; 364 | } 365 | @media (min-width: 768px) { 366 | 367 | .rt-Code.rt-r-size-1 { 368 | font-size: 13.6364px; 369 | line-height: 19px; 370 | } 371 | 372 | .rt-Code.rt-r-size-1::before { 373 | content: ""; 374 | margin-bottom: -0.3922em; 375 | display: table; 376 | } 377 | 378 | .rt-Code.rt-r-size-1::after { 379 | content: ""; 380 | margin-top: -0.3412em; 381 | display: table; 382 | } 383 | 384 | .rt-Code.rt-r-size-2 { 385 | font-size: 16.6667px; 386 | line-height: 23px; 387 | } 388 | 389 | .rt-Code.rt-r-size-2::before { 390 | content: ""; 391 | margin-bottom: -0.3855em; 392 | display: table; 393 | } 394 | 395 | .rt-Code.rt-r-size-2::after { 396 | content: ""; 397 | margin-top: -0.3345em; 398 | display: table; 399 | } 400 | 401 | .rt-Code.rt-r-size-3 { 402 | font-size: 18.1818px; 403 | line-height: 25px; 404 | } 405 | 406 | .rt-Code.rt-r-size-3::before { 407 | content: ""; 408 | margin-bottom: -0.383em; 409 | display: table; 410 | } 411 | 412 | .rt-Code.rt-r-size-3::after { 413 | content: ""; 414 | margin-top: -0.332em; 415 | display: table; 416 | } 417 | 418 | .rt-Code.rt-r-size-4 { 419 | font-size: 21.2121px; 420 | line-height: 28px; 421 | } 422 | 423 | .rt-Code.rt-r-size-4::before { 424 | content: ""; 425 | margin-bottom: -0.3555em; 426 | display: table; 427 | } 428 | 429 | .rt-Code.rt-r-size-4::after { 430 | content: ""; 431 | margin-top: -0.3045em; 432 | display: table; 433 | } 434 | 435 | .rt-Code.rt-r-size-5 { 436 | font-size: 27.2727px; 437 | line-height: 30px; 438 | } 439 | 440 | .rt-Code.rt-r-size-5::before { 441 | content: ""; 442 | margin-bottom: -0.2455em; 443 | display: table; 444 | } 445 | 446 | .rt-Code.rt-r-size-5::after { 447 | content: ""; 448 | margin-top: -0.1945em; 449 | display: table; 450 | } 451 | 452 | .rt-Code.rt-r-size-6 { 453 | font-size: 36.3636px; 454 | line-height: 36px; 455 | } 456 | 457 | .rt-Code.rt-r-size-6::before { 458 | content: ""; 459 | margin-bottom: -0.1905em; 460 | display: table; 461 | } 462 | 463 | .rt-Code.rt-r-size-6::after { 464 | content: ""; 465 | margin-top: -0.1395em; 466 | display: table; 467 | } 468 | 469 | .rt-Code.rt-r-size-7 { 470 | font-size: 54.5455px; 471 | line-height: 44px; 472 | } 473 | 474 | .rt-Code.rt-r-size-7::before { 475 | content: ""; 476 | margin-bottom: -0.0988em; 477 | display: table; 478 | } 479 | 480 | .rt-Code.rt-r-size-7::after { 481 | content: ""; 482 | margin-top: -0.0478em; 483 | display: table; 484 | } 485 | 486 | .rt-Code.rt-r-size-8 { 487 | font-size: 72.7273px; 488 | line-height: 52px; 489 | } 490 | 491 | .rt-Code.rt-r-size-8::before { 492 | content: ""; 493 | margin-bottom: -0.053em; 494 | display: table; 495 | } 496 | 497 | .rt-Code.rt-r-size-8::after { 498 | content: ""; 499 | margin-top: -0.002em; 500 | display: table; 501 | } 502 | 503 | .rt-Code.rt-r-size-9 { 504 | font-size: 96.9697px; 505 | line-height: 64px; 506 | } 507 | 508 | .rt-Code.rt-r-size-9::before { 509 | content: ""; 510 | margin-bottom: -0.0255em; 511 | display: table; 512 | } 513 | 514 | .rt-Code.rt-r-size-9::after { 515 | content: ""; 516 | margin-top: 0.0255em; 517 | display: table; 518 | } 519 | } 520 | 521 | .rt-Em, .rt-Quote, .rt-Code { 522 | display: inline-block; 523 | } 524 | 525 | /* Class names for text elements */ 526 | 527 | .rt-r-size-1:not(.rt-DialogContent) { 528 | font-size: 12.3705px; 529 | line-height: 19px; 530 | } 531 | 532 | .rt-r-size-1:not(.rt-DialogContent)::before { 533 | content: ""; 534 | margin-bottom: -0.4042em; 535 | display: table; 536 | } 537 | 538 | .rt-r-size-1:not(.rt-DialogContent)::after { 539 | content: ""; 540 | margin-top: -0.4042em; 541 | display: table; 542 | } 543 | 544 | .rt-r-size-2:not(.rt-DialogContent) { 545 | font-size: 15.1195px; 546 | line-height: 23px; 547 | } 548 | 549 | .rt-r-size-2:not(.rt-DialogContent)::before { 550 | content: ""; 551 | margin-bottom: -0.3968em; 552 | display: table; 553 | } 554 | 555 | .rt-r-size-2:not(.rt-DialogContent)::after { 556 | content: ""; 557 | margin-top: -0.3968em; 558 | display: table; 559 | } 560 | 561 | .rt-r-size-3:not(.rt-DialogContent) { 562 | font-size: 16.494px; 563 | line-height: 25px; 564 | } 565 | 566 | .rt-r-size-3:not(.rt-DialogContent)::before { 567 | content: ""; 568 | margin-bottom: -0.3941em; 569 | display: table; 570 | } 571 | 572 | .rt-r-size-3:not(.rt-DialogContent)::after { 573 | content: ""; 574 | margin-top: -0.3941em; 575 | display: table; 576 | } 577 | 578 | .rt-r-size-4:not(.rt-DialogContent) { 579 | font-size: 19.243px; 580 | line-height: 28px; 581 | } 582 | 583 | .rt-r-size-4:not(.rt-DialogContent)::before { 584 | content: ""; 585 | margin-bottom: -0.3638em; 586 | display: table; 587 | } 588 | 589 | .rt-r-size-4:not(.rt-DialogContent)::after { 590 | content: ""; 591 | margin-top: -0.3638em; 592 | display: table; 593 | } 594 | 595 | .rt-r-size-5:not(.rt-DialogContent) { 596 | font-size: 24.7409px; 597 | line-height: 30px; 598 | } 599 | 600 | .rt-r-size-5:not(.rt-DialogContent)::before { 601 | content: ""; 602 | margin-bottom: -0.2425em; 603 | display: table; 604 | } 605 | 606 | .rt-r-size-5:not(.rt-DialogContent)::after { 607 | content: ""; 608 | margin-top: -0.2425em; 609 | display: table; 610 | } 611 | 612 | .rt-r-size-6:not(.rt-DialogContent) { 613 | font-size: 32.9879px; 614 | line-height: 36px; 615 | } 616 | 617 | .rt-r-size-6:not(.rt-DialogContent)::before { 618 | content: ""; 619 | margin-bottom: -0.1819em; 620 | display: table; 621 | } 622 | 623 | .rt-r-size-6:not(.rt-DialogContent)::after { 624 | content: ""; 625 | margin-top: -0.1819em; 626 | display: table; 627 | } 628 | 629 | .rt-r-size-7:not(.rt-DialogContent) { 630 | font-size: 49.4819px; 631 | line-height: 44px; 632 | } 633 | 634 | .rt-r-size-7:not(.rt-DialogContent)::before { 635 | content: ""; 636 | margin-bottom: -0.0808em; 637 | display: table; 638 | } 639 | 640 | .rt-r-size-7:not(.rt-DialogContent)::after { 641 | content: ""; 642 | margin-top: -0.0808em; 643 | display: table; 644 | } 645 | 646 | .rt-r-size-8:not(.rt-DialogContent) { 647 | font-size: 65.9758px; 648 | line-height: 52px; 649 | } 650 | 651 | .rt-r-size-8:not(.rt-DialogContent)::before { 652 | content: ""; 653 | margin-bottom: -0.0303em; 654 | display: table; 655 | } 656 | 657 | .rt-r-size-8:not(.rt-DialogContent)::after { 658 | content: ""; 659 | margin-top: -0.0303em; 660 | display: table; 661 | } 662 | 663 | .rt-r-size-9:not(.rt-DialogContent) { 664 | font-size: 87.9678px; 665 | line-height: 64px; 666 | } 667 | 668 | .rt-r-size-9:not(.rt-DialogContent)::before { 669 | content: ""; 670 | margin-bottom: 0em; 671 | display: table; 672 | } 673 | 674 | .rt-r-size-9:not(.rt-DialogContent)::after { 675 | content: ""; 676 | margin-top: 0em; 677 | display: table; 678 | } 679 | @media (min-width: 768px) { 680 | 681 | .rt-r-size-1:not(.rt-DialogContent) { 682 | font-size: 12.3705px; 683 | line-height: 19px; 684 | } 685 | 686 | .rt-r-size-1:not(.rt-DialogContent)::before { 687 | content: ""; 688 | margin-bottom: -0.4042em; 689 | display: table; 690 | } 691 | 692 | .rt-r-size-1:not(.rt-DialogContent)::after { 693 | content: ""; 694 | margin-top: -0.4042em; 695 | display: table; 696 | } 697 | 698 | .rt-r-size-2:not(.rt-DialogContent) { 699 | font-size: 15.1195px; 700 | line-height: 23px; 701 | } 702 | 703 | .rt-r-size-2:not(.rt-DialogContent)::before { 704 | content: ""; 705 | margin-bottom: -0.3968em; 706 | display: table; 707 | } 708 | 709 | .rt-r-size-2:not(.rt-DialogContent)::after { 710 | content: ""; 711 | margin-top: -0.3968em; 712 | display: table; 713 | } 714 | 715 | .rt-r-size-3:not(.rt-DialogContent) { 716 | font-size: 16.494px; 717 | line-height: 25px; 718 | } 719 | 720 | .rt-r-size-3:not(.rt-DialogContent)::before { 721 | content: ""; 722 | margin-bottom: -0.3941em; 723 | display: table; 724 | } 725 | 726 | .rt-r-size-3:not(.rt-DialogContent)::after { 727 | content: ""; 728 | margin-top: -0.3941em; 729 | display: table; 730 | } 731 | 732 | .rt-r-size-4:not(.rt-DialogContent) { 733 | font-size: 19.243px; 734 | line-height: 28px; 735 | } 736 | 737 | .rt-r-size-4:not(.rt-DialogContent)::before { 738 | content: ""; 739 | margin-bottom: -0.3638em; 740 | display: table; 741 | } 742 | 743 | .rt-r-size-4:not(.rt-DialogContent)::after { 744 | content: ""; 745 | margin-top: -0.3638em; 746 | display: table; 747 | } 748 | 749 | .rt-r-size-5:not(.rt-DialogContent) { 750 | font-size: 24.7409px; 751 | line-height: 30px; 752 | } 753 | 754 | .rt-r-size-5:not(.rt-DialogContent)::before { 755 | content: ""; 756 | margin-bottom: -0.2425em; 757 | display: table; 758 | } 759 | 760 | .rt-r-size-5:not(.rt-DialogContent)::after { 761 | content: ""; 762 | margin-top: -0.2425em; 763 | display: table; 764 | } 765 | 766 | .rt-r-size-6:not(.rt-DialogContent) { 767 | font-size: 32.9879px; 768 | line-height: 36px; 769 | } 770 | 771 | .rt-r-size-6:not(.rt-DialogContent)::before { 772 | content: ""; 773 | margin-bottom: -0.1819em; 774 | display: table; 775 | } 776 | 777 | .rt-r-size-6:not(.rt-DialogContent)::after { 778 | content: ""; 779 | margin-top: -0.1819em; 780 | display: table; 781 | } 782 | 783 | .rt-r-size-7:not(.rt-DialogContent) { 784 | font-size: 49.4819px; 785 | line-height: 44px; 786 | } 787 | 788 | .rt-r-size-7:not(.rt-DialogContent)::before { 789 | content: ""; 790 | margin-bottom: -0.0808em; 791 | display: table; 792 | } 793 | 794 | .rt-r-size-7:not(.rt-DialogContent)::after { 795 | content: ""; 796 | margin-top: -0.0808em; 797 | display: table; 798 | } 799 | 800 | .rt-r-size-8:not(.rt-DialogContent) { 801 | font-size: 65.9758px; 802 | line-height: 52px; 803 | } 804 | 805 | .rt-r-size-8:not(.rt-DialogContent)::before { 806 | content: ""; 807 | margin-bottom: -0.0303em; 808 | display: table; 809 | } 810 | 811 | .rt-r-size-8:not(.rt-DialogContent)::after { 812 | content: ""; 813 | margin-top: -0.0303em; 814 | display: table; 815 | } 816 | 817 | .rt-r-size-9:not(.rt-DialogContent) { 818 | font-size: 87.9678px; 819 | line-height: 64px; 820 | } 821 | 822 | .rt-r-size-9:not(.rt-DialogContent)::before { 823 | content: ""; 824 | margin-bottom: 0em; 825 | display: table; 826 | } 827 | 828 | .rt-r-size-9:not(.rt-DialogContent)::after { 829 | content: ""; 830 | margin-top: 0em; 831 | display: table; 832 | } 833 | } 834 | -------------------------------------------------------------------------------- /example/public/ptsans.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: "PT Sans", "PT Sans Fallback", Arial; 6 | --em-font-family: "PT Sans", "PT Sans Fallback", Arial; 7 | --quote-font-family: "PT Sans", "PT Sans Fallback", Arial; 8 | --heading-font-family: ; 9 | --code-font-family: -apple-system, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 10 | 11 | /* Mobile */ 12 | --font-size-1: 12.8571px; 13 | --line-height-1: 19px; 14 | --font-size-2: 15.7143px; 15 | --line-height-2: 23px; 16 | --font-size-3: 17.1429px; 17 | --line-height-3: 25px; 18 | --font-size-4: 20px; 19 | --line-height-4: 28px; 20 | --font-size-5: 25.7143px; 21 | --line-height-5: 30px; 22 | --font-size-6: 34.2857px; 23 | --line-height-6: 36px; 24 | --font-size-7: 51.4286px; 25 | --line-height-7: 44px; 26 | --font-size-8: 68.5714px; 27 | --line-height-8: 52px; 28 | --font-size-9: 91.4286px; 29 | --line-height-9: 64px; 30 | 31 | /* Larger devices */ 32 | @media (min-width: 768px) { 33 | --font-size-1: 12.8571px; 34 | --line-height-1: 19px; 35 | --font-size-2: 15.7143px; 36 | --line-height-2: 23px; 37 | --font-size-3: 17.1429px; 38 | --line-height-3: 25px; 39 | --font-size-4: 20px; 40 | --line-height-4: 28px; 41 | --font-size-5: 25.7143px; 42 | --line-height-5: 30px; 43 | --font-size-6: 34.2857px; 44 | --line-height-6: 36px; 45 | --font-size-7: 51.4286px; 46 | --line-height-7: 44px; 47 | --font-size-8: 68.5714px; 48 | --line-height-8: 52px; 49 | --font-size-9: 91.4286px; 50 | --line-height-9: 64px; 51 | } 52 | } 53 | 54 | /* Otherwise links don't flow inline */ 55 | .rt-Link { 56 | display: inline-block; 57 | } 58 | 59 | /* Default text styles */ 60 | 61 | .rt-Text { 62 | font-size: 15.7143px; 63 | line-height: 23px; 64 | } 65 | 66 | .rt-Text::before { 67 | content: ""; 68 | margin-bottom: -0.4028em; 69 | display: table; 70 | } 71 | 72 | .rt-Text::after { 73 | content: ""; 74 | margin-top: -0.3608em; 75 | display: table; 76 | } 77 | @media (min-width: 768px) { 78 | 79 | .rt-Text { 80 | font-size: 17.1429px; 81 | line-height: 25px; 82 | } 83 | 84 | .rt-Text::before { 85 | content: ""; 86 | margin-bottom: -0.4002em; 87 | display: table; 88 | } 89 | 90 | .rt-Text::after { 91 | content: ""; 92 | margin-top: -0.3582em; 93 | display: table; 94 | } 95 | } 96 | 97 | /* Em text styles */ 98 | 99 | .rt-Em { 100 | font-size: 15.7143px; 101 | line-height: 23px; 102 | } 103 | 104 | .rt-Em::before { 105 | content: ""; 106 | margin-bottom: -0.4028em; 107 | display: table; 108 | } 109 | 110 | .rt-Em::after { 111 | content: ""; 112 | margin-top: -0.3608em; 113 | display: table; 114 | } 115 | @media (min-width: 768px) { 116 | 117 | .rt-Em { 118 | font-size: 17.1429px; 119 | line-height: 25px; 120 | } 121 | 122 | .rt-Em::before { 123 | content: ""; 124 | margin-bottom: -0.4002em; 125 | display: table; 126 | } 127 | 128 | .rt-Em::after { 129 | content: ""; 130 | margin-top: -0.3582em; 131 | display: table; 132 | } 133 | } 134 | 135 | /* Quote text styles */ 136 | 137 | .rt-Quote { 138 | font-size: 15.7143px; 139 | line-height: 23px; 140 | } 141 | 142 | .rt-Quote::before { 143 | content: ""; 144 | margin-bottom: -0.4028em; 145 | display: table; 146 | } 147 | 148 | .rt-Quote::after { 149 | content: ""; 150 | margin-top: -0.3608em; 151 | display: table; 152 | } 153 | @media (min-width: 768px) { 154 | 155 | .rt-Quote { 156 | font-size: 17.1429px; 157 | line-height: 25px; 158 | } 159 | 160 | .rt-Quote::before { 161 | content: ""; 162 | margin-bottom: -0.4002em; 163 | display: table; 164 | } 165 | 166 | .rt-Quote::after { 167 | content: ""; 168 | margin-top: -0.3582em; 169 | display: table; 170 | } 171 | } 172 | 173 | /* Code text styles */ 174 | 175 | .rt-Code { 176 | font-size: 14.8313px; 177 | line-height: 22.45px; 178 | } 179 | 180 | .rt-Code::before { 181 | content: ""; 182 | margin-bottom: -0.4302em; 183 | display: table; 184 | } 185 | 186 | .rt-Code::after { 187 | content: ""; 188 | margin-top: -0.3789em; 189 | display: table; 190 | } 191 | @media (min-width: 768px) { 192 | 193 | .rt-Code { 194 | font-size: 16.1796px; 195 | line-height: 24.4px; 196 | } 197 | 198 | .rt-Code::before { 199 | content: ""; 200 | margin-bottom: -0.4274em; 201 | display: table; 202 | } 203 | 204 | .rt-Code::after { 205 | content: ""; 206 | margin-top: -0.3761em; 207 | display: table; 208 | } 209 | } 210 | 211 | /* Code size variants */ 212 | 213 | .rt-Code.rt-r-size-1 { 214 | font-size: 12.1347px; 215 | line-height: 18.55px; 216 | } 217 | 218 | .rt-Code.rt-r-size-1::before { 219 | content: ""; 220 | margin-bottom: -0.4377em; 221 | display: table; 222 | } 223 | 224 | .rt-Code.rt-r-size-1::after { 225 | content: ""; 226 | margin-top: -0.3864em; 227 | display: table; 228 | } 229 | 230 | .rt-Code.rt-r-size-2 { 231 | font-size: 14.8313px; 232 | line-height: 22.45px; 233 | } 234 | 235 | .rt-Code.rt-r-size-2::before { 236 | content: ""; 237 | margin-bottom: -0.4302em; 238 | display: table; 239 | } 240 | 241 | .rt-Code.rt-r-size-2::after { 242 | content: ""; 243 | margin-top: -0.3789em; 244 | display: table; 245 | } 246 | 247 | .rt-Code.rt-r-size-3 { 248 | font-size: 16.1796px; 249 | line-height: 24.4px; 250 | } 251 | 252 | .rt-Code.rt-r-size-3::before { 253 | content: ""; 254 | margin-bottom: -0.4274em; 255 | display: table; 256 | } 257 | 258 | .rt-Code.rt-r-size-3::after { 259 | content: ""; 260 | margin-top: -0.3761em; 261 | display: table; 262 | } 263 | 264 | .rt-Code.rt-r-size-4 { 265 | font-size: 18.8762px; 266 | line-height: 27.3px; 267 | } 268 | 269 | .rt-Code.rt-r-size-4::before { 270 | content: ""; 271 | margin-bottom: -0.3965em; 272 | display: table; 273 | } 274 | 275 | .rt-Code.rt-r-size-4::after { 276 | content: ""; 277 | margin-top: -0.3452em; 278 | display: table; 279 | } 280 | 281 | .rt-Code.rt-r-size-5 { 282 | font-size: 24.2694px; 283 | line-height: 29.1px; 284 | } 285 | 286 | .rt-Code.rt-r-size-5::before { 287 | content: ""; 288 | margin-bottom: -0.2729em; 289 | display: table; 290 | } 291 | 292 | .rt-Code.rt-r-size-5::after { 293 | content: ""; 294 | margin-top: -0.2216em; 295 | display: table; 296 | } 297 | 298 | .rt-Code.rt-r-size-6 { 299 | font-size: 32.3593px; 300 | line-height: 34.8px; 301 | } 302 | 303 | .rt-Code.rt-r-size-6::before { 304 | content: ""; 305 | margin-bottom: -0.2111em; 306 | display: table; 307 | } 308 | 309 | .rt-Code.rt-r-size-6::after { 310 | content: ""; 311 | margin-top: -0.1598em; 312 | display: table; 313 | } 314 | 315 | .rt-Code.rt-r-size-7 { 316 | font-size: 48.5389px; 317 | line-height: 42.2px; 318 | } 319 | 320 | .rt-Code.rt-r-size-7::before { 321 | content: ""; 322 | margin-bottom: -0.108em; 323 | display: table; 324 | } 325 | 326 | .rt-Code.rt-r-size-7::after { 327 | content: ""; 328 | margin-top: -0.0568em; 329 | display: table; 330 | } 331 | 332 | .rt-Code.rt-r-size-8 { 333 | font-size: 64.7185px; 334 | line-height: 49.6px; 335 | } 336 | 337 | .rt-Code.rt-r-size-8::before { 338 | content: ""; 339 | margin-bottom: -0.0565em; 340 | display: table; 341 | } 342 | 343 | .rt-Code.rt-r-size-8::after { 344 | content: ""; 345 | margin-top: -0.0053em; 346 | display: table; 347 | } 348 | 349 | .rt-Code.rt-r-size-9 { 350 | font-size: 86.2913px; 351 | line-height: 60.8px; 352 | } 353 | 354 | .rt-Code.rt-r-size-9::before { 355 | content: ""; 356 | margin-bottom: -0.0256em; 357 | display: table; 358 | } 359 | 360 | .rt-Code.rt-r-size-9::after { 361 | content: ""; 362 | margin-top: 0.0256em; 363 | display: table; 364 | } 365 | @media (min-width: 768px) { 366 | 367 | .rt-Code.rt-r-size-1 { 368 | font-size: 12.7734px; 369 | line-height: 19px; 370 | } 371 | 372 | .rt-Code.rt-r-size-1::before { 373 | content: ""; 374 | margin-bottom: -0.4171em; 375 | display: table; 376 | } 377 | 378 | .rt-Code.rt-r-size-1::after { 379 | content: ""; 380 | margin-top: -0.3658em; 381 | display: table; 382 | } 383 | 384 | .rt-Code.rt-r-size-2 { 385 | font-size: 15.6119px; 386 | line-height: 23px; 387 | } 388 | 389 | .rt-Code.rt-r-size-2::before { 390 | content: ""; 391 | margin-bottom: -0.41em; 392 | display: table; 393 | } 394 | 395 | .rt-Code.rt-r-size-2::after { 396 | content: ""; 397 | margin-top: -0.3587em; 398 | display: table; 399 | } 400 | 401 | .rt-Code.rt-r-size-3 { 402 | font-size: 17.0312px; 403 | line-height: 25px; 404 | } 405 | 406 | .rt-Code.rt-r-size-3::before { 407 | content: ""; 408 | margin-bottom: -0.4073em; 409 | display: table; 410 | } 411 | 412 | .rt-Code.rt-r-size-3::after { 413 | content: ""; 414 | margin-top: -0.356em; 415 | display: table; 416 | } 417 | 418 | .rt-Code.rt-r-size-4 { 419 | font-size: 19.8697px; 420 | line-height: 28px; 421 | } 422 | 423 | .rt-Code.rt-r-size-4::before { 424 | content: ""; 425 | margin-bottom: -0.3779em; 426 | display: table; 427 | } 428 | 429 | .rt-Code.rt-r-size-4::after { 430 | content: ""; 431 | margin-top: -0.3267em; 432 | display: table; 433 | } 434 | 435 | .rt-Code.rt-r-size-5 { 436 | font-size: 25.5468px; 437 | line-height: 30px; 438 | } 439 | 440 | .rt-Code.rt-r-size-5::before { 441 | content: ""; 442 | margin-bottom: -0.2605em; 443 | display: table; 444 | } 445 | 446 | .rt-Code.rt-r-size-5::after { 447 | content: ""; 448 | margin-top: -0.2092em; 449 | display: table; 450 | } 451 | 452 | .rt-Code.rt-r-size-6 { 453 | font-size: 34.0624px; 454 | line-height: 36px; 455 | } 456 | 457 | .rt-Code.rt-r-size-6::before { 458 | content: ""; 459 | margin-bottom: -0.2018em; 460 | display: table; 461 | } 462 | 463 | .rt-Code.rt-r-size-6::after { 464 | content: ""; 465 | margin-top: -0.1505em; 466 | display: table; 467 | } 468 | 469 | .rt-Code.rt-r-size-7 { 470 | font-size: 51.0936px; 471 | line-height: 44px; 472 | } 473 | 474 | .rt-Code.rt-r-size-7::before { 475 | content: ""; 476 | margin-bottom: -0.1039em; 477 | display: table; 478 | } 479 | 480 | .rt-Code.rt-r-size-7::after { 481 | content: ""; 482 | margin-top: -0.0527em; 483 | display: table; 484 | } 485 | 486 | .rt-Code.rt-r-size-8 { 487 | font-size: 68.1247px; 488 | line-height: 52px; 489 | } 490 | 491 | .rt-Code.rt-r-size-8::before { 492 | content: ""; 493 | margin-bottom: -0.055em; 494 | display: table; 495 | } 496 | 497 | .rt-Code.rt-r-size-8::after { 498 | content: ""; 499 | margin-top: -0.0037em; 500 | display: table; 501 | } 502 | 503 | .rt-Code.rt-r-size-9 { 504 | font-size: 90.833px; 505 | line-height: 64px; 506 | } 507 | 508 | .rt-Code.rt-r-size-9::before { 509 | content: ""; 510 | margin-bottom: -0.0256em; 511 | display: table; 512 | } 513 | 514 | .rt-Code.rt-r-size-9::after { 515 | content: ""; 516 | margin-top: 0.0256em; 517 | display: table; 518 | } 519 | } 520 | 521 | .rt-Em, .rt-Quote, .rt-Code { 522 | display: inline-block; 523 | } 524 | 525 | /* Class names for text elements */ 526 | 527 | .rt-r-size-1:not(.rt-DialogContent) { 528 | font-size: 12.8571px; 529 | line-height: 19px; 530 | } 531 | 532 | .rt-r-size-1:not(.rt-DialogContent)::before { 533 | content: ""; 534 | margin-bottom: -0.4099em; 535 | display: table; 536 | } 537 | 538 | .rt-r-size-1:not(.rt-DialogContent)::after { 539 | content: ""; 540 | margin-top: -0.3679em; 541 | display: table; 542 | } 543 | 544 | .rt-r-size-2:not(.rt-DialogContent) { 545 | font-size: 15.7143px; 546 | line-height: 23px; 547 | } 548 | 549 | .rt-r-size-2:not(.rt-DialogContent)::before { 550 | content: ""; 551 | margin-bottom: -0.4028em; 552 | display: table; 553 | } 554 | 555 | .rt-r-size-2:not(.rt-DialogContent)::after { 556 | content: ""; 557 | margin-top: -0.3608em; 558 | display: table; 559 | } 560 | 561 | .rt-r-size-3:not(.rt-DialogContent) { 562 | font-size: 17.1429px; 563 | line-height: 25px; 564 | } 565 | 566 | .rt-r-size-3:not(.rt-DialogContent)::before { 567 | content: ""; 568 | margin-bottom: -0.4002em; 569 | display: table; 570 | } 571 | 572 | .rt-r-size-3:not(.rt-DialogContent)::after { 573 | content: ""; 574 | margin-top: -0.3582em; 575 | display: table; 576 | } 577 | 578 | .rt-r-size-4:not(.rt-DialogContent) { 579 | font-size: 20px; 580 | line-height: 28px; 581 | } 582 | 583 | .rt-r-size-4:not(.rt-DialogContent)::before { 584 | content: ""; 585 | margin-bottom: -0.371em; 586 | display: table; 587 | } 588 | 589 | .rt-r-size-4:not(.rt-DialogContent)::after { 590 | content: ""; 591 | margin-top: -0.329em; 592 | display: table; 593 | } 594 | 595 | .rt-r-size-5:not(.rt-DialogContent) { 596 | font-size: 25.7143px; 597 | line-height: 30px; 598 | } 599 | 600 | .rt-r-size-5:not(.rt-DialogContent)::before { 601 | content: ""; 602 | margin-bottom: -0.2543em; 603 | display: table; 604 | } 605 | 606 | .rt-r-size-5:not(.rt-DialogContent)::after { 607 | content: ""; 608 | margin-top: -0.2123em; 609 | display: table; 610 | } 611 | 612 | .rt-r-size-6:not(.rt-DialogContent) { 613 | font-size: 34.2857px; 614 | line-height: 36px; 615 | } 616 | 617 | .rt-r-size-6:not(.rt-DialogContent)::before { 618 | content: ""; 619 | margin-bottom: -0.196em; 620 | display: table; 621 | } 622 | 623 | .rt-r-size-6:not(.rt-DialogContent)::after { 624 | content: ""; 625 | margin-top: -0.154em; 626 | display: table; 627 | } 628 | 629 | .rt-r-size-7:not(.rt-DialogContent) { 630 | font-size: 51.4286px; 631 | line-height: 44px; 632 | } 633 | 634 | .rt-r-size-7:not(.rt-DialogContent)::before { 635 | content: ""; 636 | margin-bottom: -0.0988em; 637 | display: table; 638 | } 639 | 640 | .rt-r-size-7:not(.rt-DialogContent)::after { 641 | content: ""; 642 | margin-top: -0.0568em; 643 | display: table; 644 | } 645 | 646 | .rt-r-size-8:not(.rt-DialogContent) { 647 | font-size: 68.5714px; 648 | line-height: 52px; 649 | } 650 | 651 | .rt-r-size-8:not(.rt-DialogContent)::before { 652 | content: ""; 653 | margin-bottom: -0.0502em; 654 | display: table; 655 | } 656 | 657 | .rt-r-size-8:not(.rt-DialogContent)::after { 658 | content: ""; 659 | margin-top: -0.0082em; 660 | display: table; 661 | } 662 | 663 | .rt-r-size-9:not(.rt-DialogContent) { 664 | font-size: 91.4286px; 665 | line-height: 64px; 666 | } 667 | 668 | .rt-r-size-9:not(.rt-DialogContent)::before { 669 | content: ""; 670 | margin-bottom: -0.021em; 671 | display: table; 672 | } 673 | 674 | .rt-r-size-9:not(.rt-DialogContent)::after { 675 | content: ""; 676 | margin-top: 0.021em; 677 | display: table; 678 | } 679 | @media (min-width: 768px) { 680 | 681 | .rt-r-size-1:not(.rt-DialogContent) { 682 | font-size: 12.8571px; 683 | line-height: 19px; 684 | } 685 | 686 | .rt-r-size-1:not(.rt-DialogContent)::before { 687 | content: ""; 688 | margin-bottom: -0.4099em; 689 | display: table; 690 | } 691 | 692 | .rt-r-size-1:not(.rt-DialogContent)::after { 693 | content: ""; 694 | margin-top: -0.3679em; 695 | display: table; 696 | } 697 | 698 | .rt-r-size-2:not(.rt-DialogContent) { 699 | font-size: 15.7143px; 700 | line-height: 23px; 701 | } 702 | 703 | .rt-r-size-2:not(.rt-DialogContent)::before { 704 | content: ""; 705 | margin-bottom: -0.4028em; 706 | display: table; 707 | } 708 | 709 | .rt-r-size-2:not(.rt-DialogContent)::after { 710 | content: ""; 711 | margin-top: -0.3608em; 712 | display: table; 713 | } 714 | 715 | .rt-r-size-3:not(.rt-DialogContent) { 716 | font-size: 17.1429px; 717 | line-height: 25px; 718 | } 719 | 720 | .rt-r-size-3:not(.rt-DialogContent)::before { 721 | content: ""; 722 | margin-bottom: -0.4002em; 723 | display: table; 724 | } 725 | 726 | .rt-r-size-3:not(.rt-DialogContent)::after { 727 | content: ""; 728 | margin-top: -0.3582em; 729 | display: table; 730 | } 731 | 732 | .rt-r-size-4:not(.rt-DialogContent) { 733 | font-size: 20px; 734 | line-height: 28px; 735 | } 736 | 737 | .rt-r-size-4:not(.rt-DialogContent)::before { 738 | content: ""; 739 | margin-bottom: -0.371em; 740 | display: table; 741 | } 742 | 743 | .rt-r-size-4:not(.rt-DialogContent)::after { 744 | content: ""; 745 | margin-top: -0.329em; 746 | display: table; 747 | } 748 | 749 | .rt-r-size-5:not(.rt-DialogContent) { 750 | font-size: 25.7143px; 751 | line-height: 30px; 752 | } 753 | 754 | .rt-r-size-5:not(.rt-DialogContent)::before { 755 | content: ""; 756 | margin-bottom: -0.2543em; 757 | display: table; 758 | } 759 | 760 | .rt-r-size-5:not(.rt-DialogContent)::after { 761 | content: ""; 762 | margin-top: -0.2123em; 763 | display: table; 764 | } 765 | 766 | .rt-r-size-6:not(.rt-DialogContent) { 767 | font-size: 34.2857px; 768 | line-height: 36px; 769 | } 770 | 771 | .rt-r-size-6:not(.rt-DialogContent)::before { 772 | content: ""; 773 | margin-bottom: -0.196em; 774 | display: table; 775 | } 776 | 777 | .rt-r-size-6:not(.rt-DialogContent)::after { 778 | content: ""; 779 | margin-top: -0.154em; 780 | display: table; 781 | } 782 | 783 | .rt-r-size-7:not(.rt-DialogContent) { 784 | font-size: 51.4286px; 785 | line-height: 44px; 786 | } 787 | 788 | .rt-r-size-7:not(.rt-DialogContent)::before { 789 | content: ""; 790 | margin-bottom: -0.0988em; 791 | display: table; 792 | } 793 | 794 | .rt-r-size-7:not(.rt-DialogContent)::after { 795 | content: ""; 796 | margin-top: -0.0568em; 797 | display: table; 798 | } 799 | 800 | .rt-r-size-8:not(.rt-DialogContent) { 801 | font-size: 68.5714px; 802 | line-height: 52px; 803 | } 804 | 805 | .rt-r-size-8:not(.rt-DialogContent)::before { 806 | content: ""; 807 | margin-bottom: -0.0502em; 808 | display: table; 809 | } 810 | 811 | .rt-r-size-8:not(.rt-DialogContent)::after { 812 | content: ""; 813 | margin-top: -0.0082em; 814 | display: table; 815 | } 816 | 817 | .rt-r-size-9:not(.rt-DialogContent) { 818 | font-size: 91.4286px; 819 | line-height: 64px; 820 | } 821 | 822 | .rt-r-size-9:not(.rt-DialogContent)::before { 823 | content: ""; 824 | margin-bottom: -0.021em; 825 | display: table; 826 | } 827 | 828 | .rt-r-size-9:not(.rt-DialogContent)::after { 829 | content: ""; 830 | margin-top: 0.021em; 831 | display: table; 832 | } 833 | } 834 | -------------------------------------------------------------------------------- /example/public/lato.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: Lato, "Lato Fallback", Arial; 6 | --em-font-family: Lato, "Lato Fallback", Arial; 7 | --quote-font-family: Lato, "Lato Fallback", Arial; 8 | --heading-font-family: ; 9 | --code-font-family: -apple-system, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 10 | 11 | /* Mobile */ 12 | --font-size-1: 12.5611px; 13 | --line-height-1: 19px; 14 | --font-size-2: 15.3524px; 15 | --line-height-2: 23px; 16 | --font-size-3: 16.7481px; 17 | --line-height-3: 25px; 18 | --font-size-4: 19.5394px; 19 | --line-height-4: 28px; 20 | --font-size-5: 25.1221px; 21 | --line-height-5: 30px; 22 | --font-size-6: 33.4962px; 23 | --line-height-6: 36px; 24 | --font-size-7: 50.2442px; 25 | --line-height-7: 44px; 26 | --font-size-8: 66.9923px; 27 | --line-height-8: 52px; 28 | --font-size-9: 89.3231px; 29 | --line-height-9: 64px; 30 | 31 | /* Larger devices */ 32 | @media (min-width: 768px) { 33 | --font-size-1: 12.5611px; 34 | --line-height-1: 19px; 35 | --font-size-2: 15.3524px; 36 | --line-height-2: 23px; 37 | --font-size-3: 16.7481px; 38 | --line-height-3: 25px; 39 | --font-size-4: 19.5394px; 40 | --line-height-4: 28px; 41 | --font-size-5: 25.1221px; 42 | --line-height-5: 30px; 43 | --font-size-6: 33.4962px; 44 | --line-height-6: 36px; 45 | --font-size-7: 50.2442px; 46 | --line-height-7: 44px; 47 | --font-size-8: 66.9923px; 48 | --line-height-8: 52px; 49 | --font-size-9: 89.3231px; 50 | --line-height-9: 64px; 51 | } 52 | } 53 | 54 | /* Otherwise links don't flow inline */ 55 | .rt-Link { 56 | display: inline-block; 57 | } 58 | 59 | /* Default text styles */ 60 | 61 | .rt-Text { 62 | font-size: 15.3524px; 63 | line-height: 23px; 64 | } 65 | 66 | .rt-Text::before { 67 | content: ""; 68 | margin-bottom: -0.4196em; 69 | display: table; 70 | } 71 | 72 | .rt-Text::after { 73 | content: ""; 74 | margin-top: -0.3621em; 75 | display: table; 76 | } 77 | @media (min-width: 768px) { 78 | 79 | .rt-Text { 80 | font-size: 16.7481px; 81 | line-height: 25px; 82 | } 83 | 84 | .rt-Text::before { 85 | content: ""; 86 | margin-bottom: -0.4169em; 87 | display: table; 88 | } 89 | 90 | .rt-Text::after { 91 | content: ""; 92 | margin-top: -0.3594em; 93 | display: table; 94 | } 95 | } 96 | 97 | /* Em text styles */ 98 | 99 | .rt-Em { 100 | font-size: 15.3524px; 101 | line-height: 23px; 102 | } 103 | 104 | .rt-Em::before { 105 | content: ""; 106 | margin-bottom: -0.4196em; 107 | display: table; 108 | } 109 | 110 | .rt-Em::after { 111 | content: ""; 112 | margin-top: -0.3621em; 113 | display: table; 114 | } 115 | @media (min-width: 768px) { 116 | 117 | .rt-Em { 118 | font-size: 16.7481px; 119 | line-height: 25px; 120 | } 121 | 122 | .rt-Em::before { 123 | content: ""; 124 | margin-bottom: -0.4169em; 125 | display: table; 126 | } 127 | 128 | .rt-Em::after { 129 | content: ""; 130 | margin-top: -0.3594em; 131 | display: table; 132 | } 133 | } 134 | 135 | /* Quote text styles */ 136 | 137 | .rt-Quote { 138 | font-size: 15.3524px; 139 | line-height: 23px; 140 | } 141 | 142 | .rt-Quote::before { 143 | content: ""; 144 | margin-bottom: -0.4196em; 145 | display: table; 146 | } 147 | 148 | .rt-Quote::after { 149 | content: ""; 150 | margin-top: -0.3621em; 151 | display: table; 152 | } 153 | @media (min-width: 768px) { 154 | 155 | .rt-Quote { 156 | font-size: 16.7481px; 157 | line-height: 25px; 158 | } 159 | 160 | .rt-Quote::before { 161 | content: ""; 162 | margin-bottom: -0.4169em; 163 | display: table; 164 | } 165 | 166 | .rt-Quote::after { 167 | content: ""; 168 | margin-top: -0.3594em; 169 | display: table; 170 | } 171 | } 172 | 173 | /* Code text styles */ 174 | 175 | .rt-Code { 176 | font-size: 14.8313px; 177 | line-height: 22.45px; 178 | } 179 | 180 | .rt-Code::before { 181 | content: ""; 182 | margin-bottom: -0.4302em; 183 | display: table; 184 | } 185 | 186 | .rt-Code::after { 187 | content: ""; 188 | margin-top: -0.3789em; 189 | display: table; 190 | } 191 | @media (min-width: 768px) { 192 | 193 | .rt-Code { 194 | font-size: 16.1796px; 195 | line-height: 24.4px; 196 | } 197 | 198 | .rt-Code::before { 199 | content: ""; 200 | margin-bottom: -0.4274em; 201 | display: table; 202 | } 203 | 204 | .rt-Code::after { 205 | content: ""; 206 | margin-top: -0.3761em; 207 | display: table; 208 | } 209 | } 210 | 211 | /* Code size variants */ 212 | 213 | .rt-Code.rt-r-size-1 { 214 | font-size: 12.1347px; 215 | line-height: 18.55px; 216 | } 217 | 218 | .rt-Code.rt-r-size-1::before { 219 | content: ""; 220 | margin-bottom: -0.4377em; 221 | display: table; 222 | } 223 | 224 | .rt-Code.rt-r-size-1::after { 225 | content: ""; 226 | margin-top: -0.3864em; 227 | display: table; 228 | } 229 | 230 | .rt-Code.rt-r-size-2 { 231 | font-size: 14.8313px; 232 | line-height: 22.45px; 233 | } 234 | 235 | .rt-Code.rt-r-size-2::before { 236 | content: ""; 237 | margin-bottom: -0.4302em; 238 | display: table; 239 | } 240 | 241 | .rt-Code.rt-r-size-2::after { 242 | content: ""; 243 | margin-top: -0.3789em; 244 | display: table; 245 | } 246 | 247 | .rt-Code.rt-r-size-3 { 248 | font-size: 16.1796px; 249 | line-height: 24.4px; 250 | } 251 | 252 | .rt-Code.rt-r-size-3::before { 253 | content: ""; 254 | margin-bottom: -0.4274em; 255 | display: table; 256 | } 257 | 258 | .rt-Code.rt-r-size-3::after { 259 | content: ""; 260 | margin-top: -0.3761em; 261 | display: table; 262 | } 263 | 264 | .rt-Code.rt-r-size-4 { 265 | font-size: 18.8762px; 266 | line-height: 27.3px; 267 | } 268 | 269 | .rt-Code.rt-r-size-4::before { 270 | content: ""; 271 | margin-bottom: -0.3965em; 272 | display: table; 273 | } 274 | 275 | .rt-Code.rt-r-size-4::after { 276 | content: ""; 277 | margin-top: -0.3452em; 278 | display: table; 279 | } 280 | 281 | .rt-Code.rt-r-size-5 { 282 | font-size: 24.2694px; 283 | line-height: 29.1px; 284 | } 285 | 286 | .rt-Code.rt-r-size-5::before { 287 | content: ""; 288 | margin-bottom: -0.2729em; 289 | display: table; 290 | } 291 | 292 | .rt-Code.rt-r-size-5::after { 293 | content: ""; 294 | margin-top: -0.2216em; 295 | display: table; 296 | } 297 | 298 | .rt-Code.rt-r-size-6 { 299 | font-size: 32.3593px; 300 | line-height: 34.8px; 301 | } 302 | 303 | .rt-Code.rt-r-size-6::before { 304 | content: ""; 305 | margin-bottom: -0.2111em; 306 | display: table; 307 | } 308 | 309 | .rt-Code.rt-r-size-6::after { 310 | content: ""; 311 | margin-top: -0.1598em; 312 | display: table; 313 | } 314 | 315 | .rt-Code.rt-r-size-7 { 316 | font-size: 48.5389px; 317 | line-height: 42.2px; 318 | } 319 | 320 | .rt-Code.rt-r-size-7::before { 321 | content: ""; 322 | margin-bottom: -0.108em; 323 | display: table; 324 | } 325 | 326 | .rt-Code.rt-r-size-7::after { 327 | content: ""; 328 | margin-top: -0.0568em; 329 | display: table; 330 | } 331 | 332 | .rt-Code.rt-r-size-8 { 333 | font-size: 64.7185px; 334 | line-height: 49.6px; 335 | } 336 | 337 | .rt-Code.rt-r-size-8::before { 338 | content: ""; 339 | margin-bottom: -0.0565em; 340 | display: table; 341 | } 342 | 343 | .rt-Code.rt-r-size-8::after { 344 | content: ""; 345 | margin-top: -0.0053em; 346 | display: table; 347 | } 348 | 349 | .rt-Code.rt-r-size-9 { 350 | font-size: 86.2913px; 351 | line-height: 60.8px; 352 | } 353 | 354 | .rt-Code.rt-r-size-9::before { 355 | content: ""; 356 | margin-bottom: -0.0256em; 357 | display: table; 358 | } 359 | 360 | .rt-Code.rt-r-size-9::after { 361 | content: ""; 362 | margin-top: 0.0256em; 363 | display: table; 364 | } 365 | @media (min-width: 768px) { 366 | 367 | .rt-Code.rt-r-size-1 { 368 | font-size: 12.7734px; 369 | line-height: 19px; 370 | } 371 | 372 | .rt-Code.rt-r-size-1::before { 373 | content: ""; 374 | margin-bottom: -0.4171em; 375 | display: table; 376 | } 377 | 378 | .rt-Code.rt-r-size-1::after { 379 | content: ""; 380 | margin-top: -0.3658em; 381 | display: table; 382 | } 383 | 384 | .rt-Code.rt-r-size-2 { 385 | font-size: 15.6119px; 386 | line-height: 23px; 387 | } 388 | 389 | .rt-Code.rt-r-size-2::before { 390 | content: ""; 391 | margin-bottom: -0.41em; 392 | display: table; 393 | } 394 | 395 | .rt-Code.rt-r-size-2::after { 396 | content: ""; 397 | margin-top: -0.3587em; 398 | display: table; 399 | } 400 | 401 | .rt-Code.rt-r-size-3 { 402 | font-size: 17.0312px; 403 | line-height: 25px; 404 | } 405 | 406 | .rt-Code.rt-r-size-3::before { 407 | content: ""; 408 | margin-bottom: -0.4073em; 409 | display: table; 410 | } 411 | 412 | .rt-Code.rt-r-size-3::after { 413 | content: ""; 414 | margin-top: -0.356em; 415 | display: table; 416 | } 417 | 418 | .rt-Code.rt-r-size-4 { 419 | font-size: 19.8697px; 420 | line-height: 28px; 421 | } 422 | 423 | .rt-Code.rt-r-size-4::before { 424 | content: ""; 425 | margin-bottom: -0.3779em; 426 | display: table; 427 | } 428 | 429 | .rt-Code.rt-r-size-4::after { 430 | content: ""; 431 | margin-top: -0.3267em; 432 | display: table; 433 | } 434 | 435 | .rt-Code.rt-r-size-5 { 436 | font-size: 25.5468px; 437 | line-height: 30px; 438 | } 439 | 440 | .rt-Code.rt-r-size-5::before { 441 | content: ""; 442 | margin-bottom: -0.2605em; 443 | display: table; 444 | } 445 | 446 | .rt-Code.rt-r-size-5::after { 447 | content: ""; 448 | margin-top: -0.2092em; 449 | display: table; 450 | } 451 | 452 | .rt-Code.rt-r-size-6 { 453 | font-size: 34.0624px; 454 | line-height: 36px; 455 | } 456 | 457 | .rt-Code.rt-r-size-6::before { 458 | content: ""; 459 | margin-bottom: -0.2018em; 460 | display: table; 461 | } 462 | 463 | .rt-Code.rt-r-size-6::after { 464 | content: ""; 465 | margin-top: -0.1505em; 466 | display: table; 467 | } 468 | 469 | .rt-Code.rt-r-size-7 { 470 | font-size: 51.0936px; 471 | line-height: 44px; 472 | } 473 | 474 | .rt-Code.rt-r-size-7::before { 475 | content: ""; 476 | margin-bottom: -0.1039em; 477 | display: table; 478 | } 479 | 480 | .rt-Code.rt-r-size-7::after { 481 | content: ""; 482 | margin-top: -0.0527em; 483 | display: table; 484 | } 485 | 486 | .rt-Code.rt-r-size-8 { 487 | font-size: 68.1247px; 488 | line-height: 52px; 489 | } 490 | 491 | .rt-Code.rt-r-size-8::before { 492 | content: ""; 493 | margin-bottom: -0.055em; 494 | display: table; 495 | } 496 | 497 | .rt-Code.rt-r-size-8::after { 498 | content: ""; 499 | margin-top: -0.0037em; 500 | display: table; 501 | } 502 | 503 | .rt-Code.rt-r-size-9 { 504 | font-size: 90.833px; 505 | line-height: 64px; 506 | } 507 | 508 | .rt-Code.rt-r-size-9::before { 509 | content: ""; 510 | margin-bottom: -0.0256em; 511 | display: table; 512 | } 513 | 514 | .rt-Code.rt-r-size-9::after { 515 | content: ""; 516 | margin-top: 0.0256em; 517 | display: table; 518 | } 519 | } 520 | 521 | .rt-Em, .rt-Quote, .rt-Code { 522 | display: inline-block; 523 | } 524 | 525 | /* Class names for text elements */ 526 | 527 | .rt-r-size-1:not(.rt-DialogContent) { 528 | font-size: 12.5611px; 529 | line-height: 19px; 530 | } 531 | 532 | .rt-r-size-1:not(.rt-DialogContent)::before { 533 | content: ""; 534 | margin-bottom: -0.4268em; 535 | display: table; 536 | } 537 | 538 | .rt-r-size-1:not(.rt-DialogContent)::after { 539 | content: ""; 540 | margin-top: -0.3693em; 541 | display: table; 542 | } 543 | 544 | .rt-r-size-2:not(.rt-DialogContent) { 545 | font-size: 15.3524px; 546 | line-height: 23px; 547 | } 548 | 549 | .rt-r-size-2:not(.rt-DialogContent)::before { 550 | content: ""; 551 | margin-bottom: -0.4196em; 552 | display: table; 553 | } 554 | 555 | .rt-r-size-2:not(.rt-DialogContent)::after { 556 | content: ""; 557 | margin-top: -0.3621em; 558 | display: table; 559 | } 560 | 561 | .rt-r-size-3:not(.rt-DialogContent) { 562 | font-size: 16.7481px; 563 | line-height: 25px; 564 | } 565 | 566 | .rt-r-size-3:not(.rt-DialogContent)::before { 567 | content: ""; 568 | margin-bottom: -0.4169em; 569 | display: table; 570 | } 571 | 572 | .rt-r-size-3:not(.rt-DialogContent)::after { 573 | content: ""; 574 | margin-top: -0.3594em; 575 | display: table; 576 | } 577 | 578 | .rt-r-size-4:not(.rt-DialogContent) { 579 | font-size: 19.5394px; 580 | line-height: 28px; 581 | } 582 | 583 | .rt-r-size-4:not(.rt-DialogContent)::before { 584 | content: ""; 585 | margin-bottom: -0.387em; 586 | display: table; 587 | } 588 | 589 | .rt-r-size-4:not(.rt-DialogContent)::after { 590 | content: ""; 591 | margin-top: -0.3295em; 592 | display: table; 593 | } 594 | 595 | .rt-r-size-5:not(.rt-DialogContent) { 596 | font-size: 25.1221px; 597 | line-height: 30px; 598 | } 599 | 600 | .rt-r-size-5:not(.rt-DialogContent)::before { 601 | content: ""; 602 | margin-bottom: -0.2676em; 603 | display: table; 604 | } 605 | 606 | .rt-r-size-5:not(.rt-DialogContent)::after { 607 | content: ""; 608 | margin-top: -0.2101em; 609 | display: table; 610 | } 611 | 612 | .rt-r-size-6:not(.rt-DialogContent) { 613 | font-size: 33.4962px; 614 | line-height: 36px; 615 | } 616 | 617 | .rt-r-size-6:not(.rt-DialogContent)::before { 618 | content: ""; 619 | margin-bottom: -0.2079em; 620 | display: table; 621 | } 622 | 623 | .rt-r-size-6:not(.rt-DialogContent)::after { 624 | content: ""; 625 | margin-top: -0.1504em; 626 | display: table; 627 | } 628 | 629 | .rt-r-size-7:not(.rt-DialogContent) { 630 | font-size: 50.2442px; 631 | line-height: 44px; 632 | } 633 | 634 | .rt-r-size-7:not(.rt-DialogContent)::before { 635 | content: ""; 636 | margin-bottom: -0.1084em; 637 | display: table; 638 | } 639 | 640 | .rt-r-size-7:not(.rt-DialogContent)::after { 641 | content: ""; 642 | margin-top: -0.0509em; 643 | display: table; 644 | } 645 | 646 | .rt-r-size-8:not(.rt-DialogContent) { 647 | font-size: 66.9923px; 648 | line-height: 52px; 649 | } 650 | 651 | .rt-r-size-8:not(.rt-DialogContent)::before { 652 | content: ""; 653 | margin-bottom: -0.0586em; 654 | display: table; 655 | } 656 | 657 | .rt-r-size-8:not(.rt-DialogContent)::after { 658 | content: ""; 659 | margin-top: -0.0011em; 660 | display: table; 661 | } 662 | 663 | .rt-r-size-9:not(.rt-DialogContent) { 664 | font-size: 89.3231px; 665 | line-height: 64px; 666 | } 667 | 668 | .rt-r-size-9:not(.rt-DialogContent)::before { 669 | content: ""; 670 | margin-bottom: -0.0287em; 671 | display: table; 672 | } 673 | 674 | .rt-r-size-9:not(.rt-DialogContent)::after { 675 | content: ""; 676 | margin-top: 0.0287em; 677 | display: table; 678 | } 679 | @media (min-width: 768px) { 680 | 681 | .rt-r-size-1:not(.rt-DialogContent) { 682 | font-size: 12.5611px; 683 | line-height: 19px; 684 | } 685 | 686 | .rt-r-size-1:not(.rt-DialogContent)::before { 687 | content: ""; 688 | margin-bottom: -0.4268em; 689 | display: table; 690 | } 691 | 692 | .rt-r-size-1:not(.rt-DialogContent)::after { 693 | content: ""; 694 | margin-top: -0.3693em; 695 | display: table; 696 | } 697 | 698 | .rt-r-size-2:not(.rt-DialogContent) { 699 | font-size: 15.3524px; 700 | line-height: 23px; 701 | } 702 | 703 | .rt-r-size-2:not(.rt-DialogContent)::before { 704 | content: ""; 705 | margin-bottom: -0.4196em; 706 | display: table; 707 | } 708 | 709 | .rt-r-size-2:not(.rt-DialogContent)::after { 710 | content: ""; 711 | margin-top: -0.3621em; 712 | display: table; 713 | } 714 | 715 | .rt-r-size-3:not(.rt-DialogContent) { 716 | font-size: 16.7481px; 717 | line-height: 25px; 718 | } 719 | 720 | .rt-r-size-3:not(.rt-DialogContent)::before { 721 | content: ""; 722 | margin-bottom: -0.4169em; 723 | display: table; 724 | } 725 | 726 | .rt-r-size-3:not(.rt-DialogContent)::after { 727 | content: ""; 728 | margin-top: -0.3594em; 729 | display: table; 730 | } 731 | 732 | .rt-r-size-4:not(.rt-DialogContent) { 733 | font-size: 19.5394px; 734 | line-height: 28px; 735 | } 736 | 737 | .rt-r-size-4:not(.rt-DialogContent)::before { 738 | content: ""; 739 | margin-bottom: -0.387em; 740 | display: table; 741 | } 742 | 743 | .rt-r-size-4:not(.rt-DialogContent)::after { 744 | content: ""; 745 | margin-top: -0.3295em; 746 | display: table; 747 | } 748 | 749 | .rt-r-size-5:not(.rt-DialogContent) { 750 | font-size: 25.1221px; 751 | line-height: 30px; 752 | } 753 | 754 | .rt-r-size-5:not(.rt-DialogContent)::before { 755 | content: ""; 756 | margin-bottom: -0.2676em; 757 | display: table; 758 | } 759 | 760 | .rt-r-size-5:not(.rt-DialogContent)::after { 761 | content: ""; 762 | margin-top: -0.2101em; 763 | display: table; 764 | } 765 | 766 | .rt-r-size-6:not(.rt-DialogContent) { 767 | font-size: 33.4962px; 768 | line-height: 36px; 769 | } 770 | 771 | .rt-r-size-6:not(.rt-DialogContent)::before { 772 | content: ""; 773 | margin-bottom: -0.2079em; 774 | display: table; 775 | } 776 | 777 | .rt-r-size-6:not(.rt-DialogContent)::after { 778 | content: ""; 779 | margin-top: -0.1504em; 780 | display: table; 781 | } 782 | 783 | .rt-r-size-7:not(.rt-DialogContent) { 784 | font-size: 50.2442px; 785 | line-height: 44px; 786 | } 787 | 788 | .rt-r-size-7:not(.rt-DialogContent)::before { 789 | content: ""; 790 | margin-bottom: -0.1084em; 791 | display: table; 792 | } 793 | 794 | .rt-r-size-7:not(.rt-DialogContent)::after { 795 | content: ""; 796 | margin-top: -0.0509em; 797 | display: table; 798 | } 799 | 800 | .rt-r-size-8:not(.rt-DialogContent) { 801 | font-size: 66.9923px; 802 | line-height: 52px; 803 | } 804 | 805 | .rt-r-size-8:not(.rt-DialogContent)::before { 806 | content: ""; 807 | margin-bottom: -0.0586em; 808 | display: table; 809 | } 810 | 811 | .rt-r-size-8:not(.rt-DialogContent)::after { 812 | content: ""; 813 | margin-top: -0.0011em; 814 | display: table; 815 | } 816 | 817 | .rt-r-size-9:not(.rt-DialogContent) { 818 | font-size: 89.3231px; 819 | line-height: 64px; 820 | } 821 | 822 | .rt-r-size-9:not(.rt-DialogContent)::before { 823 | content: ""; 824 | margin-bottom: -0.0287em; 825 | display: table; 826 | } 827 | 828 | .rt-r-size-9:not(.rt-DialogContent)::after { 829 | content: ""; 830 | margin-top: 0.0287em; 831 | display: table; 832 | } 833 | } 834 | -------------------------------------------------------------------------------- /example/public/alegreya.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: Alegreya, "Alegreya Fallback", Arial; 6 | --em-font-family: Alegreya, "Alegreya Fallback", Arial; 7 | --quote-font-family: Alegreya, "Alegreya Fallback", Arial; 8 | --heading-font-family: ; 9 | --code-font-family: -apple-system, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 10 | 11 | /* Mobile */ 12 | --font-size-1: 14.1287px; 13 | --line-height-1: 19px; 14 | --font-size-2: 17.2684px; 15 | --line-height-2: 23px; 16 | --font-size-3: 18.8383px; 17 | --line-height-3: 25px; 18 | --font-size-4: 21.978px; 19 | --line-height-4: 28px; 20 | --font-size-5: 28.2575px; 21 | --line-height-5: 30px; 22 | --font-size-6: 37.6766px; 23 | --line-height-6: 36px; 24 | --font-size-7: 56.5149px; 25 | --line-height-7: 44px; 26 | --font-size-8: 75.3532px; 27 | --line-height-8: 52px; 28 | --font-size-9: 100.471px; 29 | --line-height-9: 64px; 30 | 31 | /* Larger devices */ 32 | @media (min-width: 768px) { 33 | --font-size-1: 14.1287px; 34 | --line-height-1: 19px; 35 | --font-size-2: 17.2684px; 36 | --line-height-2: 23px; 37 | --font-size-3: 18.8383px; 38 | --line-height-3: 25px; 39 | --font-size-4: 21.978px; 40 | --line-height-4: 28px; 41 | --font-size-5: 28.2575px; 42 | --line-height-5: 30px; 43 | --font-size-6: 37.6766px; 44 | --line-height-6: 36px; 45 | --font-size-7: 56.5149px; 46 | --line-height-7: 44px; 47 | --font-size-8: 75.3532px; 48 | --line-height-8: 52px; 49 | --font-size-9: 100.471px; 50 | --line-height-9: 64px; 51 | } 52 | } 53 | 54 | /* Otherwise links don't flow inline */ 55 | .rt-Link { 56 | display: inline-block; 57 | } 58 | 59 | /* Default text styles */ 60 | 61 | .rt-Text { 62 | font-size: 17.2684px; 63 | line-height: 23px; 64 | } 65 | 66 | .rt-Text::before { 67 | content: ""; 68 | margin-bottom: -0.3645em; 69 | display: table; 70 | } 71 | 72 | .rt-Text::after { 73 | content: ""; 74 | margin-top: -0.3305em; 75 | display: table; 76 | } 77 | @media (min-width: 768px) { 78 | 79 | .rt-Text { 80 | font-size: 18.8383px; 81 | line-height: 25px; 82 | } 83 | 84 | .rt-Text::before { 85 | content: ""; 86 | margin-bottom: -0.362em; 87 | display: table; 88 | } 89 | 90 | .rt-Text::after { 91 | content: ""; 92 | margin-top: -0.328em; 93 | display: table; 94 | } 95 | } 96 | 97 | /* Em text styles */ 98 | 99 | .rt-Em { 100 | font-size: 17.2684px; 101 | line-height: 23px; 102 | } 103 | 104 | .rt-Em::before { 105 | content: ""; 106 | margin-bottom: -0.3645em; 107 | display: table; 108 | } 109 | 110 | .rt-Em::after { 111 | content: ""; 112 | margin-top: -0.3305em; 113 | display: table; 114 | } 115 | @media (min-width: 768px) { 116 | 117 | .rt-Em { 118 | font-size: 18.8383px; 119 | line-height: 25px; 120 | } 121 | 122 | .rt-Em::before { 123 | content: ""; 124 | margin-bottom: -0.362em; 125 | display: table; 126 | } 127 | 128 | .rt-Em::after { 129 | content: ""; 130 | margin-top: -0.328em; 131 | display: table; 132 | } 133 | } 134 | 135 | /* Quote text styles */ 136 | 137 | .rt-Quote { 138 | font-size: 17.2684px; 139 | line-height: 23px; 140 | } 141 | 142 | .rt-Quote::before { 143 | content: ""; 144 | margin-bottom: -0.3645em; 145 | display: table; 146 | } 147 | 148 | .rt-Quote::after { 149 | content: ""; 150 | margin-top: -0.3305em; 151 | display: table; 152 | } 153 | @media (min-width: 768px) { 154 | 155 | .rt-Quote { 156 | font-size: 18.8383px; 157 | line-height: 25px; 158 | } 159 | 160 | .rt-Quote::before { 161 | content: ""; 162 | margin-bottom: -0.362em; 163 | display: table; 164 | } 165 | 166 | .rt-Quote::after { 167 | content: ""; 168 | margin-top: -0.328em; 169 | display: table; 170 | } 171 | } 172 | 173 | /* Code text styles */ 174 | 175 | .rt-Code { 176 | font-size: 14.8313px; 177 | line-height: 22.45px; 178 | } 179 | 180 | .rt-Code::before { 181 | content: ""; 182 | margin-bottom: -0.4302em; 183 | display: table; 184 | } 185 | 186 | .rt-Code::after { 187 | content: ""; 188 | margin-top: -0.3789em; 189 | display: table; 190 | } 191 | @media (min-width: 768px) { 192 | 193 | .rt-Code { 194 | font-size: 16.1796px; 195 | line-height: 24.4px; 196 | } 197 | 198 | .rt-Code::before { 199 | content: ""; 200 | margin-bottom: -0.4274em; 201 | display: table; 202 | } 203 | 204 | .rt-Code::after { 205 | content: ""; 206 | margin-top: -0.3761em; 207 | display: table; 208 | } 209 | } 210 | 211 | /* Code size variants */ 212 | 213 | .rt-Code.rt-r-size-1 { 214 | font-size: 12.1347px; 215 | line-height: 18.55px; 216 | } 217 | 218 | .rt-Code.rt-r-size-1::before { 219 | content: ""; 220 | margin-bottom: -0.4377em; 221 | display: table; 222 | } 223 | 224 | .rt-Code.rt-r-size-1::after { 225 | content: ""; 226 | margin-top: -0.3864em; 227 | display: table; 228 | } 229 | 230 | .rt-Code.rt-r-size-2 { 231 | font-size: 14.8313px; 232 | line-height: 22.45px; 233 | } 234 | 235 | .rt-Code.rt-r-size-2::before { 236 | content: ""; 237 | margin-bottom: -0.4302em; 238 | display: table; 239 | } 240 | 241 | .rt-Code.rt-r-size-2::after { 242 | content: ""; 243 | margin-top: -0.3789em; 244 | display: table; 245 | } 246 | 247 | .rt-Code.rt-r-size-3 { 248 | font-size: 16.1796px; 249 | line-height: 24.4px; 250 | } 251 | 252 | .rt-Code.rt-r-size-3::before { 253 | content: ""; 254 | margin-bottom: -0.4274em; 255 | display: table; 256 | } 257 | 258 | .rt-Code.rt-r-size-3::after { 259 | content: ""; 260 | margin-top: -0.3761em; 261 | display: table; 262 | } 263 | 264 | .rt-Code.rt-r-size-4 { 265 | font-size: 18.8762px; 266 | line-height: 27.3px; 267 | } 268 | 269 | .rt-Code.rt-r-size-4::before { 270 | content: ""; 271 | margin-bottom: -0.3965em; 272 | display: table; 273 | } 274 | 275 | .rt-Code.rt-r-size-4::after { 276 | content: ""; 277 | margin-top: -0.3452em; 278 | display: table; 279 | } 280 | 281 | .rt-Code.rt-r-size-5 { 282 | font-size: 24.2694px; 283 | line-height: 29.1px; 284 | } 285 | 286 | .rt-Code.rt-r-size-5::before { 287 | content: ""; 288 | margin-bottom: -0.2729em; 289 | display: table; 290 | } 291 | 292 | .rt-Code.rt-r-size-5::after { 293 | content: ""; 294 | margin-top: -0.2216em; 295 | display: table; 296 | } 297 | 298 | .rt-Code.rt-r-size-6 { 299 | font-size: 32.3593px; 300 | line-height: 34.8px; 301 | } 302 | 303 | .rt-Code.rt-r-size-6::before { 304 | content: ""; 305 | margin-bottom: -0.2111em; 306 | display: table; 307 | } 308 | 309 | .rt-Code.rt-r-size-6::after { 310 | content: ""; 311 | margin-top: -0.1598em; 312 | display: table; 313 | } 314 | 315 | .rt-Code.rt-r-size-7 { 316 | font-size: 48.5389px; 317 | line-height: 42.2px; 318 | } 319 | 320 | .rt-Code.rt-r-size-7::before { 321 | content: ""; 322 | margin-bottom: -0.108em; 323 | display: table; 324 | } 325 | 326 | .rt-Code.rt-r-size-7::after { 327 | content: ""; 328 | margin-top: -0.0568em; 329 | display: table; 330 | } 331 | 332 | .rt-Code.rt-r-size-8 { 333 | font-size: 64.7185px; 334 | line-height: 49.6px; 335 | } 336 | 337 | .rt-Code.rt-r-size-8::before { 338 | content: ""; 339 | margin-bottom: -0.0565em; 340 | display: table; 341 | } 342 | 343 | .rt-Code.rt-r-size-8::after { 344 | content: ""; 345 | margin-top: -0.0053em; 346 | display: table; 347 | } 348 | 349 | .rt-Code.rt-r-size-9 { 350 | font-size: 86.2913px; 351 | line-height: 60.8px; 352 | } 353 | 354 | .rt-Code.rt-r-size-9::before { 355 | content: ""; 356 | margin-bottom: -0.0256em; 357 | display: table; 358 | } 359 | 360 | .rt-Code.rt-r-size-9::after { 361 | content: ""; 362 | margin-top: 0.0256em; 363 | display: table; 364 | } 365 | @media (min-width: 768px) { 366 | 367 | .rt-Code.rt-r-size-1 { 368 | font-size: 12.7734px; 369 | line-height: 19px; 370 | } 371 | 372 | .rt-Code.rt-r-size-1::before { 373 | content: ""; 374 | margin-bottom: -0.4171em; 375 | display: table; 376 | } 377 | 378 | .rt-Code.rt-r-size-1::after { 379 | content: ""; 380 | margin-top: -0.3658em; 381 | display: table; 382 | } 383 | 384 | .rt-Code.rt-r-size-2 { 385 | font-size: 15.6119px; 386 | line-height: 23px; 387 | } 388 | 389 | .rt-Code.rt-r-size-2::before { 390 | content: ""; 391 | margin-bottom: -0.41em; 392 | display: table; 393 | } 394 | 395 | .rt-Code.rt-r-size-2::after { 396 | content: ""; 397 | margin-top: -0.3587em; 398 | display: table; 399 | } 400 | 401 | .rt-Code.rt-r-size-3 { 402 | font-size: 17.0312px; 403 | line-height: 25px; 404 | } 405 | 406 | .rt-Code.rt-r-size-3::before { 407 | content: ""; 408 | margin-bottom: -0.4073em; 409 | display: table; 410 | } 411 | 412 | .rt-Code.rt-r-size-3::after { 413 | content: ""; 414 | margin-top: -0.356em; 415 | display: table; 416 | } 417 | 418 | .rt-Code.rt-r-size-4 { 419 | font-size: 19.8697px; 420 | line-height: 28px; 421 | } 422 | 423 | .rt-Code.rt-r-size-4::before { 424 | content: ""; 425 | margin-bottom: -0.3779em; 426 | display: table; 427 | } 428 | 429 | .rt-Code.rt-r-size-4::after { 430 | content: ""; 431 | margin-top: -0.3267em; 432 | display: table; 433 | } 434 | 435 | .rt-Code.rt-r-size-5 { 436 | font-size: 25.5468px; 437 | line-height: 30px; 438 | } 439 | 440 | .rt-Code.rt-r-size-5::before { 441 | content: ""; 442 | margin-bottom: -0.2605em; 443 | display: table; 444 | } 445 | 446 | .rt-Code.rt-r-size-5::after { 447 | content: ""; 448 | margin-top: -0.2092em; 449 | display: table; 450 | } 451 | 452 | .rt-Code.rt-r-size-6 { 453 | font-size: 34.0624px; 454 | line-height: 36px; 455 | } 456 | 457 | .rt-Code.rt-r-size-6::before { 458 | content: ""; 459 | margin-bottom: -0.2018em; 460 | display: table; 461 | } 462 | 463 | .rt-Code.rt-r-size-6::after { 464 | content: ""; 465 | margin-top: -0.1505em; 466 | display: table; 467 | } 468 | 469 | .rt-Code.rt-r-size-7 { 470 | font-size: 51.0936px; 471 | line-height: 44px; 472 | } 473 | 474 | .rt-Code.rt-r-size-7::before { 475 | content: ""; 476 | margin-bottom: -0.1039em; 477 | display: table; 478 | } 479 | 480 | .rt-Code.rt-r-size-7::after { 481 | content: ""; 482 | margin-top: -0.0527em; 483 | display: table; 484 | } 485 | 486 | .rt-Code.rt-r-size-8 { 487 | font-size: 68.1247px; 488 | line-height: 52px; 489 | } 490 | 491 | .rt-Code.rt-r-size-8::before { 492 | content: ""; 493 | margin-bottom: -0.055em; 494 | display: table; 495 | } 496 | 497 | .rt-Code.rt-r-size-8::after { 498 | content: ""; 499 | margin-top: -0.0037em; 500 | display: table; 501 | } 502 | 503 | .rt-Code.rt-r-size-9 { 504 | font-size: 90.833px; 505 | line-height: 64px; 506 | } 507 | 508 | .rt-Code.rt-r-size-9::before { 509 | content: ""; 510 | margin-bottom: -0.0256em; 511 | display: table; 512 | } 513 | 514 | .rt-Code.rt-r-size-9::after { 515 | content: ""; 516 | margin-top: 0.0256em; 517 | display: table; 518 | } 519 | } 520 | 521 | .rt-Em, .rt-Quote, .rt-Code { 522 | display: inline-block; 523 | } 524 | 525 | /* Class names for text elements */ 526 | 527 | .rt-r-size-1:not(.rt-DialogContent) { 528 | font-size: 14.1287px; 529 | line-height: 19px; 530 | } 531 | 532 | .rt-r-size-1:not(.rt-DialogContent)::before { 533 | content: ""; 534 | margin-bottom: -0.3709em; 535 | display: table; 536 | } 537 | 538 | .rt-r-size-1:not(.rt-DialogContent)::after { 539 | content: ""; 540 | margin-top: -0.3369em; 541 | display: table; 542 | } 543 | 544 | .rt-r-size-2:not(.rt-DialogContent) { 545 | font-size: 17.2684px; 546 | line-height: 23px; 547 | } 548 | 549 | .rt-r-size-2:not(.rt-DialogContent)::before { 550 | content: ""; 551 | margin-bottom: -0.3645em; 552 | display: table; 553 | } 554 | 555 | .rt-r-size-2:not(.rt-DialogContent)::after { 556 | content: ""; 557 | margin-top: -0.3305em; 558 | display: table; 559 | } 560 | 561 | .rt-r-size-3:not(.rt-DialogContent) { 562 | font-size: 18.8383px; 563 | line-height: 25px; 564 | } 565 | 566 | .rt-r-size-3:not(.rt-DialogContent)::before { 567 | content: ""; 568 | margin-bottom: -0.362em; 569 | display: table; 570 | } 571 | 572 | .rt-r-size-3:not(.rt-DialogContent)::after { 573 | content: ""; 574 | margin-top: -0.328em; 575 | display: table; 576 | } 577 | 578 | .rt-r-size-4:not(.rt-DialogContent) { 579 | font-size: 21.978px; 580 | line-height: 28px; 581 | } 582 | 583 | .rt-r-size-4:not(.rt-DialogContent)::before { 584 | content: ""; 585 | margin-bottom: -0.3355em; 586 | display: table; 587 | } 588 | 589 | .rt-r-size-4:not(.rt-DialogContent)::after { 590 | content: ""; 591 | margin-top: -0.3015em; 592 | display: table; 593 | } 594 | 595 | .rt-r-size-5:not(.rt-DialogContent) { 596 | font-size: 28.2575px; 597 | line-height: 30px; 598 | } 599 | 600 | .rt-r-size-5:not(.rt-DialogContent)::before { 601 | content: ""; 602 | margin-bottom: -0.2293em; 603 | display: table; 604 | } 605 | 606 | .rt-r-size-5:not(.rt-DialogContent)::after { 607 | content: ""; 608 | margin-top: -0.1953em; 609 | display: table; 610 | } 611 | 612 | .rt-r-size-6:not(.rt-DialogContent) { 613 | font-size: 37.6766px; 614 | line-height: 36px; 615 | } 616 | 617 | .rt-r-size-6:not(.rt-DialogContent)::before { 618 | content: ""; 619 | margin-bottom: -0.1763em; 620 | display: table; 621 | } 622 | 623 | .rt-r-size-6:not(.rt-DialogContent)::after { 624 | content: ""; 625 | margin-top: -0.1422em; 626 | display: table; 627 | } 628 | 629 | .rt-r-size-7:not(.rt-DialogContent) { 630 | font-size: 56.5149px; 631 | line-height: 44px; 632 | } 633 | 634 | .rt-r-size-7:not(.rt-DialogContent)::before { 635 | content: ""; 636 | margin-bottom: -0.0878em; 637 | display: table; 638 | } 639 | 640 | .rt-r-size-7:not(.rt-DialogContent)::after { 641 | content: ""; 642 | margin-top: -0.0538em; 643 | display: table; 644 | } 645 | 646 | .rt-r-size-8:not(.rt-DialogContent) { 647 | font-size: 75.3532px; 648 | line-height: 52px; 649 | } 650 | 651 | .rt-r-size-8:not(.rt-DialogContent)::before { 652 | content: ""; 653 | margin-bottom: -0.0435em; 654 | display: table; 655 | } 656 | 657 | .rt-r-size-8:not(.rt-DialogContent)::after { 658 | content: ""; 659 | margin-top: -0.0095em; 660 | display: table; 661 | } 662 | 663 | .rt-r-size-9:not(.rt-DialogContent) { 664 | font-size: 100.471px; 665 | line-height: 64px; 666 | } 667 | 668 | .rt-r-size-9:not(.rt-DialogContent)::before { 669 | content: ""; 670 | margin-bottom: -0.017em; 671 | display: table; 672 | } 673 | 674 | .rt-r-size-9:not(.rt-DialogContent)::after { 675 | content: ""; 676 | margin-top: 0.017em; 677 | display: table; 678 | } 679 | @media (min-width: 768px) { 680 | 681 | .rt-r-size-1:not(.rt-DialogContent) { 682 | font-size: 14.1287px; 683 | line-height: 19px; 684 | } 685 | 686 | .rt-r-size-1:not(.rt-DialogContent)::before { 687 | content: ""; 688 | margin-bottom: -0.3709em; 689 | display: table; 690 | } 691 | 692 | .rt-r-size-1:not(.rt-DialogContent)::after { 693 | content: ""; 694 | margin-top: -0.3369em; 695 | display: table; 696 | } 697 | 698 | .rt-r-size-2:not(.rt-DialogContent) { 699 | font-size: 17.2684px; 700 | line-height: 23px; 701 | } 702 | 703 | .rt-r-size-2:not(.rt-DialogContent)::before { 704 | content: ""; 705 | margin-bottom: -0.3645em; 706 | display: table; 707 | } 708 | 709 | .rt-r-size-2:not(.rt-DialogContent)::after { 710 | content: ""; 711 | margin-top: -0.3305em; 712 | display: table; 713 | } 714 | 715 | .rt-r-size-3:not(.rt-DialogContent) { 716 | font-size: 18.8383px; 717 | line-height: 25px; 718 | } 719 | 720 | .rt-r-size-3:not(.rt-DialogContent)::before { 721 | content: ""; 722 | margin-bottom: -0.362em; 723 | display: table; 724 | } 725 | 726 | .rt-r-size-3:not(.rt-DialogContent)::after { 727 | content: ""; 728 | margin-top: -0.328em; 729 | display: table; 730 | } 731 | 732 | .rt-r-size-4:not(.rt-DialogContent) { 733 | font-size: 21.978px; 734 | line-height: 28px; 735 | } 736 | 737 | .rt-r-size-4:not(.rt-DialogContent)::before { 738 | content: ""; 739 | margin-bottom: -0.3355em; 740 | display: table; 741 | } 742 | 743 | .rt-r-size-4:not(.rt-DialogContent)::after { 744 | content: ""; 745 | margin-top: -0.3015em; 746 | display: table; 747 | } 748 | 749 | .rt-r-size-5:not(.rt-DialogContent) { 750 | font-size: 28.2575px; 751 | line-height: 30px; 752 | } 753 | 754 | .rt-r-size-5:not(.rt-DialogContent)::before { 755 | content: ""; 756 | margin-bottom: -0.2293em; 757 | display: table; 758 | } 759 | 760 | .rt-r-size-5:not(.rt-DialogContent)::after { 761 | content: ""; 762 | margin-top: -0.1953em; 763 | display: table; 764 | } 765 | 766 | .rt-r-size-6:not(.rt-DialogContent) { 767 | font-size: 37.6766px; 768 | line-height: 36px; 769 | } 770 | 771 | .rt-r-size-6:not(.rt-DialogContent)::before { 772 | content: ""; 773 | margin-bottom: -0.1763em; 774 | display: table; 775 | } 776 | 777 | .rt-r-size-6:not(.rt-DialogContent)::after { 778 | content: ""; 779 | margin-top: -0.1422em; 780 | display: table; 781 | } 782 | 783 | .rt-r-size-7:not(.rt-DialogContent) { 784 | font-size: 56.5149px; 785 | line-height: 44px; 786 | } 787 | 788 | .rt-r-size-7:not(.rt-DialogContent)::before { 789 | content: ""; 790 | margin-bottom: -0.0878em; 791 | display: table; 792 | } 793 | 794 | .rt-r-size-7:not(.rt-DialogContent)::after { 795 | content: ""; 796 | margin-top: -0.0538em; 797 | display: table; 798 | } 799 | 800 | .rt-r-size-8:not(.rt-DialogContent) { 801 | font-size: 75.3532px; 802 | line-height: 52px; 803 | } 804 | 805 | .rt-r-size-8:not(.rt-DialogContent)::before { 806 | content: ""; 807 | margin-bottom: -0.0435em; 808 | display: table; 809 | } 810 | 811 | .rt-r-size-8:not(.rt-DialogContent)::after { 812 | content: ""; 813 | margin-top: -0.0095em; 814 | display: table; 815 | } 816 | 817 | .rt-r-size-9:not(.rt-DialogContent) { 818 | font-size: 100.471px; 819 | line-height: 64px; 820 | } 821 | 822 | .rt-r-size-9:not(.rt-DialogContent)::before { 823 | content: ""; 824 | margin-bottom: -0.017em; 825 | display: table; 826 | } 827 | 828 | .rt-r-size-9:not(.rt-DialogContent)::after { 829 | content: ""; 830 | margin-top: 0.017em; 831 | display: table; 832 | } 833 | } 834 | -------------------------------------------------------------------------------- /example/public/montserrat-arvo.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: Arvo, "Arvo Fallback", Arial; 6 | --em-font-family: Arvo, "Arvo Fallback", Arial; 7 | --quote-font-family: Arvo, "Arvo Fallback", Arial; 8 | --heading-font-family: ; 9 | --code-font-family: -apple-system, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 10 | 11 | /* Mobile */ 12 | --font-size-1: 12.1583px; 13 | --line-height-1: 19px; 14 | --font-size-2: 14.8602px; 15 | --line-height-2: 23px; 16 | --font-size-3: 16.2111px; 17 | --line-height-3: 25px; 18 | --font-size-4: 18.9129px; 19 | --line-height-4: 28px; 20 | --font-size-5: 24.3166px; 21 | --line-height-5: 30px; 22 | --font-size-6: 32.4222px; 23 | --line-height-6: 36px; 24 | --font-size-7: 48.6332px; 25 | --line-height-7: 44px; 26 | --font-size-8: 64.8443px; 27 | --line-height-8: 52px; 28 | --font-size-9: 86.4591px; 29 | --line-height-9: 64px; 30 | 31 | /* Larger devices */ 32 | @media (min-width: 768px) { 33 | --font-size-1: 12.1583px; 34 | --line-height-1: 19px; 35 | --font-size-2: 14.8602px; 36 | --line-height-2: 23px; 37 | --font-size-3: 16.2111px; 38 | --line-height-3: 25px; 39 | --font-size-4: 18.9129px; 40 | --line-height-4: 28px; 41 | --font-size-5: 24.3166px; 42 | --line-height-5: 30px; 43 | --font-size-6: 32.4222px; 44 | --line-height-6: 36px; 45 | --font-size-7: 48.6332px; 46 | --line-height-7: 44px; 47 | --font-size-8: 64.8443px; 48 | --line-height-8: 52px; 49 | --font-size-9: 86.4591px; 50 | --line-height-9: 64px; 51 | } 52 | } 53 | 54 | /* Otherwise links don't flow inline */ 55 | .rt-Link { 56 | display: inline-block; 57 | } 58 | 59 | /* Default text styles */ 60 | 61 | .rt-Text { 62 | font-size: 14.8602px; 63 | line-height: 23px; 64 | } 65 | 66 | .rt-Text::before { 67 | content: ""; 68 | margin-bottom: -0.3906em; 69 | display: table; 70 | } 71 | 72 | .rt-Text::after { 73 | content: ""; 74 | margin-top: -0.4169em; 75 | display: table; 76 | } 77 | @media (min-width: 768px) { 78 | 79 | .rt-Text { 80 | font-size: 16.2111px; 81 | line-height: 25px; 82 | } 83 | 84 | .rt-Text::before { 85 | content: ""; 86 | margin-bottom: -0.3878em; 87 | display: table; 88 | } 89 | 90 | .rt-Text::after { 91 | content: ""; 92 | margin-top: -0.4141em; 93 | display: table; 94 | } 95 | } 96 | 97 | /* Em text styles */ 98 | 99 | .rt-Em { 100 | font-size: 14.8602px; 101 | line-height: 23px; 102 | } 103 | 104 | .rt-Em::before { 105 | content: ""; 106 | margin-bottom: -0.3906em; 107 | display: table; 108 | } 109 | 110 | .rt-Em::after { 111 | content: ""; 112 | margin-top: -0.4169em; 113 | display: table; 114 | } 115 | @media (min-width: 768px) { 116 | 117 | .rt-Em { 118 | font-size: 16.2111px; 119 | line-height: 25px; 120 | } 121 | 122 | .rt-Em::before { 123 | content: ""; 124 | margin-bottom: -0.3878em; 125 | display: table; 126 | } 127 | 128 | .rt-Em::after { 129 | content: ""; 130 | margin-top: -0.4141em; 131 | display: table; 132 | } 133 | } 134 | 135 | /* Quote text styles */ 136 | 137 | .rt-Quote { 138 | font-size: 14.8602px; 139 | line-height: 23px; 140 | } 141 | 142 | .rt-Quote::before { 143 | content: ""; 144 | margin-bottom: -0.3906em; 145 | display: table; 146 | } 147 | 148 | .rt-Quote::after { 149 | content: ""; 150 | margin-top: -0.4169em; 151 | display: table; 152 | } 153 | @media (min-width: 768px) { 154 | 155 | .rt-Quote { 156 | font-size: 16.2111px; 157 | line-height: 25px; 158 | } 159 | 160 | .rt-Quote::before { 161 | content: ""; 162 | margin-bottom: -0.3878em; 163 | display: table; 164 | } 165 | 166 | .rt-Quote::after { 167 | content: ""; 168 | margin-top: -0.4141em; 169 | display: table; 170 | } 171 | } 172 | 173 | /* Code text styles */ 174 | 175 | .rt-Code { 176 | font-size: 14.8313px; 177 | line-height: 22.45px; 178 | } 179 | 180 | .rt-Code::before { 181 | content: ""; 182 | margin-bottom: -0.4302em; 183 | display: table; 184 | } 185 | 186 | .rt-Code::after { 187 | content: ""; 188 | margin-top: -0.3789em; 189 | display: table; 190 | } 191 | @media (min-width: 768px) { 192 | 193 | .rt-Code { 194 | font-size: 16.1796px; 195 | line-height: 24.4px; 196 | } 197 | 198 | .rt-Code::before { 199 | content: ""; 200 | margin-bottom: -0.4274em; 201 | display: table; 202 | } 203 | 204 | .rt-Code::after { 205 | content: ""; 206 | margin-top: -0.3761em; 207 | display: table; 208 | } 209 | } 210 | 211 | /* Code size variants */ 212 | 213 | .rt-Code.rt-r-size-1 { 214 | font-size: 12.1347px; 215 | line-height: 18.55px; 216 | } 217 | 218 | .rt-Code.rt-r-size-1::before { 219 | content: ""; 220 | margin-bottom: -0.4377em; 221 | display: table; 222 | } 223 | 224 | .rt-Code.rt-r-size-1::after { 225 | content: ""; 226 | margin-top: -0.3864em; 227 | display: table; 228 | } 229 | 230 | .rt-Code.rt-r-size-2 { 231 | font-size: 14.8313px; 232 | line-height: 22.45px; 233 | } 234 | 235 | .rt-Code.rt-r-size-2::before { 236 | content: ""; 237 | margin-bottom: -0.4302em; 238 | display: table; 239 | } 240 | 241 | .rt-Code.rt-r-size-2::after { 242 | content: ""; 243 | margin-top: -0.3789em; 244 | display: table; 245 | } 246 | 247 | .rt-Code.rt-r-size-3 { 248 | font-size: 16.1796px; 249 | line-height: 24.4px; 250 | } 251 | 252 | .rt-Code.rt-r-size-3::before { 253 | content: ""; 254 | margin-bottom: -0.4274em; 255 | display: table; 256 | } 257 | 258 | .rt-Code.rt-r-size-3::after { 259 | content: ""; 260 | margin-top: -0.3761em; 261 | display: table; 262 | } 263 | 264 | .rt-Code.rt-r-size-4 { 265 | font-size: 18.8762px; 266 | line-height: 27.3px; 267 | } 268 | 269 | .rt-Code.rt-r-size-4::before { 270 | content: ""; 271 | margin-bottom: -0.3965em; 272 | display: table; 273 | } 274 | 275 | .rt-Code.rt-r-size-4::after { 276 | content: ""; 277 | margin-top: -0.3452em; 278 | display: table; 279 | } 280 | 281 | .rt-Code.rt-r-size-5 { 282 | font-size: 24.2694px; 283 | line-height: 29.1px; 284 | } 285 | 286 | .rt-Code.rt-r-size-5::before { 287 | content: ""; 288 | margin-bottom: -0.2729em; 289 | display: table; 290 | } 291 | 292 | .rt-Code.rt-r-size-5::after { 293 | content: ""; 294 | margin-top: -0.2216em; 295 | display: table; 296 | } 297 | 298 | .rt-Code.rt-r-size-6 { 299 | font-size: 32.3593px; 300 | line-height: 34.8px; 301 | } 302 | 303 | .rt-Code.rt-r-size-6::before { 304 | content: ""; 305 | margin-bottom: -0.2111em; 306 | display: table; 307 | } 308 | 309 | .rt-Code.rt-r-size-6::after { 310 | content: ""; 311 | margin-top: -0.1598em; 312 | display: table; 313 | } 314 | 315 | .rt-Code.rt-r-size-7 { 316 | font-size: 48.5389px; 317 | line-height: 42.2px; 318 | } 319 | 320 | .rt-Code.rt-r-size-7::before { 321 | content: ""; 322 | margin-bottom: -0.108em; 323 | display: table; 324 | } 325 | 326 | .rt-Code.rt-r-size-7::after { 327 | content: ""; 328 | margin-top: -0.0568em; 329 | display: table; 330 | } 331 | 332 | .rt-Code.rt-r-size-8 { 333 | font-size: 64.7185px; 334 | line-height: 49.6px; 335 | } 336 | 337 | .rt-Code.rt-r-size-8::before { 338 | content: ""; 339 | margin-bottom: -0.0565em; 340 | display: table; 341 | } 342 | 343 | .rt-Code.rt-r-size-8::after { 344 | content: ""; 345 | margin-top: -0.0053em; 346 | display: table; 347 | } 348 | 349 | .rt-Code.rt-r-size-9 { 350 | font-size: 86.2913px; 351 | line-height: 60.8px; 352 | } 353 | 354 | .rt-Code.rt-r-size-9::before { 355 | content: ""; 356 | margin-bottom: -0.0256em; 357 | display: table; 358 | } 359 | 360 | .rt-Code.rt-r-size-9::after { 361 | content: ""; 362 | margin-top: 0.0256em; 363 | display: table; 364 | } 365 | @media (min-width: 768px) { 366 | 367 | .rt-Code.rt-r-size-1 { 368 | font-size: 12.7734px; 369 | line-height: 19px; 370 | } 371 | 372 | .rt-Code.rt-r-size-1::before { 373 | content: ""; 374 | margin-bottom: -0.4171em; 375 | display: table; 376 | } 377 | 378 | .rt-Code.rt-r-size-1::after { 379 | content: ""; 380 | margin-top: -0.3658em; 381 | display: table; 382 | } 383 | 384 | .rt-Code.rt-r-size-2 { 385 | font-size: 15.6119px; 386 | line-height: 23px; 387 | } 388 | 389 | .rt-Code.rt-r-size-2::before { 390 | content: ""; 391 | margin-bottom: -0.41em; 392 | display: table; 393 | } 394 | 395 | .rt-Code.rt-r-size-2::after { 396 | content: ""; 397 | margin-top: -0.3587em; 398 | display: table; 399 | } 400 | 401 | .rt-Code.rt-r-size-3 { 402 | font-size: 17.0312px; 403 | line-height: 25px; 404 | } 405 | 406 | .rt-Code.rt-r-size-3::before { 407 | content: ""; 408 | margin-bottom: -0.4073em; 409 | display: table; 410 | } 411 | 412 | .rt-Code.rt-r-size-3::after { 413 | content: ""; 414 | margin-top: -0.356em; 415 | display: table; 416 | } 417 | 418 | .rt-Code.rt-r-size-4 { 419 | font-size: 19.8697px; 420 | line-height: 28px; 421 | } 422 | 423 | .rt-Code.rt-r-size-4::before { 424 | content: ""; 425 | margin-bottom: -0.3779em; 426 | display: table; 427 | } 428 | 429 | .rt-Code.rt-r-size-4::after { 430 | content: ""; 431 | margin-top: -0.3267em; 432 | display: table; 433 | } 434 | 435 | .rt-Code.rt-r-size-5 { 436 | font-size: 25.5468px; 437 | line-height: 30px; 438 | } 439 | 440 | .rt-Code.rt-r-size-5::before { 441 | content: ""; 442 | margin-bottom: -0.2605em; 443 | display: table; 444 | } 445 | 446 | .rt-Code.rt-r-size-5::after { 447 | content: ""; 448 | margin-top: -0.2092em; 449 | display: table; 450 | } 451 | 452 | .rt-Code.rt-r-size-6 { 453 | font-size: 34.0624px; 454 | line-height: 36px; 455 | } 456 | 457 | .rt-Code.rt-r-size-6::before { 458 | content: ""; 459 | margin-bottom: -0.2018em; 460 | display: table; 461 | } 462 | 463 | .rt-Code.rt-r-size-6::after { 464 | content: ""; 465 | margin-top: -0.1505em; 466 | display: table; 467 | } 468 | 469 | .rt-Code.rt-r-size-7 { 470 | font-size: 51.0936px; 471 | line-height: 44px; 472 | } 473 | 474 | .rt-Code.rt-r-size-7::before { 475 | content: ""; 476 | margin-bottom: -0.1039em; 477 | display: table; 478 | } 479 | 480 | .rt-Code.rt-r-size-7::after { 481 | content: ""; 482 | margin-top: -0.0527em; 483 | display: table; 484 | } 485 | 486 | .rt-Code.rt-r-size-8 { 487 | font-size: 68.1247px; 488 | line-height: 52px; 489 | } 490 | 491 | .rt-Code.rt-r-size-8::before { 492 | content: ""; 493 | margin-bottom: -0.055em; 494 | display: table; 495 | } 496 | 497 | .rt-Code.rt-r-size-8::after { 498 | content: ""; 499 | margin-top: -0.0037em; 500 | display: table; 501 | } 502 | 503 | .rt-Code.rt-r-size-9 { 504 | font-size: 90.833px; 505 | line-height: 64px; 506 | } 507 | 508 | .rt-Code.rt-r-size-9::before { 509 | content: ""; 510 | margin-bottom: -0.0256em; 511 | display: table; 512 | } 513 | 514 | .rt-Code.rt-r-size-9::after { 515 | content: ""; 516 | margin-top: 0.0256em; 517 | display: table; 518 | } 519 | } 520 | 521 | .rt-Em, .rt-Quote, .rt-Code { 522 | display: inline-block; 523 | } 524 | 525 | /* Class names for text elements */ 526 | 527 | .rt-r-size-1:not(.rt-DialogContent) { 528 | font-size: 12.1583px; 529 | line-height: 19px; 530 | } 531 | 532 | .rt-r-size-1:not(.rt-DialogContent)::before { 533 | content: ""; 534 | margin-bottom: -0.3981em; 535 | display: table; 536 | } 537 | 538 | .rt-r-size-1:not(.rt-DialogContent)::after { 539 | content: ""; 540 | margin-top: -0.4244em; 541 | display: table; 542 | } 543 | 544 | .rt-r-size-2:not(.rt-DialogContent) { 545 | font-size: 14.8602px; 546 | line-height: 23px; 547 | } 548 | 549 | .rt-r-size-2:not(.rt-DialogContent)::before { 550 | content: ""; 551 | margin-bottom: -0.3906em; 552 | display: table; 553 | } 554 | 555 | .rt-r-size-2:not(.rt-DialogContent)::after { 556 | content: ""; 557 | margin-top: -0.4169em; 558 | display: table; 559 | } 560 | 561 | .rt-r-size-3:not(.rt-DialogContent) { 562 | font-size: 16.2111px; 563 | line-height: 25px; 564 | } 565 | 566 | .rt-r-size-3:not(.rt-DialogContent)::before { 567 | content: ""; 568 | margin-bottom: -0.3878em; 569 | display: table; 570 | } 571 | 572 | .rt-r-size-3:not(.rt-DialogContent)::after { 573 | content: ""; 574 | margin-top: -0.4141em; 575 | display: table; 576 | } 577 | 578 | .rt-r-size-4:not(.rt-DialogContent) { 579 | font-size: 18.9129px; 580 | line-height: 28px; 581 | } 582 | 583 | .rt-r-size-4:not(.rt-DialogContent)::before { 584 | content: ""; 585 | margin-bottom: -0.3569em; 586 | display: table; 587 | } 588 | 589 | .rt-r-size-4:not(.rt-DialogContent)::after { 590 | content: ""; 591 | margin-top: -0.3833em; 592 | display: table; 593 | } 594 | 595 | .rt-r-size-5:not(.rt-DialogContent) { 596 | font-size: 24.3166px; 597 | line-height: 30px; 598 | } 599 | 600 | .rt-r-size-5:not(.rt-DialogContent)::before { 601 | content: ""; 602 | margin-bottom: -0.2336em; 603 | display: table; 604 | } 605 | 606 | .rt-r-size-5:not(.rt-DialogContent)::after { 607 | content: ""; 608 | margin-top: -0.2599em; 609 | display: table; 610 | } 611 | 612 | .rt-r-size-6:not(.rt-DialogContent) { 613 | font-size: 32.4222px; 614 | line-height: 36px; 615 | } 616 | 617 | .rt-r-size-6:not(.rt-DialogContent)::before { 618 | content: ""; 619 | margin-bottom: -0.1719em; 620 | display: table; 621 | } 622 | 623 | .rt-r-size-6:not(.rt-DialogContent)::after { 624 | content: ""; 625 | margin-top: -0.1982em; 626 | display: table; 627 | } 628 | 629 | .rt-r-size-7:not(.rt-DialogContent) { 630 | font-size: 48.6332px; 631 | line-height: 44px; 632 | } 633 | 634 | .rt-r-size-7:not(.rt-DialogContent)::before { 635 | content: ""; 636 | margin-bottom: -0.0691em; 637 | display: table; 638 | } 639 | 640 | .rt-r-size-7:not(.rt-DialogContent)::after { 641 | content: ""; 642 | margin-top: -0.0954em; 643 | display: table; 644 | } 645 | 646 | .rt-r-size-8:not(.rt-DialogContent) { 647 | font-size: 64.8443px; 648 | line-height: 52px; 649 | } 650 | 651 | .rt-r-size-8:not(.rt-DialogContent)::before { 652 | content: ""; 653 | margin-bottom: -0.0177em; 654 | display: table; 655 | } 656 | 657 | .rt-r-size-8:not(.rt-DialogContent)::after { 658 | content: ""; 659 | margin-top: -0.044em; 660 | display: table; 661 | } 662 | 663 | .rt-r-size-9:not(.rt-DialogContent) { 664 | font-size: 86.4591px; 665 | line-height: 64px; 666 | } 667 | 668 | .rt-r-size-9:not(.rt-DialogContent)::before { 669 | content: ""; 670 | margin-bottom: 0.0132em; 671 | display: table; 672 | } 673 | 674 | .rt-r-size-9:not(.rt-DialogContent)::after { 675 | content: ""; 676 | margin-top: -0.0132em; 677 | display: table; 678 | } 679 | @media (min-width: 768px) { 680 | 681 | .rt-r-size-1:not(.rt-DialogContent) { 682 | font-size: 12.1583px; 683 | line-height: 19px; 684 | } 685 | 686 | .rt-r-size-1:not(.rt-DialogContent)::before { 687 | content: ""; 688 | margin-bottom: -0.3981em; 689 | display: table; 690 | } 691 | 692 | .rt-r-size-1:not(.rt-DialogContent)::after { 693 | content: ""; 694 | margin-top: -0.4244em; 695 | display: table; 696 | } 697 | 698 | .rt-r-size-2:not(.rt-DialogContent) { 699 | font-size: 14.8602px; 700 | line-height: 23px; 701 | } 702 | 703 | .rt-r-size-2:not(.rt-DialogContent)::before { 704 | content: ""; 705 | margin-bottom: -0.3906em; 706 | display: table; 707 | } 708 | 709 | .rt-r-size-2:not(.rt-DialogContent)::after { 710 | content: ""; 711 | margin-top: -0.4169em; 712 | display: table; 713 | } 714 | 715 | .rt-r-size-3:not(.rt-DialogContent) { 716 | font-size: 16.2111px; 717 | line-height: 25px; 718 | } 719 | 720 | .rt-r-size-3:not(.rt-DialogContent)::before { 721 | content: ""; 722 | margin-bottom: -0.3878em; 723 | display: table; 724 | } 725 | 726 | .rt-r-size-3:not(.rt-DialogContent)::after { 727 | content: ""; 728 | margin-top: -0.4141em; 729 | display: table; 730 | } 731 | 732 | .rt-r-size-4:not(.rt-DialogContent) { 733 | font-size: 18.9129px; 734 | line-height: 28px; 735 | } 736 | 737 | .rt-r-size-4:not(.rt-DialogContent)::before { 738 | content: ""; 739 | margin-bottom: -0.3569em; 740 | display: table; 741 | } 742 | 743 | .rt-r-size-4:not(.rt-DialogContent)::after { 744 | content: ""; 745 | margin-top: -0.3833em; 746 | display: table; 747 | } 748 | 749 | .rt-r-size-5:not(.rt-DialogContent) { 750 | font-size: 24.3166px; 751 | line-height: 30px; 752 | } 753 | 754 | .rt-r-size-5:not(.rt-DialogContent)::before { 755 | content: ""; 756 | margin-bottom: -0.2336em; 757 | display: table; 758 | } 759 | 760 | .rt-r-size-5:not(.rt-DialogContent)::after { 761 | content: ""; 762 | margin-top: -0.2599em; 763 | display: table; 764 | } 765 | 766 | .rt-r-size-6:not(.rt-DialogContent) { 767 | font-size: 32.4222px; 768 | line-height: 36px; 769 | } 770 | 771 | .rt-r-size-6:not(.rt-DialogContent)::before { 772 | content: ""; 773 | margin-bottom: -0.1719em; 774 | display: table; 775 | } 776 | 777 | .rt-r-size-6:not(.rt-DialogContent)::after { 778 | content: ""; 779 | margin-top: -0.1982em; 780 | display: table; 781 | } 782 | 783 | .rt-r-size-7:not(.rt-DialogContent) { 784 | font-size: 48.6332px; 785 | line-height: 44px; 786 | } 787 | 788 | .rt-r-size-7:not(.rt-DialogContent)::before { 789 | content: ""; 790 | margin-bottom: -0.0691em; 791 | display: table; 792 | } 793 | 794 | .rt-r-size-7:not(.rt-DialogContent)::after { 795 | content: ""; 796 | margin-top: -0.0954em; 797 | display: table; 798 | } 799 | 800 | .rt-r-size-8:not(.rt-DialogContent) { 801 | font-size: 64.8443px; 802 | line-height: 52px; 803 | } 804 | 805 | .rt-r-size-8:not(.rt-DialogContent)::before { 806 | content: ""; 807 | margin-bottom: -0.0177em; 808 | display: table; 809 | } 810 | 811 | .rt-r-size-8:not(.rt-DialogContent)::after { 812 | content: ""; 813 | margin-top: -0.044em; 814 | display: table; 815 | } 816 | 817 | .rt-r-size-9:not(.rt-DialogContent) { 818 | font-size: 86.4591px; 819 | line-height: 64px; 820 | } 821 | 822 | .rt-r-size-9:not(.rt-DialogContent)::before { 823 | content: ""; 824 | margin-bottom: 0.0132em; 825 | display: table; 826 | } 827 | 828 | .rt-r-size-9:not(.rt-DialogContent)::after { 829 | content: ""; 830 | margin-top: -0.0132em; 831 | display: table; 832 | } 833 | } 834 | -------------------------------------------------------------------------------- /example/public/caveat-brush-typography.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: "Caveat Brush", "Caveat Brush Fallback", Arial; 6 | --em-font-family: "Caveat Brush", "Caveat Brush Fallback", Arial; 7 | --quote-font-family: "Caveat Brush", "Caveat Brush Fallback", Arial; 8 | --heading-font-family: ; 9 | --code-font-family: -apple-system, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 10 | 11 | /* Mobile */ 12 | --font-size-1: 13.6364px; 13 | --line-height-1: 19px; 14 | --font-size-2: 16.6667px; 15 | --line-height-2: 23px; 16 | --font-size-3: 18.1818px; 17 | --line-height-3: 25px; 18 | --font-size-4: 21.2121px; 19 | --line-height-4: 28px; 20 | --font-size-5: 27.2727px; 21 | --line-height-5: 30px; 22 | --font-size-6: 36.3636px; 23 | --line-height-6: 36px; 24 | --font-size-7: 54.5455px; 25 | --line-height-7: 44px; 26 | --font-size-8: 72.7273px; 27 | --line-height-8: 52px; 28 | --font-size-9: 96.9697px; 29 | --line-height-9: 64px; 30 | 31 | /* Larger devices */ 32 | @media (min-width: 768px) { 33 | --font-size-1: 13.6364px; 34 | --line-height-1: 19px; 35 | --font-size-2: 16.6667px; 36 | --line-height-2: 23px; 37 | --font-size-3: 18.1818px; 38 | --line-height-3: 25px; 39 | --font-size-4: 21.2121px; 40 | --line-height-4: 28px; 41 | --font-size-5: 27.2727px; 42 | --line-height-5: 30px; 43 | --font-size-6: 36.3636px; 44 | --line-height-6: 36px; 45 | --font-size-7: 54.5455px; 46 | --line-height-7: 44px; 47 | --font-size-8: 72.7273px; 48 | --line-height-8: 52px; 49 | --font-size-9: 96.9697px; 50 | --line-height-9: 64px; 51 | } 52 | } 53 | 54 | /* Otherwise links don't flow inline */ 55 | .rt-Link { 56 | display: inline-block; 57 | } 58 | 59 | /* Default text styles */ 60 | 61 | .rt-Text { 62 | font-size: 16.6667px; 63 | line-height: 23px; 64 | } 65 | 66 | .rt-Text::before { 67 | content: ""; 68 | margin-bottom: -0.36em; 69 | display: table; 70 | } 71 | 72 | .rt-Text::after { 73 | content: ""; 74 | margin-top: -0.36em; 75 | display: table; 76 | } 77 | @media (min-width: 768px) { 78 | 79 | .rt-Text { 80 | font-size: 18.1818px; 81 | line-height: 25px; 82 | } 83 | 84 | .rt-Text::before { 85 | content: ""; 86 | margin-bottom: -0.3575em; 87 | display: table; 88 | } 89 | 90 | .rt-Text::after { 91 | content: ""; 92 | margin-top: -0.3575em; 93 | display: table; 94 | } 95 | } 96 | 97 | /* Em text styles */ 98 | 99 | .rt-Em { 100 | font-size: 16.6667px; 101 | line-height: 23px; 102 | } 103 | 104 | .rt-Em::before { 105 | content: ""; 106 | margin-bottom: -0.36em; 107 | display: table; 108 | } 109 | 110 | .rt-Em::after { 111 | content: ""; 112 | margin-top: -0.36em; 113 | display: table; 114 | } 115 | @media (min-width: 768px) { 116 | 117 | .rt-Em { 118 | font-size: 18.1818px; 119 | line-height: 25px; 120 | } 121 | 122 | .rt-Em::before { 123 | content: ""; 124 | margin-bottom: -0.3575em; 125 | display: table; 126 | } 127 | 128 | .rt-Em::after { 129 | content: ""; 130 | margin-top: -0.3575em; 131 | display: table; 132 | } 133 | } 134 | 135 | /* Quote text styles */ 136 | 137 | .rt-Quote { 138 | font-size: 16.6667px; 139 | line-height: 23px; 140 | } 141 | 142 | .rt-Quote::before { 143 | content: ""; 144 | margin-bottom: -0.36em; 145 | display: table; 146 | } 147 | 148 | .rt-Quote::after { 149 | content: ""; 150 | margin-top: -0.36em; 151 | display: table; 152 | } 153 | @media (min-width: 768px) { 154 | 155 | .rt-Quote { 156 | font-size: 18.1818px; 157 | line-height: 25px; 158 | } 159 | 160 | .rt-Quote::before { 161 | content: ""; 162 | margin-bottom: -0.3575em; 163 | display: table; 164 | } 165 | 166 | .rt-Quote::after { 167 | content: ""; 168 | margin-top: -0.3575em; 169 | display: table; 170 | } 171 | } 172 | 173 | /* Code text styles */ 174 | 175 | .rt-Code { 176 | font-size: 14.8313px; 177 | line-height: 22.45px; 178 | } 179 | 180 | .rt-Code::before { 181 | content: ""; 182 | margin-bottom: -0.4302em; 183 | display: table; 184 | } 185 | 186 | .rt-Code::after { 187 | content: ""; 188 | margin-top: -0.3789em; 189 | display: table; 190 | } 191 | @media (min-width: 768px) { 192 | 193 | .rt-Code { 194 | font-size: 16.1796px; 195 | line-height: 24.4px; 196 | } 197 | 198 | .rt-Code::before { 199 | content: ""; 200 | margin-bottom: -0.4274em; 201 | display: table; 202 | } 203 | 204 | .rt-Code::after { 205 | content: ""; 206 | margin-top: -0.3761em; 207 | display: table; 208 | } 209 | } 210 | 211 | /* Code size variants */ 212 | 213 | .rt-Code.rt-r-size-1 { 214 | font-size: 12.1347px; 215 | line-height: 18.55px; 216 | } 217 | 218 | .rt-Code.rt-r-size-1::before { 219 | content: ""; 220 | margin-bottom: -0.4377em; 221 | display: table; 222 | } 223 | 224 | .rt-Code.rt-r-size-1::after { 225 | content: ""; 226 | margin-top: -0.3864em; 227 | display: table; 228 | } 229 | 230 | .rt-Code.rt-r-size-2 { 231 | font-size: 14.8313px; 232 | line-height: 22.45px; 233 | } 234 | 235 | .rt-Code.rt-r-size-2::before { 236 | content: ""; 237 | margin-bottom: -0.4302em; 238 | display: table; 239 | } 240 | 241 | .rt-Code.rt-r-size-2::after { 242 | content: ""; 243 | margin-top: -0.3789em; 244 | display: table; 245 | } 246 | 247 | .rt-Code.rt-r-size-3 { 248 | font-size: 16.1796px; 249 | line-height: 24.4px; 250 | } 251 | 252 | .rt-Code.rt-r-size-3::before { 253 | content: ""; 254 | margin-bottom: -0.4274em; 255 | display: table; 256 | } 257 | 258 | .rt-Code.rt-r-size-3::after { 259 | content: ""; 260 | margin-top: -0.3761em; 261 | display: table; 262 | } 263 | 264 | .rt-Code.rt-r-size-4 { 265 | font-size: 18.8762px; 266 | line-height: 27.3px; 267 | } 268 | 269 | .rt-Code.rt-r-size-4::before { 270 | content: ""; 271 | margin-bottom: -0.3965em; 272 | display: table; 273 | } 274 | 275 | .rt-Code.rt-r-size-4::after { 276 | content: ""; 277 | margin-top: -0.3452em; 278 | display: table; 279 | } 280 | 281 | .rt-Code.rt-r-size-5 { 282 | font-size: 24.2694px; 283 | line-height: 29.1px; 284 | } 285 | 286 | .rt-Code.rt-r-size-5::before { 287 | content: ""; 288 | margin-bottom: -0.2729em; 289 | display: table; 290 | } 291 | 292 | .rt-Code.rt-r-size-5::after { 293 | content: ""; 294 | margin-top: -0.2216em; 295 | display: table; 296 | } 297 | 298 | .rt-Code.rt-r-size-6 { 299 | font-size: 32.3593px; 300 | line-height: 34.8px; 301 | } 302 | 303 | .rt-Code.rt-r-size-6::before { 304 | content: ""; 305 | margin-bottom: -0.2111em; 306 | display: table; 307 | } 308 | 309 | .rt-Code.rt-r-size-6::after { 310 | content: ""; 311 | margin-top: -0.1598em; 312 | display: table; 313 | } 314 | 315 | .rt-Code.rt-r-size-7 { 316 | font-size: 48.5389px; 317 | line-height: 42.2px; 318 | } 319 | 320 | .rt-Code.rt-r-size-7::before { 321 | content: ""; 322 | margin-bottom: -0.108em; 323 | display: table; 324 | } 325 | 326 | .rt-Code.rt-r-size-7::after { 327 | content: ""; 328 | margin-top: -0.0568em; 329 | display: table; 330 | } 331 | 332 | .rt-Code.rt-r-size-8 { 333 | font-size: 64.7185px; 334 | line-height: 49.6px; 335 | } 336 | 337 | .rt-Code.rt-r-size-8::before { 338 | content: ""; 339 | margin-bottom: -0.0565em; 340 | display: table; 341 | } 342 | 343 | .rt-Code.rt-r-size-8::after { 344 | content: ""; 345 | margin-top: -0.0053em; 346 | display: table; 347 | } 348 | 349 | .rt-Code.rt-r-size-9 { 350 | font-size: 86.2913px; 351 | line-height: 60.8px; 352 | } 353 | 354 | .rt-Code.rt-r-size-9::before { 355 | content: ""; 356 | margin-bottom: -0.0256em; 357 | display: table; 358 | } 359 | 360 | .rt-Code.rt-r-size-9::after { 361 | content: ""; 362 | margin-top: 0.0256em; 363 | display: table; 364 | } 365 | @media (min-width: 768px) { 366 | 367 | .rt-Code.rt-r-size-1 { 368 | font-size: 12.7734px; 369 | line-height: 19px; 370 | } 371 | 372 | .rt-Code.rt-r-size-1::before { 373 | content: ""; 374 | margin-bottom: -0.4171em; 375 | display: table; 376 | } 377 | 378 | .rt-Code.rt-r-size-1::after { 379 | content: ""; 380 | margin-top: -0.3658em; 381 | display: table; 382 | } 383 | 384 | .rt-Code.rt-r-size-2 { 385 | font-size: 15.6119px; 386 | line-height: 23px; 387 | } 388 | 389 | .rt-Code.rt-r-size-2::before { 390 | content: ""; 391 | margin-bottom: -0.41em; 392 | display: table; 393 | } 394 | 395 | .rt-Code.rt-r-size-2::after { 396 | content: ""; 397 | margin-top: -0.3587em; 398 | display: table; 399 | } 400 | 401 | .rt-Code.rt-r-size-3 { 402 | font-size: 17.0312px; 403 | line-height: 25px; 404 | } 405 | 406 | .rt-Code.rt-r-size-3::before { 407 | content: ""; 408 | margin-bottom: -0.4073em; 409 | display: table; 410 | } 411 | 412 | .rt-Code.rt-r-size-3::after { 413 | content: ""; 414 | margin-top: -0.356em; 415 | display: table; 416 | } 417 | 418 | .rt-Code.rt-r-size-4 { 419 | font-size: 19.8697px; 420 | line-height: 28px; 421 | } 422 | 423 | .rt-Code.rt-r-size-4::before { 424 | content: ""; 425 | margin-bottom: -0.3779em; 426 | display: table; 427 | } 428 | 429 | .rt-Code.rt-r-size-4::after { 430 | content: ""; 431 | margin-top: -0.3267em; 432 | display: table; 433 | } 434 | 435 | .rt-Code.rt-r-size-5 { 436 | font-size: 25.5468px; 437 | line-height: 30px; 438 | } 439 | 440 | .rt-Code.rt-r-size-5::before { 441 | content: ""; 442 | margin-bottom: -0.2605em; 443 | display: table; 444 | } 445 | 446 | .rt-Code.rt-r-size-5::after { 447 | content: ""; 448 | margin-top: -0.2092em; 449 | display: table; 450 | } 451 | 452 | .rt-Code.rt-r-size-6 { 453 | font-size: 34.0624px; 454 | line-height: 36px; 455 | } 456 | 457 | .rt-Code.rt-r-size-6::before { 458 | content: ""; 459 | margin-bottom: -0.2018em; 460 | display: table; 461 | } 462 | 463 | .rt-Code.rt-r-size-6::after { 464 | content: ""; 465 | margin-top: -0.1505em; 466 | display: table; 467 | } 468 | 469 | .rt-Code.rt-r-size-7 { 470 | font-size: 51.0936px; 471 | line-height: 44px; 472 | } 473 | 474 | .rt-Code.rt-r-size-7::before { 475 | content: ""; 476 | margin-bottom: -0.1039em; 477 | display: table; 478 | } 479 | 480 | .rt-Code.rt-r-size-7::after { 481 | content: ""; 482 | margin-top: -0.0527em; 483 | display: table; 484 | } 485 | 486 | .rt-Code.rt-r-size-8 { 487 | font-size: 68.1247px; 488 | line-height: 52px; 489 | } 490 | 491 | .rt-Code.rt-r-size-8::before { 492 | content: ""; 493 | margin-bottom: -0.055em; 494 | display: table; 495 | } 496 | 497 | .rt-Code.rt-r-size-8::after { 498 | content: ""; 499 | margin-top: -0.0037em; 500 | display: table; 501 | } 502 | 503 | .rt-Code.rt-r-size-9 { 504 | font-size: 90.833px; 505 | line-height: 64px; 506 | } 507 | 508 | .rt-Code.rt-r-size-9::before { 509 | content: ""; 510 | margin-bottom: -0.0256em; 511 | display: table; 512 | } 513 | 514 | .rt-Code.rt-r-size-9::after { 515 | content: ""; 516 | margin-top: 0.0256em; 517 | display: table; 518 | } 519 | } 520 | 521 | .rt-Em, .rt-Quote, .rt-Code { 522 | display: inline-block; 523 | } 524 | 525 | /* Class names for text elements */ 526 | 527 | .rt-r-size-1:not(.rt-DialogContent) { 528 | font-size: 13.6364px; 529 | line-height: 19px; 530 | } 531 | 532 | .rt-r-size-1:not(.rt-DialogContent)::before { 533 | content: ""; 534 | margin-bottom: -0.3667em; 535 | display: table; 536 | } 537 | 538 | .rt-r-size-1:not(.rt-DialogContent)::after { 539 | content: ""; 540 | margin-top: -0.3667em; 541 | display: table; 542 | } 543 | 544 | .rt-r-size-2:not(.rt-DialogContent) { 545 | font-size: 16.6667px; 546 | line-height: 23px; 547 | } 548 | 549 | .rt-r-size-2:not(.rt-DialogContent)::before { 550 | content: ""; 551 | margin-bottom: -0.36em; 552 | display: table; 553 | } 554 | 555 | .rt-r-size-2:not(.rt-DialogContent)::after { 556 | content: ""; 557 | margin-top: -0.36em; 558 | display: table; 559 | } 560 | 561 | .rt-r-size-3:not(.rt-DialogContent) { 562 | font-size: 18.1818px; 563 | line-height: 25px; 564 | } 565 | 566 | .rt-r-size-3:not(.rt-DialogContent)::before { 567 | content: ""; 568 | margin-bottom: -0.3575em; 569 | display: table; 570 | } 571 | 572 | .rt-r-size-3:not(.rt-DialogContent)::after { 573 | content: ""; 574 | margin-top: -0.3575em; 575 | display: table; 576 | } 577 | 578 | .rt-r-size-4:not(.rt-DialogContent) { 579 | font-size: 21.2121px; 580 | line-height: 28px; 581 | } 582 | 583 | .rt-r-size-4:not(.rt-DialogContent)::before { 584 | content: ""; 585 | margin-bottom: -0.33em; 586 | display: table; 587 | } 588 | 589 | .rt-r-size-4:not(.rt-DialogContent)::after { 590 | content: ""; 591 | margin-top: -0.33em; 592 | display: table; 593 | } 594 | 595 | .rt-r-size-5:not(.rt-DialogContent) { 596 | font-size: 27.2727px; 597 | line-height: 30px; 598 | } 599 | 600 | .rt-r-size-5:not(.rt-DialogContent)::before { 601 | content: ""; 602 | margin-bottom: -0.22em; 603 | display: table; 604 | } 605 | 606 | .rt-r-size-5:not(.rt-DialogContent)::after { 607 | content: ""; 608 | margin-top: -0.22em; 609 | display: table; 610 | } 611 | 612 | .rt-r-size-6:not(.rt-DialogContent) { 613 | font-size: 36.3636px; 614 | line-height: 36px; 615 | } 616 | 617 | .rt-r-size-6:not(.rt-DialogContent)::before { 618 | content: ""; 619 | margin-bottom: -0.165em; 620 | display: table; 621 | } 622 | 623 | .rt-r-size-6:not(.rt-DialogContent)::after { 624 | content: ""; 625 | margin-top: -0.165em; 626 | display: table; 627 | } 628 | 629 | .rt-r-size-7:not(.rt-DialogContent) { 630 | font-size: 54.5455px; 631 | line-height: 44px; 632 | } 633 | 634 | .rt-r-size-7:not(.rt-DialogContent)::before { 635 | content: ""; 636 | margin-bottom: -0.0733em; 637 | display: table; 638 | } 639 | 640 | .rt-r-size-7:not(.rt-DialogContent)::after { 641 | content: ""; 642 | margin-top: -0.0733em; 643 | display: table; 644 | } 645 | 646 | .rt-r-size-8:not(.rt-DialogContent) { 647 | font-size: 72.7273px; 648 | line-height: 52px; 649 | } 650 | 651 | .rt-r-size-8:not(.rt-DialogContent)::before { 652 | content: ""; 653 | margin-bottom: -0.0275em; 654 | display: table; 655 | } 656 | 657 | .rt-r-size-8:not(.rt-DialogContent)::after { 658 | content: ""; 659 | margin-top: -0.0275em; 660 | display: table; 661 | } 662 | 663 | .rt-r-size-9:not(.rt-DialogContent) { 664 | font-size: 96.9697px; 665 | line-height: 64px; 666 | } 667 | 668 | .rt-r-size-9:not(.rt-DialogContent)::before { 669 | content: ""; 670 | margin-bottom: 0em; 671 | display: table; 672 | } 673 | 674 | .rt-r-size-9:not(.rt-DialogContent)::after { 675 | content: ""; 676 | margin-top: 0em; 677 | display: table; 678 | } 679 | @media (min-width: 768px) { 680 | 681 | .rt-r-size-1:not(.rt-DialogContent) { 682 | font-size: 13.6364px; 683 | line-height: 19px; 684 | } 685 | 686 | .rt-r-size-1:not(.rt-DialogContent)::before { 687 | content: ""; 688 | margin-bottom: -0.3667em; 689 | display: table; 690 | } 691 | 692 | .rt-r-size-1:not(.rt-DialogContent)::after { 693 | content: ""; 694 | margin-top: -0.3667em; 695 | display: table; 696 | } 697 | 698 | .rt-r-size-2:not(.rt-DialogContent) { 699 | font-size: 16.6667px; 700 | line-height: 23px; 701 | } 702 | 703 | .rt-r-size-2:not(.rt-DialogContent)::before { 704 | content: ""; 705 | margin-bottom: -0.36em; 706 | display: table; 707 | } 708 | 709 | .rt-r-size-2:not(.rt-DialogContent)::after { 710 | content: ""; 711 | margin-top: -0.36em; 712 | display: table; 713 | } 714 | 715 | .rt-r-size-3:not(.rt-DialogContent) { 716 | font-size: 18.1818px; 717 | line-height: 25px; 718 | } 719 | 720 | .rt-r-size-3:not(.rt-DialogContent)::before { 721 | content: ""; 722 | margin-bottom: -0.3575em; 723 | display: table; 724 | } 725 | 726 | .rt-r-size-3:not(.rt-DialogContent)::after { 727 | content: ""; 728 | margin-top: -0.3575em; 729 | display: table; 730 | } 731 | 732 | .rt-r-size-4:not(.rt-DialogContent) { 733 | font-size: 21.2121px; 734 | line-height: 28px; 735 | } 736 | 737 | .rt-r-size-4:not(.rt-DialogContent)::before { 738 | content: ""; 739 | margin-bottom: -0.33em; 740 | display: table; 741 | } 742 | 743 | .rt-r-size-4:not(.rt-DialogContent)::after { 744 | content: ""; 745 | margin-top: -0.33em; 746 | display: table; 747 | } 748 | 749 | .rt-r-size-5:not(.rt-DialogContent) { 750 | font-size: 27.2727px; 751 | line-height: 30px; 752 | } 753 | 754 | .rt-r-size-5:not(.rt-DialogContent)::before { 755 | content: ""; 756 | margin-bottom: -0.22em; 757 | display: table; 758 | } 759 | 760 | .rt-r-size-5:not(.rt-DialogContent)::after { 761 | content: ""; 762 | margin-top: -0.22em; 763 | display: table; 764 | } 765 | 766 | .rt-r-size-6:not(.rt-DialogContent) { 767 | font-size: 36.3636px; 768 | line-height: 36px; 769 | } 770 | 771 | .rt-r-size-6:not(.rt-DialogContent)::before { 772 | content: ""; 773 | margin-bottom: -0.165em; 774 | display: table; 775 | } 776 | 777 | .rt-r-size-6:not(.rt-DialogContent)::after { 778 | content: ""; 779 | margin-top: -0.165em; 780 | display: table; 781 | } 782 | 783 | .rt-r-size-7:not(.rt-DialogContent) { 784 | font-size: 54.5455px; 785 | line-height: 44px; 786 | } 787 | 788 | .rt-r-size-7:not(.rt-DialogContent)::before { 789 | content: ""; 790 | margin-bottom: -0.0733em; 791 | display: table; 792 | } 793 | 794 | .rt-r-size-7:not(.rt-DialogContent)::after { 795 | content: ""; 796 | margin-top: -0.0733em; 797 | display: table; 798 | } 799 | 800 | .rt-r-size-8:not(.rt-DialogContent) { 801 | font-size: 72.7273px; 802 | line-height: 52px; 803 | } 804 | 805 | .rt-r-size-8:not(.rt-DialogContent)::before { 806 | content: ""; 807 | margin-bottom: -0.0275em; 808 | display: table; 809 | } 810 | 811 | .rt-r-size-8:not(.rt-DialogContent)::after { 812 | content: ""; 813 | margin-top: -0.0275em; 814 | display: table; 815 | } 816 | 817 | .rt-r-size-9:not(.rt-DialogContent) { 818 | font-size: 96.9697px; 819 | line-height: 64px; 820 | } 821 | 822 | .rt-r-size-9:not(.rt-DialogContent)::before { 823 | content: ""; 824 | margin-bottom: 0em; 825 | display: table; 826 | } 827 | 828 | .rt-r-size-9:not(.rt-DialogContent)::after { 829 | content: ""; 830 | margin-top: 0em; 831 | display: table; 832 | } 833 | } 834 | -------------------------------------------------------------------------------- /example/public/josefin-typography.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: "Josefin Sans", "Josefin Sans Fallback", Arial; 6 | --em-font-family: "Josefin Sans", "Josefin Sans Fallback", Arial; 7 | --quote-font-family: "Josefin Sans", "Josefin Sans Fallback", Arial; 8 | --heading-font-family: ; 9 | --code-font-family: -apple-system, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 10 | 11 | /* Mobile */ 12 | --font-size-1: 12.8205px; 13 | --line-height-1: 19px; 14 | --font-size-2: 15.6695px; 15 | --line-height-2: 23px; 16 | --font-size-3: 17.094px; 17 | --line-height-3: 25px; 18 | --font-size-4: 19.943px; 19 | --line-height-4: 28px; 20 | --font-size-5: 25.641px; 21 | --line-height-5: 30px; 22 | --font-size-6: 34.188px; 23 | --line-height-6: 36px; 24 | --font-size-7: 51.2821px; 25 | --line-height-7: 44px; 26 | --font-size-8: 68.3761px; 27 | --line-height-8: 52px; 28 | --font-size-9: 91.1681px; 29 | --line-height-9: 64px; 30 | 31 | /* Larger devices */ 32 | @media (min-width: 768px) { 33 | --font-size-1: 12.8205px; 34 | --line-height-1: 19px; 35 | --font-size-2: 15.6695px; 36 | --line-height-2: 23px; 37 | --font-size-3: 17.094px; 38 | --line-height-3: 25px; 39 | --font-size-4: 19.943px; 40 | --line-height-4: 28px; 41 | --font-size-5: 25.641px; 42 | --line-height-5: 30px; 43 | --font-size-6: 34.188px; 44 | --line-height-6: 36px; 45 | --font-size-7: 51.2821px; 46 | --line-height-7: 44px; 47 | --font-size-8: 68.3761px; 48 | --line-height-8: 52px; 49 | --font-size-9: 91.1681px; 50 | --line-height-9: 64px; 51 | } 52 | } 53 | 54 | /* Otherwise links don't flow inline */ 55 | .rt-Link { 56 | display: inline-block; 57 | } 58 | 59 | /* Default text styles */ 60 | 61 | .rt-Text { 62 | font-size: 15.6695px; 63 | line-height: 23px; 64 | } 65 | 66 | .rt-Text::before { 67 | content: ""; 68 | margin-bottom: -0.2819em; 69 | display: table; 70 | } 71 | 72 | .rt-Text::after { 73 | content: ""; 74 | margin-top: -0.4839em; 75 | display: table; 76 | } 77 | @media (min-width: 768px) { 78 | 79 | .rt-Text { 80 | font-size: 17.094px; 81 | line-height: 25px; 82 | } 83 | 84 | .rt-Text::before { 85 | content: ""; 86 | margin-bottom: -0.2793em; 87 | display: table; 88 | } 89 | 90 | .rt-Text::after { 91 | content: ""; 92 | margin-top: -0.4813em; 93 | display: table; 94 | } 95 | } 96 | 97 | /* Em text styles */ 98 | 99 | .rt-Em { 100 | font-size: 15.6695px; 101 | line-height: 23px; 102 | } 103 | 104 | .rt-Em::before { 105 | content: ""; 106 | margin-bottom: -0.2819em; 107 | display: table; 108 | } 109 | 110 | .rt-Em::after { 111 | content: ""; 112 | margin-top: -0.4839em; 113 | display: table; 114 | } 115 | @media (min-width: 768px) { 116 | 117 | .rt-Em { 118 | font-size: 17.094px; 119 | line-height: 25px; 120 | } 121 | 122 | .rt-Em::before { 123 | content: ""; 124 | margin-bottom: -0.2793em; 125 | display: table; 126 | } 127 | 128 | .rt-Em::after { 129 | content: ""; 130 | margin-top: -0.4813em; 131 | display: table; 132 | } 133 | } 134 | 135 | /* Quote text styles */ 136 | 137 | .rt-Quote { 138 | font-size: 15.6695px; 139 | line-height: 23px; 140 | } 141 | 142 | .rt-Quote::before { 143 | content: ""; 144 | margin-bottom: -0.2819em; 145 | display: table; 146 | } 147 | 148 | .rt-Quote::after { 149 | content: ""; 150 | margin-top: -0.4839em; 151 | display: table; 152 | } 153 | @media (min-width: 768px) { 154 | 155 | .rt-Quote { 156 | font-size: 17.094px; 157 | line-height: 25px; 158 | } 159 | 160 | .rt-Quote::before { 161 | content: ""; 162 | margin-bottom: -0.2793em; 163 | display: table; 164 | } 165 | 166 | .rt-Quote::after { 167 | content: ""; 168 | margin-top: -0.4813em; 169 | display: table; 170 | } 171 | } 172 | 173 | /* Code text styles */ 174 | 175 | .rt-Code { 176 | font-size: 14.8313px; 177 | line-height: 22.45px; 178 | } 179 | 180 | .rt-Code::before { 181 | content: ""; 182 | margin-bottom: -0.4302em; 183 | display: table; 184 | } 185 | 186 | .rt-Code::after { 187 | content: ""; 188 | margin-top: -0.3789em; 189 | display: table; 190 | } 191 | @media (min-width: 768px) { 192 | 193 | .rt-Code { 194 | font-size: 16.1796px; 195 | line-height: 24.4px; 196 | } 197 | 198 | .rt-Code::before { 199 | content: ""; 200 | margin-bottom: -0.4274em; 201 | display: table; 202 | } 203 | 204 | .rt-Code::after { 205 | content: ""; 206 | margin-top: -0.3761em; 207 | display: table; 208 | } 209 | } 210 | 211 | /* Code size variants */ 212 | 213 | .rt-Code.rt-r-size-1 { 214 | font-size: 12.1347px; 215 | line-height: 18.55px; 216 | } 217 | 218 | .rt-Code.rt-r-size-1::before { 219 | content: ""; 220 | margin-bottom: -0.4377em; 221 | display: table; 222 | } 223 | 224 | .rt-Code.rt-r-size-1::after { 225 | content: ""; 226 | margin-top: -0.3864em; 227 | display: table; 228 | } 229 | 230 | .rt-Code.rt-r-size-2 { 231 | font-size: 14.8313px; 232 | line-height: 22.45px; 233 | } 234 | 235 | .rt-Code.rt-r-size-2::before { 236 | content: ""; 237 | margin-bottom: -0.4302em; 238 | display: table; 239 | } 240 | 241 | .rt-Code.rt-r-size-2::after { 242 | content: ""; 243 | margin-top: -0.3789em; 244 | display: table; 245 | } 246 | 247 | .rt-Code.rt-r-size-3 { 248 | font-size: 16.1796px; 249 | line-height: 24.4px; 250 | } 251 | 252 | .rt-Code.rt-r-size-3::before { 253 | content: ""; 254 | margin-bottom: -0.4274em; 255 | display: table; 256 | } 257 | 258 | .rt-Code.rt-r-size-3::after { 259 | content: ""; 260 | margin-top: -0.3761em; 261 | display: table; 262 | } 263 | 264 | .rt-Code.rt-r-size-4 { 265 | font-size: 18.8762px; 266 | line-height: 27.3px; 267 | } 268 | 269 | .rt-Code.rt-r-size-4::before { 270 | content: ""; 271 | margin-bottom: -0.3965em; 272 | display: table; 273 | } 274 | 275 | .rt-Code.rt-r-size-4::after { 276 | content: ""; 277 | margin-top: -0.3452em; 278 | display: table; 279 | } 280 | 281 | .rt-Code.rt-r-size-5 { 282 | font-size: 24.2694px; 283 | line-height: 29.1px; 284 | } 285 | 286 | .rt-Code.rt-r-size-5::before { 287 | content: ""; 288 | margin-bottom: -0.2729em; 289 | display: table; 290 | } 291 | 292 | .rt-Code.rt-r-size-5::after { 293 | content: ""; 294 | margin-top: -0.2216em; 295 | display: table; 296 | } 297 | 298 | .rt-Code.rt-r-size-6 { 299 | font-size: 32.3593px; 300 | line-height: 34.8px; 301 | } 302 | 303 | .rt-Code.rt-r-size-6::before { 304 | content: ""; 305 | margin-bottom: -0.2111em; 306 | display: table; 307 | } 308 | 309 | .rt-Code.rt-r-size-6::after { 310 | content: ""; 311 | margin-top: -0.1598em; 312 | display: table; 313 | } 314 | 315 | .rt-Code.rt-r-size-7 { 316 | font-size: 48.5389px; 317 | line-height: 42.2px; 318 | } 319 | 320 | .rt-Code.rt-r-size-7::before { 321 | content: ""; 322 | margin-bottom: -0.108em; 323 | display: table; 324 | } 325 | 326 | .rt-Code.rt-r-size-7::after { 327 | content: ""; 328 | margin-top: -0.0568em; 329 | display: table; 330 | } 331 | 332 | .rt-Code.rt-r-size-8 { 333 | font-size: 64.7185px; 334 | line-height: 49.6px; 335 | } 336 | 337 | .rt-Code.rt-r-size-8::before { 338 | content: ""; 339 | margin-bottom: -0.0565em; 340 | display: table; 341 | } 342 | 343 | .rt-Code.rt-r-size-8::after { 344 | content: ""; 345 | margin-top: -0.0053em; 346 | display: table; 347 | } 348 | 349 | .rt-Code.rt-r-size-9 { 350 | font-size: 86.2913px; 351 | line-height: 60.8px; 352 | } 353 | 354 | .rt-Code.rt-r-size-9::before { 355 | content: ""; 356 | margin-bottom: -0.0256em; 357 | display: table; 358 | } 359 | 360 | .rt-Code.rt-r-size-9::after { 361 | content: ""; 362 | margin-top: 0.0256em; 363 | display: table; 364 | } 365 | @media (min-width: 768px) { 366 | 367 | .rt-Code.rt-r-size-1 { 368 | font-size: 12.7734px; 369 | line-height: 19px; 370 | } 371 | 372 | .rt-Code.rt-r-size-1::before { 373 | content: ""; 374 | margin-bottom: -0.4171em; 375 | display: table; 376 | } 377 | 378 | .rt-Code.rt-r-size-1::after { 379 | content: ""; 380 | margin-top: -0.3658em; 381 | display: table; 382 | } 383 | 384 | .rt-Code.rt-r-size-2 { 385 | font-size: 15.6119px; 386 | line-height: 23px; 387 | } 388 | 389 | .rt-Code.rt-r-size-2::before { 390 | content: ""; 391 | margin-bottom: -0.41em; 392 | display: table; 393 | } 394 | 395 | .rt-Code.rt-r-size-2::after { 396 | content: ""; 397 | margin-top: -0.3587em; 398 | display: table; 399 | } 400 | 401 | .rt-Code.rt-r-size-3 { 402 | font-size: 17.0312px; 403 | line-height: 25px; 404 | } 405 | 406 | .rt-Code.rt-r-size-3::before { 407 | content: ""; 408 | margin-bottom: -0.4073em; 409 | display: table; 410 | } 411 | 412 | .rt-Code.rt-r-size-3::after { 413 | content: ""; 414 | margin-top: -0.356em; 415 | display: table; 416 | } 417 | 418 | .rt-Code.rt-r-size-4 { 419 | font-size: 19.8697px; 420 | line-height: 28px; 421 | } 422 | 423 | .rt-Code.rt-r-size-4::before { 424 | content: ""; 425 | margin-bottom: -0.3779em; 426 | display: table; 427 | } 428 | 429 | .rt-Code.rt-r-size-4::after { 430 | content: ""; 431 | margin-top: -0.3267em; 432 | display: table; 433 | } 434 | 435 | .rt-Code.rt-r-size-5 { 436 | font-size: 25.5468px; 437 | line-height: 30px; 438 | } 439 | 440 | .rt-Code.rt-r-size-5::before { 441 | content: ""; 442 | margin-bottom: -0.2605em; 443 | display: table; 444 | } 445 | 446 | .rt-Code.rt-r-size-5::after { 447 | content: ""; 448 | margin-top: -0.2092em; 449 | display: table; 450 | } 451 | 452 | .rt-Code.rt-r-size-6 { 453 | font-size: 34.0624px; 454 | line-height: 36px; 455 | } 456 | 457 | .rt-Code.rt-r-size-6::before { 458 | content: ""; 459 | margin-bottom: -0.2018em; 460 | display: table; 461 | } 462 | 463 | .rt-Code.rt-r-size-6::after { 464 | content: ""; 465 | margin-top: -0.1505em; 466 | display: table; 467 | } 468 | 469 | .rt-Code.rt-r-size-7 { 470 | font-size: 51.0936px; 471 | line-height: 44px; 472 | } 473 | 474 | .rt-Code.rt-r-size-7::before { 475 | content: ""; 476 | margin-bottom: -0.1039em; 477 | display: table; 478 | } 479 | 480 | .rt-Code.rt-r-size-7::after { 481 | content: ""; 482 | margin-top: -0.0527em; 483 | display: table; 484 | } 485 | 486 | .rt-Code.rt-r-size-8 { 487 | font-size: 68.1247px; 488 | line-height: 52px; 489 | } 490 | 491 | .rt-Code.rt-r-size-8::before { 492 | content: ""; 493 | margin-bottom: -0.055em; 494 | display: table; 495 | } 496 | 497 | .rt-Code.rt-r-size-8::after { 498 | content: ""; 499 | margin-top: -0.0037em; 500 | display: table; 501 | } 502 | 503 | .rt-Code.rt-r-size-9 { 504 | font-size: 90.833px; 505 | line-height: 64px; 506 | } 507 | 508 | .rt-Code.rt-r-size-9::before { 509 | content: ""; 510 | margin-bottom: -0.0256em; 511 | display: table; 512 | } 513 | 514 | .rt-Code.rt-r-size-9::after { 515 | content: ""; 516 | margin-top: 0.0256em; 517 | display: table; 518 | } 519 | } 520 | 521 | .rt-Em, .rt-Quote, .rt-Code { 522 | display: inline-block; 523 | } 524 | 525 | /* Class names for text elements */ 526 | 527 | .rt-r-size-1:not(.rt-DialogContent) { 528 | font-size: 12.8205px; 529 | line-height: 19px; 530 | } 531 | 532 | .rt-r-size-1:not(.rt-DialogContent)::before { 533 | content: ""; 534 | margin-bottom: -0.289em; 535 | display: table; 536 | } 537 | 538 | .rt-r-size-1:not(.rt-DialogContent)::after { 539 | content: ""; 540 | margin-top: -0.491em; 541 | display: table; 542 | } 543 | 544 | .rt-r-size-2:not(.rt-DialogContent) { 545 | font-size: 15.6695px; 546 | line-height: 23px; 547 | } 548 | 549 | .rt-r-size-2:not(.rt-DialogContent)::before { 550 | content: ""; 551 | margin-bottom: -0.2819em; 552 | display: table; 553 | } 554 | 555 | .rt-r-size-2:not(.rt-DialogContent)::after { 556 | content: ""; 557 | margin-top: -0.4839em; 558 | display: table; 559 | } 560 | 561 | .rt-r-size-3:not(.rt-DialogContent) { 562 | font-size: 17.094px; 563 | line-height: 25px; 564 | } 565 | 566 | .rt-r-size-3:not(.rt-DialogContent)::before { 567 | content: ""; 568 | margin-bottom: -0.2793em; 569 | display: table; 570 | } 571 | 572 | .rt-r-size-3:not(.rt-DialogContent)::after { 573 | content: ""; 574 | margin-top: -0.4813em; 575 | display: table; 576 | } 577 | 578 | .rt-r-size-4:not(.rt-DialogContent) { 579 | font-size: 19.943px; 580 | line-height: 28px; 581 | } 582 | 583 | .rt-r-size-4:not(.rt-DialogContent)::before { 584 | content: ""; 585 | margin-bottom: -0.25em; 586 | display: table; 587 | } 588 | 589 | .rt-r-size-4:not(.rt-DialogContent)::after { 590 | content: ""; 591 | margin-top: -0.452em; 592 | display: table; 593 | } 594 | 595 | .rt-r-size-5:not(.rt-DialogContent) { 596 | font-size: 25.641px; 597 | line-height: 30px; 598 | } 599 | 600 | .rt-r-size-5:not(.rt-DialogContent)::before { 601 | content: ""; 602 | margin-bottom: -0.133em; 603 | display: table; 604 | } 605 | 606 | .rt-r-size-5:not(.rt-DialogContent)::after { 607 | content: ""; 608 | margin-top: -0.335em; 609 | display: table; 610 | } 611 | 612 | .rt-r-size-6:not(.rt-DialogContent) { 613 | font-size: 34.188px; 614 | line-height: 36px; 615 | } 616 | 617 | .rt-r-size-6:not(.rt-DialogContent)::before { 618 | content: ""; 619 | margin-bottom: -0.0745em; 620 | display: table; 621 | } 622 | 623 | .rt-r-size-6:not(.rt-DialogContent)::after { 624 | content: ""; 625 | margin-top: -0.2765em; 626 | display: table; 627 | } 628 | 629 | .rt-r-size-7:not(.rt-DialogContent) { 630 | font-size: 51.2821px; 631 | line-height: 44px; 632 | } 633 | 634 | .rt-r-size-7:not(.rt-DialogContent)::before { 635 | content: ""; 636 | margin-bottom: 0.023em; 637 | display: table; 638 | } 639 | 640 | .rt-r-size-7:not(.rt-DialogContent)::after { 641 | content: ""; 642 | margin-top: -0.179em; 643 | display: table; 644 | } 645 | 646 | .rt-r-size-8:not(.rt-DialogContent) { 647 | font-size: 68.3761px; 648 | line-height: 52px; 649 | } 650 | 651 | .rt-r-size-8:not(.rt-DialogContent)::before { 652 | content: ""; 653 | margin-bottom: 0.0717em; 654 | display: table; 655 | } 656 | 657 | .rt-r-size-8:not(.rt-DialogContent)::after { 658 | content: ""; 659 | margin-top: -0.1303em; 660 | display: table; 661 | } 662 | 663 | .rt-r-size-9:not(.rt-DialogContent) { 664 | font-size: 91.1681px; 665 | line-height: 64px; 666 | } 667 | 668 | .rt-r-size-9:not(.rt-DialogContent)::before { 669 | content: ""; 670 | margin-bottom: 0.101em; 671 | display: table; 672 | } 673 | 674 | .rt-r-size-9:not(.rt-DialogContent)::after { 675 | content: ""; 676 | margin-top: -0.101em; 677 | display: table; 678 | } 679 | @media (min-width: 768px) { 680 | 681 | .rt-r-size-1:not(.rt-DialogContent) { 682 | font-size: 12.8205px; 683 | line-height: 19px; 684 | } 685 | 686 | .rt-r-size-1:not(.rt-DialogContent)::before { 687 | content: ""; 688 | margin-bottom: -0.289em; 689 | display: table; 690 | } 691 | 692 | .rt-r-size-1:not(.rt-DialogContent)::after { 693 | content: ""; 694 | margin-top: -0.491em; 695 | display: table; 696 | } 697 | 698 | .rt-r-size-2:not(.rt-DialogContent) { 699 | font-size: 15.6695px; 700 | line-height: 23px; 701 | } 702 | 703 | .rt-r-size-2:not(.rt-DialogContent)::before { 704 | content: ""; 705 | margin-bottom: -0.2819em; 706 | display: table; 707 | } 708 | 709 | .rt-r-size-2:not(.rt-DialogContent)::after { 710 | content: ""; 711 | margin-top: -0.4839em; 712 | display: table; 713 | } 714 | 715 | .rt-r-size-3:not(.rt-DialogContent) { 716 | font-size: 17.094px; 717 | line-height: 25px; 718 | } 719 | 720 | .rt-r-size-3:not(.rt-DialogContent)::before { 721 | content: ""; 722 | margin-bottom: -0.2793em; 723 | display: table; 724 | } 725 | 726 | .rt-r-size-3:not(.rt-DialogContent)::after { 727 | content: ""; 728 | margin-top: -0.4813em; 729 | display: table; 730 | } 731 | 732 | .rt-r-size-4:not(.rt-DialogContent) { 733 | font-size: 19.943px; 734 | line-height: 28px; 735 | } 736 | 737 | .rt-r-size-4:not(.rt-DialogContent)::before { 738 | content: ""; 739 | margin-bottom: -0.25em; 740 | display: table; 741 | } 742 | 743 | .rt-r-size-4:not(.rt-DialogContent)::after { 744 | content: ""; 745 | margin-top: -0.452em; 746 | display: table; 747 | } 748 | 749 | .rt-r-size-5:not(.rt-DialogContent) { 750 | font-size: 25.641px; 751 | line-height: 30px; 752 | } 753 | 754 | .rt-r-size-5:not(.rt-DialogContent)::before { 755 | content: ""; 756 | margin-bottom: -0.133em; 757 | display: table; 758 | } 759 | 760 | .rt-r-size-5:not(.rt-DialogContent)::after { 761 | content: ""; 762 | margin-top: -0.335em; 763 | display: table; 764 | } 765 | 766 | .rt-r-size-6:not(.rt-DialogContent) { 767 | font-size: 34.188px; 768 | line-height: 36px; 769 | } 770 | 771 | .rt-r-size-6:not(.rt-DialogContent)::before { 772 | content: ""; 773 | margin-bottom: -0.0745em; 774 | display: table; 775 | } 776 | 777 | .rt-r-size-6:not(.rt-DialogContent)::after { 778 | content: ""; 779 | margin-top: -0.2765em; 780 | display: table; 781 | } 782 | 783 | .rt-r-size-7:not(.rt-DialogContent) { 784 | font-size: 51.2821px; 785 | line-height: 44px; 786 | } 787 | 788 | .rt-r-size-7:not(.rt-DialogContent)::before { 789 | content: ""; 790 | margin-bottom: 0.023em; 791 | display: table; 792 | } 793 | 794 | .rt-r-size-7:not(.rt-DialogContent)::after { 795 | content: ""; 796 | margin-top: -0.179em; 797 | display: table; 798 | } 799 | 800 | .rt-r-size-8:not(.rt-DialogContent) { 801 | font-size: 68.3761px; 802 | line-height: 52px; 803 | } 804 | 805 | .rt-r-size-8:not(.rt-DialogContent)::before { 806 | content: ""; 807 | margin-bottom: 0.0717em; 808 | display: table; 809 | } 810 | 811 | .rt-r-size-8:not(.rt-DialogContent)::after { 812 | content: ""; 813 | margin-top: -0.1303em; 814 | display: table; 815 | } 816 | 817 | .rt-r-size-9:not(.rt-DialogContent) { 818 | font-size: 91.1681px; 819 | line-height: 64px; 820 | } 821 | 822 | .rt-r-size-9:not(.rt-DialogContent)::before { 823 | content: ""; 824 | margin-bottom: 0.101em; 825 | display: table; 826 | } 827 | 828 | .rt-r-size-9:not(.rt-DialogContent)::after { 829 | content: ""; 830 | margin-top: -0.101em; 831 | display: table; 832 | } 833 | } 834 | -------------------------------------------------------------------------------- /example/public/playfair.css: -------------------------------------------------------------------------------- 1 | /* Auto-generated by vite-plugin-capsize-radix */ 2 | 3 | /* Override Radix variables */ 4 | .radix-themes { 5 | --default-font-family: "Fira Sans", "Fira Sans Fallback", Arial; 6 | --em-font-family: "Fira Sans", "Fira Sans Fallback", Arial; 7 | --quote-font-family: "Fira Sans", "Fira Sans Fallback", Arial; 8 | --heading-font-family: ; 9 | --code-font-family: -apple-system, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 10 | 11 | /* Mobile */ 12 | --font-size-1: 13.0624px; 13 | --line-height-1: 19px; 14 | --font-size-2: 15.9652px; 15 | --line-height-2: 23px; 16 | --font-size-3: 17.4165px; 17 | --line-height-3: 25px; 18 | --font-size-4: 20.3193px; 19 | --line-height-4: 28px; 20 | --font-size-5: 26.1248px; 21 | --line-height-5: 30px; 22 | --font-size-6: 34.8331px; 23 | --line-height-6: 36px; 24 | --font-size-7: 52.2496px; 25 | --line-height-7: 44px; 26 | --font-size-8: 69.6662px; 27 | --line-height-8: 52px; 28 | --font-size-9: 92.8882px; 29 | --line-height-9: 64px; 30 | 31 | /* Larger devices */ 32 | @media (min-width: 768px) { 33 | --font-size-1: 13.0624px; 34 | --line-height-1: 19px; 35 | --font-size-2: 15.9652px; 36 | --line-height-2: 23px; 37 | --font-size-3: 17.4165px; 38 | --line-height-3: 25px; 39 | --font-size-4: 20.3193px; 40 | --line-height-4: 28px; 41 | --font-size-5: 26.1248px; 42 | --line-height-5: 30px; 43 | --font-size-6: 34.8331px; 44 | --line-height-6: 36px; 45 | --font-size-7: 52.2496px; 46 | --line-height-7: 44px; 47 | --font-size-8: 69.6662px; 48 | --line-height-8: 52px; 49 | --font-size-9: 92.8882px; 50 | --line-height-9: 64px; 51 | } 52 | } 53 | 54 | /* Otherwise links don't flow inline */ 55 | .rt-Link { 56 | display: inline-block; 57 | } 58 | 59 | /* Default text styles */ 60 | 61 | .rt-Text { 62 | font-size: 15.9652px; 63 | line-height: 23px; 64 | } 65 | 66 | .rt-Text::before { 67 | content: ""; 68 | margin-bottom: -0.3663em; 69 | display: table; 70 | } 71 | 72 | .rt-Text::after { 73 | content: ""; 74 | margin-top: -0.3853em; 75 | display: table; 76 | } 77 | @media (min-width: 768px) { 78 | 79 | .rt-Text { 80 | font-size: 17.4165px; 81 | line-height: 25px; 82 | } 83 | 84 | .rt-Text::before { 85 | content: ""; 86 | margin-bottom: -0.3637em; 87 | display: table; 88 | } 89 | 90 | .rt-Text::after { 91 | content: ""; 92 | margin-top: -0.3827em; 93 | display: table; 94 | } 95 | } 96 | 97 | /* Em text styles */ 98 | 99 | .rt-Em { 100 | font-size: 15.9652px; 101 | line-height: 23px; 102 | } 103 | 104 | .rt-Em::before { 105 | content: ""; 106 | margin-bottom: -0.3663em; 107 | display: table; 108 | } 109 | 110 | .rt-Em::after { 111 | content: ""; 112 | margin-top: -0.3853em; 113 | display: table; 114 | } 115 | @media (min-width: 768px) { 116 | 117 | .rt-Em { 118 | font-size: 17.4165px; 119 | line-height: 25px; 120 | } 121 | 122 | .rt-Em::before { 123 | content: ""; 124 | margin-bottom: -0.3637em; 125 | display: table; 126 | } 127 | 128 | .rt-Em::after { 129 | content: ""; 130 | margin-top: -0.3827em; 131 | display: table; 132 | } 133 | } 134 | 135 | /* Quote text styles */ 136 | 137 | .rt-Quote { 138 | font-size: 15.9652px; 139 | line-height: 23px; 140 | } 141 | 142 | .rt-Quote::before { 143 | content: ""; 144 | margin-bottom: -0.3663em; 145 | display: table; 146 | } 147 | 148 | .rt-Quote::after { 149 | content: ""; 150 | margin-top: -0.3853em; 151 | display: table; 152 | } 153 | @media (min-width: 768px) { 154 | 155 | .rt-Quote { 156 | font-size: 17.4165px; 157 | line-height: 25px; 158 | } 159 | 160 | .rt-Quote::before { 161 | content: ""; 162 | margin-bottom: -0.3637em; 163 | display: table; 164 | } 165 | 166 | .rt-Quote::after { 167 | content: ""; 168 | margin-top: -0.3827em; 169 | display: table; 170 | } 171 | } 172 | 173 | /* Code text styles */ 174 | 175 | .rt-Code { 176 | font-size: 14.8313px; 177 | line-height: 22.45px; 178 | } 179 | 180 | .rt-Code::before { 181 | content: ""; 182 | margin-bottom: -0.4302em; 183 | display: table; 184 | } 185 | 186 | .rt-Code::after { 187 | content: ""; 188 | margin-top: -0.3789em; 189 | display: table; 190 | } 191 | @media (min-width: 768px) { 192 | 193 | .rt-Code { 194 | font-size: 16.1796px; 195 | line-height: 24.4px; 196 | } 197 | 198 | .rt-Code::before { 199 | content: ""; 200 | margin-bottom: -0.4274em; 201 | display: table; 202 | } 203 | 204 | .rt-Code::after { 205 | content: ""; 206 | margin-top: -0.3761em; 207 | display: table; 208 | } 209 | } 210 | 211 | /* Code size variants */ 212 | 213 | .rt-Code.rt-r-size-1 { 214 | font-size: 12.1347px; 215 | line-height: 18.55px; 216 | } 217 | 218 | .rt-Code.rt-r-size-1::before { 219 | content: ""; 220 | margin-bottom: -0.4377em; 221 | display: table; 222 | } 223 | 224 | .rt-Code.rt-r-size-1::after { 225 | content: ""; 226 | margin-top: -0.3864em; 227 | display: table; 228 | } 229 | 230 | .rt-Code.rt-r-size-2 { 231 | font-size: 14.8313px; 232 | line-height: 22.45px; 233 | } 234 | 235 | .rt-Code.rt-r-size-2::before { 236 | content: ""; 237 | margin-bottom: -0.4302em; 238 | display: table; 239 | } 240 | 241 | .rt-Code.rt-r-size-2::after { 242 | content: ""; 243 | margin-top: -0.3789em; 244 | display: table; 245 | } 246 | 247 | .rt-Code.rt-r-size-3 { 248 | font-size: 16.1796px; 249 | line-height: 24.4px; 250 | } 251 | 252 | .rt-Code.rt-r-size-3::before { 253 | content: ""; 254 | margin-bottom: -0.4274em; 255 | display: table; 256 | } 257 | 258 | .rt-Code.rt-r-size-3::after { 259 | content: ""; 260 | margin-top: -0.3761em; 261 | display: table; 262 | } 263 | 264 | .rt-Code.rt-r-size-4 { 265 | font-size: 18.8762px; 266 | line-height: 27.3px; 267 | } 268 | 269 | .rt-Code.rt-r-size-4::before { 270 | content: ""; 271 | margin-bottom: -0.3965em; 272 | display: table; 273 | } 274 | 275 | .rt-Code.rt-r-size-4::after { 276 | content: ""; 277 | margin-top: -0.3452em; 278 | display: table; 279 | } 280 | 281 | .rt-Code.rt-r-size-5 { 282 | font-size: 24.2694px; 283 | line-height: 29.1px; 284 | } 285 | 286 | .rt-Code.rt-r-size-5::before { 287 | content: ""; 288 | margin-bottom: -0.2729em; 289 | display: table; 290 | } 291 | 292 | .rt-Code.rt-r-size-5::after { 293 | content: ""; 294 | margin-top: -0.2216em; 295 | display: table; 296 | } 297 | 298 | .rt-Code.rt-r-size-6 { 299 | font-size: 32.3593px; 300 | line-height: 34.8px; 301 | } 302 | 303 | .rt-Code.rt-r-size-6::before { 304 | content: ""; 305 | margin-bottom: -0.2111em; 306 | display: table; 307 | } 308 | 309 | .rt-Code.rt-r-size-6::after { 310 | content: ""; 311 | margin-top: -0.1598em; 312 | display: table; 313 | } 314 | 315 | .rt-Code.rt-r-size-7 { 316 | font-size: 48.5389px; 317 | line-height: 42.2px; 318 | } 319 | 320 | .rt-Code.rt-r-size-7::before { 321 | content: ""; 322 | margin-bottom: -0.108em; 323 | display: table; 324 | } 325 | 326 | .rt-Code.rt-r-size-7::after { 327 | content: ""; 328 | margin-top: -0.0568em; 329 | display: table; 330 | } 331 | 332 | .rt-Code.rt-r-size-8 { 333 | font-size: 64.7185px; 334 | line-height: 49.6px; 335 | } 336 | 337 | .rt-Code.rt-r-size-8::before { 338 | content: ""; 339 | margin-bottom: -0.0565em; 340 | display: table; 341 | } 342 | 343 | .rt-Code.rt-r-size-8::after { 344 | content: ""; 345 | margin-top: -0.0053em; 346 | display: table; 347 | } 348 | 349 | .rt-Code.rt-r-size-9 { 350 | font-size: 86.2913px; 351 | line-height: 60.8px; 352 | } 353 | 354 | .rt-Code.rt-r-size-9::before { 355 | content: ""; 356 | margin-bottom: -0.0256em; 357 | display: table; 358 | } 359 | 360 | .rt-Code.rt-r-size-9::after { 361 | content: ""; 362 | margin-top: 0.0256em; 363 | display: table; 364 | } 365 | @media (min-width: 768px) { 366 | 367 | .rt-Code.rt-r-size-1 { 368 | font-size: 12.7734px; 369 | line-height: 19px; 370 | } 371 | 372 | .rt-Code.rt-r-size-1::before { 373 | content: ""; 374 | margin-bottom: -0.4171em; 375 | display: table; 376 | } 377 | 378 | .rt-Code.rt-r-size-1::after { 379 | content: ""; 380 | margin-top: -0.3658em; 381 | display: table; 382 | } 383 | 384 | .rt-Code.rt-r-size-2 { 385 | font-size: 15.6119px; 386 | line-height: 23px; 387 | } 388 | 389 | .rt-Code.rt-r-size-2::before { 390 | content: ""; 391 | margin-bottom: -0.41em; 392 | display: table; 393 | } 394 | 395 | .rt-Code.rt-r-size-2::after { 396 | content: ""; 397 | margin-top: -0.3587em; 398 | display: table; 399 | } 400 | 401 | .rt-Code.rt-r-size-3 { 402 | font-size: 17.0312px; 403 | line-height: 25px; 404 | } 405 | 406 | .rt-Code.rt-r-size-3::before { 407 | content: ""; 408 | margin-bottom: -0.4073em; 409 | display: table; 410 | } 411 | 412 | .rt-Code.rt-r-size-3::after { 413 | content: ""; 414 | margin-top: -0.356em; 415 | display: table; 416 | } 417 | 418 | .rt-Code.rt-r-size-4 { 419 | font-size: 19.8697px; 420 | line-height: 28px; 421 | } 422 | 423 | .rt-Code.rt-r-size-4::before { 424 | content: ""; 425 | margin-bottom: -0.3779em; 426 | display: table; 427 | } 428 | 429 | .rt-Code.rt-r-size-4::after { 430 | content: ""; 431 | margin-top: -0.3267em; 432 | display: table; 433 | } 434 | 435 | .rt-Code.rt-r-size-5 { 436 | font-size: 25.5468px; 437 | line-height: 30px; 438 | } 439 | 440 | .rt-Code.rt-r-size-5::before { 441 | content: ""; 442 | margin-bottom: -0.2605em; 443 | display: table; 444 | } 445 | 446 | .rt-Code.rt-r-size-5::after { 447 | content: ""; 448 | margin-top: -0.2092em; 449 | display: table; 450 | } 451 | 452 | .rt-Code.rt-r-size-6 { 453 | font-size: 34.0624px; 454 | line-height: 36px; 455 | } 456 | 457 | .rt-Code.rt-r-size-6::before { 458 | content: ""; 459 | margin-bottom: -0.2018em; 460 | display: table; 461 | } 462 | 463 | .rt-Code.rt-r-size-6::after { 464 | content: ""; 465 | margin-top: -0.1505em; 466 | display: table; 467 | } 468 | 469 | .rt-Code.rt-r-size-7 { 470 | font-size: 51.0936px; 471 | line-height: 44px; 472 | } 473 | 474 | .rt-Code.rt-r-size-7::before { 475 | content: ""; 476 | margin-bottom: -0.1039em; 477 | display: table; 478 | } 479 | 480 | .rt-Code.rt-r-size-7::after { 481 | content: ""; 482 | margin-top: -0.0527em; 483 | display: table; 484 | } 485 | 486 | .rt-Code.rt-r-size-8 { 487 | font-size: 68.1247px; 488 | line-height: 52px; 489 | } 490 | 491 | .rt-Code.rt-r-size-8::before { 492 | content: ""; 493 | margin-bottom: -0.055em; 494 | display: table; 495 | } 496 | 497 | .rt-Code.rt-r-size-8::after { 498 | content: ""; 499 | margin-top: -0.0037em; 500 | display: table; 501 | } 502 | 503 | .rt-Code.rt-r-size-9 { 504 | font-size: 90.833px; 505 | line-height: 64px; 506 | } 507 | 508 | .rt-Code.rt-r-size-9::before { 509 | content: ""; 510 | margin-bottom: -0.0256em; 511 | display: table; 512 | } 513 | 514 | .rt-Code.rt-r-size-9::after { 515 | content: ""; 516 | margin-top: 0.0256em; 517 | display: table; 518 | } 519 | } 520 | 521 | .rt-Em, .rt-Quote, .rt-Code { 522 | display: inline-block; 523 | } 524 | 525 | /* Class names for text elements */ 526 | 527 | .rt-r-size-1:not(.rt-DialogContent) { 528 | font-size: 13.0624px; 529 | line-height: 19px; 530 | } 531 | 532 | .rt-r-size-1:not(.rt-DialogContent)::before { 533 | content: ""; 534 | margin-bottom: -0.3733em; 535 | display: table; 536 | } 537 | 538 | .rt-r-size-1:not(.rt-DialogContent)::after { 539 | content: ""; 540 | margin-top: -0.3923em; 541 | display: table; 542 | } 543 | 544 | .rt-r-size-2:not(.rt-DialogContent) { 545 | font-size: 15.9652px; 546 | line-height: 23px; 547 | } 548 | 549 | .rt-r-size-2:not(.rt-DialogContent)::before { 550 | content: ""; 551 | margin-bottom: -0.3663em; 552 | display: table; 553 | } 554 | 555 | .rt-r-size-2:not(.rt-DialogContent)::after { 556 | content: ""; 557 | margin-top: -0.3853em; 558 | display: table; 559 | } 560 | 561 | .rt-r-size-3:not(.rt-DialogContent) { 562 | font-size: 17.4165px; 563 | line-height: 25px; 564 | } 565 | 566 | .rt-r-size-3:not(.rt-DialogContent)::before { 567 | content: ""; 568 | margin-bottom: -0.3637em; 569 | display: table; 570 | } 571 | 572 | .rt-r-size-3:not(.rt-DialogContent)::after { 573 | content: ""; 574 | margin-top: -0.3827em; 575 | display: table; 576 | } 577 | 578 | .rt-r-size-4:not(.rt-DialogContent) { 579 | font-size: 20.3193px; 580 | line-height: 28px; 581 | } 582 | 583 | .rt-r-size-4:not(.rt-DialogContent)::before { 584 | content: ""; 585 | margin-bottom: -0.335em; 586 | display: table; 587 | } 588 | 589 | .rt-r-size-4:not(.rt-DialogContent)::after { 590 | content: ""; 591 | margin-top: -0.354em; 592 | display: table; 593 | } 594 | 595 | .rt-r-size-5:not(.rt-DialogContent) { 596 | font-size: 26.1248px; 597 | line-height: 30px; 598 | } 599 | 600 | .rt-r-size-5:not(.rt-DialogContent)::before { 601 | content: ""; 602 | margin-bottom: -0.2202em; 603 | display: table; 604 | } 605 | 606 | .rt-r-size-5:not(.rt-DialogContent)::after { 607 | content: ""; 608 | margin-top: -0.2392em; 609 | display: table; 610 | } 611 | 612 | .rt-r-size-6:not(.rt-DialogContent) { 613 | font-size: 34.8331px; 614 | line-height: 36px; 615 | } 616 | 617 | .rt-r-size-6:not(.rt-DialogContent)::before { 618 | content: ""; 619 | margin-bottom: -0.1628em; 620 | display: table; 621 | } 622 | 623 | .rt-r-size-6:not(.rt-DialogContent)::after { 624 | content: ""; 625 | margin-top: -0.1817em; 626 | display: table; 627 | } 628 | 629 | .rt-r-size-7:not(.rt-DialogContent) { 630 | font-size: 52.2496px; 631 | line-height: 44px; 632 | } 633 | 634 | .rt-r-size-7:not(.rt-DialogContent)::before { 635 | content: ""; 636 | margin-bottom: -0.0671em; 637 | display: table; 638 | } 639 | 640 | .rt-r-size-7:not(.rt-DialogContent)::after { 641 | content: ""; 642 | margin-top: -0.0861em; 643 | display: table; 644 | } 645 | 646 | .rt-r-size-8:not(.rt-DialogContent) { 647 | font-size: 69.6662px; 648 | line-height: 52px; 649 | } 650 | 651 | .rt-r-size-8:not(.rt-DialogContent)::before { 652 | content: ""; 653 | margin-bottom: -0.0192em; 654 | display: table; 655 | } 656 | 657 | .rt-r-size-8:not(.rt-DialogContent)::after { 658 | content: ""; 659 | margin-top: -0.0382em; 660 | display: table; 661 | } 662 | 663 | .rt-r-size-9:not(.rt-DialogContent) { 664 | font-size: 92.8882px; 665 | line-height: 64px; 666 | } 667 | 668 | .rt-r-size-9:not(.rt-DialogContent)::before { 669 | content: ""; 670 | margin-bottom: 0.0095em; 671 | display: table; 672 | } 673 | 674 | .rt-r-size-9:not(.rt-DialogContent)::after { 675 | content: ""; 676 | margin-top: -0.0095em; 677 | display: table; 678 | } 679 | @media (min-width: 768px) { 680 | 681 | .rt-r-size-1:not(.rt-DialogContent) { 682 | font-size: 13.0624px; 683 | line-height: 19px; 684 | } 685 | 686 | .rt-r-size-1:not(.rt-DialogContent)::before { 687 | content: ""; 688 | margin-bottom: -0.3733em; 689 | display: table; 690 | } 691 | 692 | .rt-r-size-1:not(.rt-DialogContent)::after { 693 | content: ""; 694 | margin-top: -0.3923em; 695 | display: table; 696 | } 697 | 698 | .rt-r-size-2:not(.rt-DialogContent) { 699 | font-size: 15.9652px; 700 | line-height: 23px; 701 | } 702 | 703 | .rt-r-size-2:not(.rt-DialogContent)::before { 704 | content: ""; 705 | margin-bottom: -0.3663em; 706 | display: table; 707 | } 708 | 709 | .rt-r-size-2:not(.rt-DialogContent)::after { 710 | content: ""; 711 | margin-top: -0.3853em; 712 | display: table; 713 | } 714 | 715 | .rt-r-size-3:not(.rt-DialogContent) { 716 | font-size: 17.4165px; 717 | line-height: 25px; 718 | } 719 | 720 | .rt-r-size-3:not(.rt-DialogContent)::before { 721 | content: ""; 722 | margin-bottom: -0.3637em; 723 | display: table; 724 | } 725 | 726 | .rt-r-size-3:not(.rt-DialogContent)::after { 727 | content: ""; 728 | margin-top: -0.3827em; 729 | display: table; 730 | } 731 | 732 | .rt-r-size-4:not(.rt-DialogContent) { 733 | font-size: 20.3193px; 734 | line-height: 28px; 735 | } 736 | 737 | .rt-r-size-4:not(.rt-DialogContent)::before { 738 | content: ""; 739 | margin-bottom: -0.335em; 740 | display: table; 741 | } 742 | 743 | .rt-r-size-4:not(.rt-DialogContent)::after { 744 | content: ""; 745 | margin-top: -0.354em; 746 | display: table; 747 | } 748 | 749 | .rt-r-size-5:not(.rt-DialogContent) { 750 | font-size: 26.1248px; 751 | line-height: 30px; 752 | } 753 | 754 | .rt-r-size-5:not(.rt-DialogContent)::before { 755 | content: ""; 756 | margin-bottom: -0.2202em; 757 | display: table; 758 | } 759 | 760 | .rt-r-size-5:not(.rt-DialogContent)::after { 761 | content: ""; 762 | margin-top: -0.2392em; 763 | display: table; 764 | } 765 | 766 | .rt-r-size-6:not(.rt-DialogContent) { 767 | font-size: 34.8331px; 768 | line-height: 36px; 769 | } 770 | 771 | .rt-r-size-6:not(.rt-DialogContent)::before { 772 | content: ""; 773 | margin-bottom: -0.1628em; 774 | display: table; 775 | } 776 | 777 | .rt-r-size-6:not(.rt-DialogContent)::after { 778 | content: ""; 779 | margin-top: -0.1817em; 780 | display: table; 781 | } 782 | 783 | .rt-r-size-7:not(.rt-DialogContent) { 784 | font-size: 52.2496px; 785 | line-height: 44px; 786 | } 787 | 788 | .rt-r-size-7:not(.rt-DialogContent)::before { 789 | content: ""; 790 | margin-bottom: -0.0671em; 791 | display: table; 792 | } 793 | 794 | .rt-r-size-7:not(.rt-DialogContent)::after { 795 | content: ""; 796 | margin-top: -0.0861em; 797 | display: table; 798 | } 799 | 800 | .rt-r-size-8:not(.rt-DialogContent) { 801 | font-size: 69.6662px; 802 | line-height: 52px; 803 | } 804 | 805 | .rt-r-size-8:not(.rt-DialogContent)::before { 806 | content: ""; 807 | margin-bottom: -0.0192em; 808 | display: table; 809 | } 810 | 811 | .rt-r-size-8:not(.rt-DialogContent)::after { 812 | content: ""; 813 | margin-top: -0.0382em; 814 | display: table; 815 | } 816 | 817 | .rt-r-size-9:not(.rt-DialogContent) { 818 | font-size: 92.8882px; 819 | line-height: 64px; 820 | } 821 | 822 | .rt-r-size-9:not(.rt-DialogContent)::before { 823 | content: ""; 824 | margin-bottom: 0.0095em; 825 | display: table; 826 | } 827 | 828 | .rt-r-size-9:not(.rt-DialogContent)::after { 829 | content: ""; 830 | margin-top: -0.0095em; 831 | display: table; 832 | } 833 | } 834 | --------------------------------------------------------------------------------