@umbra.ui/typography 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +258 -0
- package/dist/components.d.ts +146 -0
- package/dist/components.d.ts.map +1 -0
- package/dist/components.js +145 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +4 -0
- package/dist/types.d.ts +21 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/package.json +46 -0
- package/src/components.ts +173 -0
- package/src/fonts/Inter-Italic-VariableFont_opsz,wght.ttf +0 -0
- package/src/fonts/Inter-VariableFont_opsz,wght.ttf +0 -0
- package/src/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf +0 -0
- package/src/fonts/JetBrainsMono-VariableFont_wght.ttf +0 -0
- package/src/fonts.css +39 -0
- package/src/index.ts +6 -0
- package/src/types.ts +24 -0
- package/src/typography.css +379 -0
package/README.md
ADDED
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
# @umbra-ui/typography
|
|
2
|
+
|
|
3
|
+
Typography components and utilities for Umbra UI, based on Apple's text styles for Sonoma with Inter and JetBrains Mono font support.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
This package is part of the Umbra UI monorepo and is automatically available when using `@umbra-ui/core`.
|
|
8
|
+
|
|
9
|
+
## Font Support
|
|
10
|
+
|
|
11
|
+
This package includes embedded font files for optimal typography:
|
|
12
|
+
|
|
13
|
+
- **Inter Variable Font** - Modern, highly legible sans-serif font for UI text
|
|
14
|
+
- **JetBrains Mono** - Monospace font optimized for code and technical content
|
|
15
|
+
|
|
16
|
+
The fonts are automatically loaded when you import the typography CSS.
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
### CSS Classes (Recommended)
|
|
21
|
+
|
|
22
|
+
Import the CSS file to get all typography classes and font loading:
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import "@umbra-ui/typography/typography.css";
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Then use the CSS classes in your HTML:
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<!-- Regular typography with Inter font -->
|
|
32
|
+
<h1 class="largeTitle">Large Title</h1>
|
|
33
|
+
<h2 class="title1">Title 1</h2>
|
|
34
|
+
<h3 class="title2">Title 2</h3>
|
|
35
|
+
<h4 class="title3">Title 3</h4>
|
|
36
|
+
<p class="headline">Headline Text</p>
|
|
37
|
+
<p class="body">Body text for regular content</p>
|
|
38
|
+
<p class="callout">Callout text</p>
|
|
39
|
+
<p class="subheadline">Subheadline text</p>
|
|
40
|
+
<p class="footnote">Footnote text</p>
|
|
41
|
+
<p class="caption">Caption text</p>
|
|
42
|
+
|
|
43
|
+
<!-- Monospace typography with JetBrains Mono -->
|
|
44
|
+
<code class="body-mono">const example = "code";</code>
|
|
45
|
+
<pre class="caption-mono">console.log("monospace text");</pre>
|
|
46
|
+
<p class="headline-mono">Monospace Headline</p>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### TypeScript Scale
|
|
50
|
+
|
|
51
|
+
For programmatic access to typography values:
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
import {
|
|
55
|
+
defaultTypographyScale,
|
|
56
|
+
monospaceTypographyScale,
|
|
57
|
+
TypographyVariantName,
|
|
58
|
+
} from "@umbra-ui/typography";
|
|
59
|
+
|
|
60
|
+
// Use the default typography scale (Inter font)
|
|
61
|
+
const headlineStyles = defaultTypographyScale.headline;
|
|
62
|
+
|
|
63
|
+
// Use the monospace typography scale (JetBrains Mono font)
|
|
64
|
+
const codeStyles = monospaceTypographyScale.body;
|
|
65
|
+
|
|
66
|
+
// Type-safe typography variant names
|
|
67
|
+
const variant: TypographyVariantName = "headline";
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## API
|
|
71
|
+
|
|
72
|
+
### CSS Classes
|
|
73
|
+
|
|
74
|
+
#### Regular Typography (Inter Font)
|
|
75
|
+
|
|
76
|
+
- `.largeTitle` - Large title text (24px, bold)
|
|
77
|
+
- `.title1` - Title 1 text (20px, semibold)
|
|
78
|
+
- `.title2` - Title 2 text (16px, semibold)
|
|
79
|
+
- `.title3` - Title 3 text (14px, medium)
|
|
80
|
+
- `.headline` - Headline text (13px, semibold)
|
|
81
|
+
- `.body` - Body text (13px, regular)
|
|
82
|
+
- `.callout` - Callout text (12px, regular)
|
|
83
|
+
- `.subheadline` - Subheadline text (11px, regular)
|
|
84
|
+
- `.footnote` - Footnote text (11px, regular)
|
|
85
|
+
- `.caption` - Caption text (11px, regular)
|
|
86
|
+
|
|
87
|
+
#### Monospace Typography (JetBrains Mono)
|
|
88
|
+
|
|
89
|
+
- `.largeTitle-mono` - Large title text (24px, semibold)
|
|
90
|
+
- `.title1-mono` - Title 1 text (20px, medium)
|
|
91
|
+
- `.title2-mono` - Title 2 text (16px, medium)
|
|
92
|
+
- `.title3-mono` - Title 3 text (14px, medium)
|
|
93
|
+
- `.headline-mono` - Headline text (13px, medium)
|
|
94
|
+
- `.body-mono` - Body text (13px, regular)
|
|
95
|
+
- `.callout-mono` - Callout text (12px, regular)
|
|
96
|
+
- `.subheadline-mono` - Subheadline text (11px, regular)
|
|
97
|
+
- `.footnote-mono` - Footnote text (11px, regular)
|
|
98
|
+
- `.caption-mono` - Caption text (11px, regular)
|
|
99
|
+
|
|
100
|
+
#### Font Weight Utilities
|
|
101
|
+
|
|
102
|
+
- `.font-thin` - Thin weight (100)
|
|
103
|
+
- `.font-light` - Light weight (300)
|
|
104
|
+
- `.font-regular` - Regular weight (400)
|
|
105
|
+
- `.font-medium` - Medium weight (500)
|
|
106
|
+
- `.font-semibold` - Semibold weight (600)
|
|
107
|
+
- `.font-bold` - Bold weight (700)
|
|
108
|
+
- `.font-black` - Black weight (900)
|
|
109
|
+
|
|
110
|
+
#### Text Color Utilities
|
|
111
|
+
|
|
112
|
+
- `.text-primary` - Primary text color
|
|
113
|
+
- `.text-secondary` - Secondary text color
|
|
114
|
+
- `.text-tertiary` - Tertiary text color
|
|
115
|
+
- `.text-disabled` - Disabled text color
|
|
116
|
+
|
|
117
|
+
#### Text Alignment Utilities
|
|
118
|
+
|
|
119
|
+
- `.text-left` - Left alignment
|
|
120
|
+
- `.text-center` - Center alignment
|
|
121
|
+
- `.text-right` - Right alignment
|
|
122
|
+
- `.text-justify` - Justified alignment
|
|
123
|
+
|
|
124
|
+
### TypeScript Types
|
|
125
|
+
|
|
126
|
+
- `TypographyVariant`: Interface for individual typography variants
|
|
127
|
+
- `TypographyScale`: Interface for the complete typography scale
|
|
128
|
+
- `TypographyVariantName`: Union type of all available variant names
|
|
129
|
+
|
|
130
|
+
### Exports
|
|
131
|
+
|
|
132
|
+
- `defaultTypographyScale`: Typography scale object with CSS custom properties
|
|
133
|
+
- `monospaceTypographyScale`: Monospace typography scale object
|
|
134
|
+
- All type definitions for TypeScript support
|
|
135
|
+
- CSS file with all typography classes and font loading
|
|
136
|
+
|
|
137
|
+
## CSS Custom Properties
|
|
138
|
+
|
|
139
|
+
The typography system uses CSS custom properties based on a base font size of 13px:
|
|
140
|
+
|
|
141
|
+
```css
|
|
142
|
+
:root {
|
|
143
|
+
--base-font-size: 13px;
|
|
144
|
+
|
|
145
|
+
/* Title hierarchy - using perfect fourth scale (1.333) */
|
|
146
|
+
--large-title: calc(1.846 * var(--base-font-size)); /* 24px */
|
|
147
|
+
--title1: calc(1.538 * var(--base-font-size)); /* 20px */
|
|
148
|
+
--title2: calc(1.231 * var(--base-font-size)); /* 16px */
|
|
149
|
+
--title3: calc(1.077 * var(--base-font-size)); /* 14px */
|
|
150
|
+
|
|
151
|
+
/* Body text styles */
|
|
152
|
+
--headline: var(--base-font-size); /* 13px */
|
|
153
|
+
--body: var(--base-font-size); /* 13px */
|
|
154
|
+
--callout: calc(0.923 * var(--base-font-size)); /* 12px */
|
|
155
|
+
--subheadline: calc(0.846 * var(--base-font-size)); /* 11px */
|
|
156
|
+
|
|
157
|
+
/* Small text styles */
|
|
158
|
+
--footnote: calc(0.846 * var(--base-font-size)); /* 11px */
|
|
159
|
+
--caption: calc(0.846 * var(--base-font-size)); /* 11px */
|
|
160
|
+
|
|
161
|
+
/* Font weights */
|
|
162
|
+
--font-weight-thin: 100;
|
|
163
|
+
--font-weight-light: 300;
|
|
164
|
+
--font-weight-regular: 400;
|
|
165
|
+
--font-weight-medium: 500;
|
|
166
|
+
--font-weight-semibold: 600;
|
|
167
|
+
--font-weight-bold: 700;
|
|
168
|
+
--font-weight-black: 900;
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
## Font Family
|
|
173
|
+
|
|
174
|
+
### Regular Typography (Inter)
|
|
175
|
+
|
|
176
|
+
The typography system uses Inter variable font with system font fallbacks:
|
|
177
|
+
|
|
178
|
+
```css
|
|
179
|
+
font-family: "Inter var", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
|
|
180
|
+
"Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Monospace Typography (JetBrains Mono)
|
|
184
|
+
|
|
185
|
+
The monospace typography uses JetBrains Mono with system monospace fallbacks:
|
|
186
|
+
|
|
187
|
+
```css
|
|
188
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
189
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
190
|
+
"Liberation Mono", "Courier New", monospace;
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
## Font Features
|
|
194
|
+
|
|
195
|
+
### Inter Variable Font
|
|
196
|
+
|
|
197
|
+
- **Variable font support** - Smooth weight interpolation from 100-900
|
|
198
|
+
- **Optical sizing** - Automatically adjusts for different text sizes
|
|
199
|
+
- **OpenType features** - Enhanced ligatures and contextual alternates
|
|
200
|
+
- **Optimized for screens** - Designed specifically for digital interfaces
|
|
201
|
+
|
|
202
|
+
### JetBrains Mono
|
|
203
|
+
|
|
204
|
+
- **Variable font support** - Smooth weight interpolation from 100-800
|
|
205
|
+
- **Programming ligatures** - Enhanced readability for code
|
|
206
|
+
- **Zero slashed** - Distinguishes between 0 and O
|
|
207
|
+
- **Optimized for coding** - Designed specifically for developers
|
|
208
|
+
|
|
209
|
+
## Benefits of Embedded Fonts
|
|
210
|
+
|
|
211
|
+
- **Consistent appearance** - Same fonts across all platforms
|
|
212
|
+
- **Better typography** - Optimized fonts for specific use cases
|
|
213
|
+
- **Variable font support** - Smooth weight interpolation
|
|
214
|
+
- **Performance optimized** - Fonts are included in the package
|
|
215
|
+
- **No external dependencies** - Self-contained typography system
|
|
216
|
+
|
|
217
|
+
## Dark Mode Support
|
|
218
|
+
|
|
219
|
+
The typography system automatically adapts to dark mode:
|
|
220
|
+
|
|
221
|
+
```css
|
|
222
|
+
@media (prefers-color-scheme: dark) {
|
|
223
|
+
:root {
|
|
224
|
+
--text-primary: rgba(255, 255, 255, 0.92);
|
|
225
|
+
--text-secondary: rgba(255, 255, 255, 0.7);
|
|
226
|
+
--text-tertiary: rgba(255, 255, 255, 0.5);
|
|
227
|
+
--text-disabled: rgba(255, 255, 255, 0.3);
|
|
228
|
+
--background: #0a0a0a;
|
|
229
|
+
--surface: #1a1a1a;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
Manual dark mode toggle is also supported via `.dark` or `.dark-theme` classes.
|
|
235
|
+
|
|
236
|
+
## Use Cases for Monospace Typography
|
|
237
|
+
|
|
238
|
+
- **Code snippets** - Inline code and code blocks
|
|
239
|
+
- **Data tables** - Aligned columns and data display
|
|
240
|
+
- **Terminal output** - Command line interfaces
|
|
241
|
+
- **Documentation** - Technical specifications and examples
|
|
242
|
+
- **Logs and debugging** - Structured text output
|
|
243
|
+
|
|
244
|
+
## Typography Scale
|
|
245
|
+
|
|
246
|
+
The typography scale includes:
|
|
247
|
+
|
|
248
|
+
- **Headings**: largeTitle, title1, title2, title3 with decreasing font sizes and appropriate weights
|
|
249
|
+
- **Body Text**: headline, body, callout for main content
|
|
250
|
+
- **Supporting Text**: subheadline, footnote, caption for secondary information
|
|
251
|
+
|
|
252
|
+
Each variant includes:
|
|
253
|
+
|
|
254
|
+
- `fontSize`: CSS font-size value
|
|
255
|
+
- `fontWeight`: CSS font-weight value
|
|
256
|
+
- `lineHeight`: CSS line-height value
|
|
257
|
+
- `letterSpacing`: Optional CSS letter-spacing value
|
|
258
|
+
- `fontFamily`: CSS font-family value
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
export declare const defaultTypographyScale: {
|
|
2
|
+
readonly largeTitle: {
|
|
3
|
+
readonly fontSize: "var(--large-title)";
|
|
4
|
+
readonly fontWeight: "var(--font-weight-bold)";
|
|
5
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
6
|
+
readonly letterSpacing: "var(--letter-spacing-tight)";
|
|
7
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
8
|
+
};
|
|
9
|
+
readonly title1: {
|
|
10
|
+
readonly fontSize: "var(--title1)";
|
|
11
|
+
readonly fontWeight: "var(--font-weight-semibold)";
|
|
12
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
13
|
+
readonly letterSpacing: "var(--letter-spacing-tight)";
|
|
14
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
15
|
+
};
|
|
16
|
+
readonly title2: {
|
|
17
|
+
readonly fontSize: "var(--title2)";
|
|
18
|
+
readonly fontWeight: "var(--font-weight-semibold)";
|
|
19
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
20
|
+
readonly letterSpacing: "var(--letter-spacing-normal)";
|
|
21
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
22
|
+
};
|
|
23
|
+
readonly title3: {
|
|
24
|
+
readonly fontSize: "var(--title3)";
|
|
25
|
+
readonly fontWeight: "var(--font-weight-medium)";
|
|
26
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
27
|
+
readonly letterSpacing: "var(--letter-spacing-normal)";
|
|
28
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
29
|
+
};
|
|
30
|
+
readonly headline: {
|
|
31
|
+
readonly fontSize: "var(--headline)";
|
|
32
|
+
readonly fontWeight: "var(--font-weight-semibold)";
|
|
33
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
34
|
+
readonly letterSpacing: "var(--letter-spacing-normal)";
|
|
35
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
36
|
+
};
|
|
37
|
+
readonly body: {
|
|
38
|
+
readonly fontSize: "var(--body)";
|
|
39
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
40
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
41
|
+
readonly letterSpacing: "var(--letter-spacing-normal)";
|
|
42
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
43
|
+
};
|
|
44
|
+
readonly callout: {
|
|
45
|
+
readonly fontSize: "var(--callout)";
|
|
46
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
47
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
48
|
+
readonly letterSpacing: "var(--letter-spacing-normal)";
|
|
49
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
50
|
+
};
|
|
51
|
+
readonly subheadline: {
|
|
52
|
+
readonly fontSize: "var(--subheadline)";
|
|
53
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
54
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
55
|
+
readonly letterSpacing: "var(--letter-spacing-wide)";
|
|
56
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
57
|
+
};
|
|
58
|
+
readonly footnote: {
|
|
59
|
+
readonly fontSize: "var(--footnote)";
|
|
60
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
61
|
+
readonly lineHeight: "var(--line-height-relaxed)";
|
|
62
|
+
readonly letterSpacing: "var(--letter-spacing-normal)";
|
|
63
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
64
|
+
};
|
|
65
|
+
readonly caption: {
|
|
66
|
+
readonly fontSize: "var(--caption)";
|
|
67
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
68
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
69
|
+
readonly letterSpacing: "var(--letter-spacing-wide)";
|
|
70
|
+
readonly fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
export declare const monospaceTypographyScale: {
|
|
74
|
+
readonly largeTitle: {
|
|
75
|
+
readonly fontSize: "var(--large-title)";
|
|
76
|
+
readonly fontWeight: "var(--font-weight-semibold)";
|
|
77
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
78
|
+
readonly letterSpacing: "0";
|
|
79
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
80
|
+
};
|
|
81
|
+
readonly title1: {
|
|
82
|
+
readonly fontSize: "var(--title1)";
|
|
83
|
+
readonly fontWeight: "var(--font-weight-medium)";
|
|
84
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
85
|
+
readonly letterSpacing: "0";
|
|
86
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
87
|
+
};
|
|
88
|
+
readonly title2: {
|
|
89
|
+
readonly fontSize: "var(--title2)";
|
|
90
|
+
readonly fontWeight: "var(--font-weight-medium)";
|
|
91
|
+
readonly lineHeight: "var(--line-height-tight)";
|
|
92
|
+
readonly letterSpacing: "0";
|
|
93
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
94
|
+
};
|
|
95
|
+
readonly title3: {
|
|
96
|
+
readonly fontSize: "var(--title3)";
|
|
97
|
+
readonly fontWeight: "var(--font-weight-medium)";
|
|
98
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
99
|
+
readonly letterSpacing: "0";
|
|
100
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
101
|
+
};
|
|
102
|
+
readonly headline: {
|
|
103
|
+
readonly fontSize: "var(--headline)";
|
|
104
|
+
readonly fontWeight: "var(--font-weight-medium)";
|
|
105
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
106
|
+
readonly letterSpacing: "0";
|
|
107
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
108
|
+
};
|
|
109
|
+
readonly body: {
|
|
110
|
+
readonly fontSize: "var(--body)";
|
|
111
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
112
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
113
|
+
readonly letterSpacing: "0";
|
|
114
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
115
|
+
};
|
|
116
|
+
readonly callout: {
|
|
117
|
+
readonly fontSize: "var(--callout)";
|
|
118
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
119
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
120
|
+
readonly letterSpacing: "0";
|
|
121
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
122
|
+
};
|
|
123
|
+
readonly subheadline: {
|
|
124
|
+
readonly fontSize: "var(--subheadline)";
|
|
125
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
126
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
127
|
+
readonly letterSpacing: "0";
|
|
128
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
129
|
+
};
|
|
130
|
+
readonly footnote: {
|
|
131
|
+
readonly fontSize: "var(--footnote)";
|
|
132
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
133
|
+
readonly lineHeight: "var(--line-height-relaxed)";
|
|
134
|
+
readonly letterSpacing: "0";
|
|
135
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
136
|
+
};
|
|
137
|
+
readonly caption: {
|
|
138
|
+
readonly fontSize: "var(--caption)";
|
|
139
|
+
readonly fontWeight: "var(--font-weight-regular)";
|
|
140
|
+
readonly lineHeight: "var(--line-height-normal)";
|
|
141
|
+
readonly letterSpacing: "0";
|
|
142
|
+
readonly fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace";
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
export type { TypographyScale, TypographyVariant, TypographyVariantName, } from "./types";
|
|
146
|
+
//# sourceMappingURL=components.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFzB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF3B,CAAC;AAEX,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
// Typography components
|
|
2
|
+
export const defaultTypographyScale = {
|
|
3
|
+
largeTitle: {
|
|
4
|
+
fontSize: "var(--large-title)",
|
|
5
|
+
fontWeight: "var(--font-weight-bold)",
|
|
6
|
+
lineHeight: "var(--line-height-tight)",
|
|
7
|
+
letterSpacing: "var(--letter-spacing-tight)",
|
|
8
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
9
|
+
},
|
|
10
|
+
title1: {
|
|
11
|
+
fontSize: "var(--title1)",
|
|
12
|
+
fontWeight: "var(--font-weight-semibold)",
|
|
13
|
+
lineHeight: "var(--line-height-tight)",
|
|
14
|
+
letterSpacing: "var(--letter-spacing-tight)",
|
|
15
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
16
|
+
},
|
|
17
|
+
title2: {
|
|
18
|
+
fontSize: "var(--title2)",
|
|
19
|
+
fontWeight: "var(--font-weight-semibold)",
|
|
20
|
+
lineHeight: "var(--line-height-tight)",
|
|
21
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
22
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
23
|
+
},
|
|
24
|
+
title3: {
|
|
25
|
+
fontSize: "var(--title3)",
|
|
26
|
+
fontWeight: "var(--font-weight-medium)",
|
|
27
|
+
lineHeight: "var(--line-height-normal)",
|
|
28
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
29
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
30
|
+
},
|
|
31
|
+
headline: {
|
|
32
|
+
fontSize: "var(--headline)",
|
|
33
|
+
fontWeight: "var(--font-weight-semibold)",
|
|
34
|
+
lineHeight: "var(--line-height-normal)",
|
|
35
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
36
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
37
|
+
},
|
|
38
|
+
body: {
|
|
39
|
+
fontSize: "var(--body)",
|
|
40
|
+
fontWeight: "var(--font-weight-regular)",
|
|
41
|
+
lineHeight: "var(--line-height-normal)",
|
|
42
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
43
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
44
|
+
},
|
|
45
|
+
callout: {
|
|
46
|
+
fontSize: "var(--callout)",
|
|
47
|
+
fontWeight: "var(--font-weight-regular)",
|
|
48
|
+
lineHeight: "var(--line-height-normal)",
|
|
49
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
50
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
51
|
+
},
|
|
52
|
+
subheadline: {
|
|
53
|
+
fontSize: "var(--subheadline)",
|
|
54
|
+
fontWeight: "var(--font-weight-regular)",
|
|
55
|
+
lineHeight: "var(--line-height-normal)",
|
|
56
|
+
letterSpacing: "var(--letter-spacing-wide)",
|
|
57
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
58
|
+
},
|
|
59
|
+
footnote: {
|
|
60
|
+
fontSize: "var(--footnote)",
|
|
61
|
+
fontWeight: "var(--font-weight-regular)",
|
|
62
|
+
lineHeight: "var(--line-height-relaxed)",
|
|
63
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
64
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
65
|
+
},
|
|
66
|
+
caption: {
|
|
67
|
+
fontSize: "var(--caption)",
|
|
68
|
+
fontWeight: "var(--font-weight-regular)",
|
|
69
|
+
lineHeight: "var(--line-height-normal)",
|
|
70
|
+
letterSpacing: "var(--letter-spacing-wide)",
|
|
71
|
+
fontFamily: "'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
export const monospaceTypographyScale = {
|
|
75
|
+
largeTitle: {
|
|
76
|
+
fontSize: "var(--large-title)",
|
|
77
|
+
fontWeight: "var(--font-weight-semibold)",
|
|
78
|
+
lineHeight: "var(--line-height-tight)",
|
|
79
|
+
letterSpacing: "0",
|
|
80
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
81
|
+
},
|
|
82
|
+
title1: {
|
|
83
|
+
fontSize: "var(--title1)",
|
|
84
|
+
fontWeight: "var(--font-weight-medium)",
|
|
85
|
+
lineHeight: "var(--line-height-tight)",
|
|
86
|
+
letterSpacing: "0",
|
|
87
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
88
|
+
},
|
|
89
|
+
title2: {
|
|
90
|
+
fontSize: "var(--title2)",
|
|
91
|
+
fontWeight: "var(--font-weight-medium)",
|
|
92
|
+
lineHeight: "var(--line-height-tight)",
|
|
93
|
+
letterSpacing: "0",
|
|
94
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
95
|
+
},
|
|
96
|
+
title3: {
|
|
97
|
+
fontSize: "var(--title3)",
|
|
98
|
+
fontWeight: "var(--font-weight-medium)",
|
|
99
|
+
lineHeight: "var(--line-height-normal)",
|
|
100
|
+
letterSpacing: "0",
|
|
101
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
102
|
+
},
|
|
103
|
+
headline: {
|
|
104
|
+
fontSize: "var(--headline)",
|
|
105
|
+
fontWeight: "var(--font-weight-medium)",
|
|
106
|
+
lineHeight: "var(--line-height-normal)",
|
|
107
|
+
letterSpacing: "0",
|
|
108
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
109
|
+
},
|
|
110
|
+
body: {
|
|
111
|
+
fontSize: "var(--body)",
|
|
112
|
+
fontWeight: "var(--font-weight-regular)",
|
|
113
|
+
lineHeight: "var(--line-height-normal)",
|
|
114
|
+
letterSpacing: "0",
|
|
115
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
116
|
+
},
|
|
117
|
+
callout: {
|
|
118
|
+
fontSize: "var(--callout)",
|
|
119
|
+
fontWeight: "var(--font-weight-regular)",
|
|
120
|
+
lineHeight: "var(--line-height-normal)",
|
|
121
|
+
letterSpacing: "0",
|
|
122
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
123
|
+
},
|
|
124
|
+
subheadline: {
|
|
125
|
+
fontSize: "var(--subheadline)",
|
|
126
|
+
fontWeight: "var(--font-weight-regular)",
|
|
127
|
+
lineHeight: "var(--line-height-normal)",
|
|
128
|
+
letterSpacing: "0",
|
|
129
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
130
|
+
},
|
|
131
|
+
footnote: {
|
|
132
|
+
fontSize: "var(--footnote)",
|
|
133
|
+
fontWeight: "var(--font-weight-regular)",
|
|
134
|
+
lineHeight: "var(--line-height-relaxed)",
|
|
135
|
+
letterSpacing: "0",
|
|
136
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
137
|
+
},
|
|
138
|
+
caption: {
|
|
139
|
+
fontSize: "var(--caption)",
|
|
140
|
+
fontWeight: "var(--font-weight-regular)",
|
|
141
|
+
lineHeight: "var(--line-height-normal)",
|
|
142
|
+
letterSpacing: "0",
|
|
143
|
+
fontFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
144
|
+
},
|
|
145
|
+
};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAC;AAChC,mBAAmB,YAAY,CAAC"}
|
package/dist/index.js
ADDED
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export interface TypographyVariant {
|
|
2
|
+
fontSize: string;
|
|
3
|
+
fontWeight: string;
|
|
4
|
+
lineHeight: string;
|
|
5
|
+
letterSpacing?: string;
|
|
6
|
+
fontFamily?: string;
|
|
7
|
+
}
|
|
8
|
+
export interface TypographyScale {
|
|
9
|
+
largeTitle: TypographyVariant;
|
|
10
|
+
title1: TypographyVariant;
|
|
11
|
+
title2: TypographyVariant;
|
|
12
|
+
title3: TypographyVariant;
|
|
13
|
+
headline: TypographyVariant;
|
|
14
|
+
body: TypographyVariant;
|
|
15
|
+
callout: TypographyVariant;
|
|
16
|
+
subheadline: TypographyVariant;
|
|
17
|
+
footnote: TypographyVariant;
|
|
18
|
+
caption: TypographyVariant;
|
|
19
|
+
}
|
|
20
|
+
export type TypographyVariantName = keyof TypographyScale;
|
|
21
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,iBAAiB,CAAC;IAC9B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,IAAI,EAAE,iBAAiB,CAAC;IACxB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,eAAe,CAAC"}
|
package/dist/types.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@umbra.ui/typography",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Typography components for Umbra UI",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"style": "src/typography.css",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"bun": "./src/index.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
},
|
|
15
|
+
"./typography.css": "./src/typography.css",
|
|
16
|
+
"./fonts.css": "./src/fonts.css"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"src",
|
|
21
|
+
"src/typography.css",
|
|
22
|
+
"src/fonts.css",
|
|
23
|
+
"src/fonts"
|
|
24
|
+
],
|
|
25
|
+
"engines": {
|
|
26
|
+
"node": ">=16",
|
|
27
|
+
"bun": ">=1.0"
|
|
28
|
+
},
|
|
29
|
+
"keywords": [
|
|
30
|
+
"typography",
|
|
31
|
+
"design-system",
|
|
32
|
+
"ui"
|
|
33
|
+
],
|
|
34
|
+
"author": "Your Name",
|
|
35
|
+
"license": "MIT",
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"typescript": "^5.0.0"
|
|
38
|
+
},
|
|
39
|
+
"publishConfig": {
|
|
40
|
+
"access": "public"
|
|
41
|
+
},
|
|
42
|
+
"scripts": {
|
|
43
|
+
"build": "tsc",
|
|
44
|
+
"dev": "tsc --watch"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
// Typography components
|
|
2
|
+
|
|
3
|
+
export const defaultTypographyScale = {
|
|
4
|
+
largeTitle: {
|
|
5
|
+
fontSize: "var(--large-title)",
|
|
6
|
+
fontWeight: "var(--font-weight-bold)",
|
|
7
|
+
lineHeight: "var(--line-height-tight)",
|
|
8
|
+
letterSpacing: "var(--letter-spacing-tight)",
|
|
9
|
+
fontFamily:
|
|
10
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
11
|
+
},
|
|
12
|
+
title1: {
|
|
13
|
+
fontSize: "var(--title1)",
|
|
14
|
+
fontWeight: "var(--font-weight-semibold)",
|
|
15
|
+
lineHeight: "var(--line-height-tight)",
|
|
16
|
+
letterSpacing: "var(--letter-spacing-tight)",
|
|
17
|
+
fontFamily:
|
|
18
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
19
|
+
},
|
|
20
|
+
title2: {
|
|
21
|
+
fontSize: "var(--title2)",
|
|
22
|
+
fontWeight: "var(--font-weight-semibold)",
|
|
23
|
+
lineHeight: "var(--line-height-tight)",
|
|
24
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
25
|
+
fontFamily:
|
|
26
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
27
|
+
},
|
|
28
|
+
title3: {
|
|
29
|
+
fontSize: "var(--title3)",
|
|
30
|
+
fontWeight: "var(--font-weight-medium)",
|
|
31
|
+
lineHeight: "var(--line-height-normal)",
|
|
32
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
33
|
+
fontFamily:
|
|
34
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
35
|
+
},
|
|
36
|
+
headline: {
|
|
37
|
+
fontSize: "var(--headline)",
|
|
38
|
+
fontWeight: "var(--font-weight-semibold)",
|
|
39
|
+
lineHeight: "var(--line-height-normal)",
|
|
40
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
41
|
+
fontFamily:
|
|
42
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
43
|
+
},
|
|
44
|
+
body: {
|
|
45
|
+
fontSize: "var(--body)",
|
|
46
|
+
fontWeight: "var(--font-weight-regular)",
|
|
47
|
+
lineHeight: "var(--line-height-normal)",
|
|
48
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
49
|
+
fontFamily:
|
|
50
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
51
|
+
},
|
|
52
|
+
callout: {
|
|
53
|
+
fontSize: "var(--callout)",
|
|
54
|
+
fontWeight: "var(--font-weight-regular)",
|
|
55
|
+
lineHeight: "var(--line-height-normal)",
|
|
56
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
57
|
+
fontFamily:
|
|
58
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
59
|
+
},
|
|
60
|
+
subheadline: {
|
|
61
|
+
fontSize: "var(--subheadline)",
|
|
62
|
+
fontWeight: "var(--font-weight-regular)",
|
|
63
|
+
lineHeight: "var(--line-height-normal)",
|
|
64
|
+
letterSpacing: "var(--letter-spacing-wide)",
|
|
65
|
+
fontFamily:
|
|
66
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
67
|
+
},
|
|
68
|
+
footnote: {
|
|
69
|
+
fontSize: "var(--footnote)",
|
|
70
|
+
fontWeight: "var(--font-weight-regular)",
|
|
71
|
+
lineHeight: "var(--line-height-relaxed)",
|
|
72
|
+
letterSpacing: "var(--letter-spacing-normal)",
|
|
73
|
+
fontFamily:
|
|
74
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
75
|
+
},
|
|
76
|
+
caption: {
|
|
77
|
+
fontSize: "var(--caption)",
|
|
78
|
+
fontWeight: "var(--font-weight-regular)",
|
|
79
|
+
lineHeight: "var(--line-height-normal)",
|
|
80
|
+
letterSpacing: "var(--letter-spacing-wide)",
|
|
81
|
+
fontFamily:
|
|
82
|
+
"'Inter var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
83
|
+
},
|
|
84
|
+
} as const;
|
|
85
|
+
|
|
86
|
+
export const monospaceTypographyScale = {
|
|
87
|
+
largeTitle: {
|
|
88
|
+
fontSize: "var(--large-title)",
|
|
89
|
+
fontWeight: "var(--font-weight-semibold)",
|
|
90
|
+
lineHeight: "var(--line-height-tight)",
|
|
91
|
+
letterSpacing: "0",
|
|
92
|
+
fontFamily:
|
|
93
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
94
|
+
},
|
|
95
|
+
title1: {
|
|
96
|
+
fontSize: "var(--title1)",
|
|
97
|
+
fontWeight: "var(--font-weight-medium)",
|
|
98
|
+
lineHeight: "var(--line-height-tight)",
|
|
99
|
+
letterSpacing: "0",
|
|
100
|
+
fontFamily:
|
|
101
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
102
|
+
},
|
|
103
|
+
title2: {
|
|
104
|
+
fontSize: "var(--title2)",
|
|
105
|
+
fontWeight: "var(--font-weight-medium)",
|
|
106
|
+
lineHeight: "var(--line-height-tight)",
|
|
107
|
+
letterSpacing: "0",
|
|
108
|
+
fontFamily:
|
|
109
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
110
|
+
},
|
|
111
|
+
title3: {
|
|
112
|
+
fontSize: "var(--title3)",
|
|
113
|
+
fontWeight: "var(--font-weight-medium)",
|
|
114
|
+
lineHeight: "var(--line-height-normal)",
|
|
115
|
+
letterSpacing: "0",
|
|
116
|
+
fontFamily:
|
|
117
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
118
|
+
},
|
|
119
|
+
headline: {
|
|
120
|
+
fontSize: "var(--headline)",
|
|
121
|
+
fontWeight: "var(--font-weight-medium)",
|
|
122
|
+
lineHeight: "var(--line-height-normal)",
|
|
123
|
+
letterSpacing: "0",
|
|
124
|
+
fontFamily:
|
|
125
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
126
|
+
},
|
|
127
|
+
body: {
|
|
128
|
+
fontSize: "var(--body)",
|
|
129
|
+
fontWeight: "var(--font-weight-regular)",
|
|
130
|
+
lineHeight: "var(--line-height-normal)",
|
|
131
|
+
letterSpacing: "0",
|
|
132
|
+
fontFamily:
|
|
133
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
134
|
+
},
|
|
135
|
+
callout: {
|
|
136
|
+
fontSize: "var(--callout)",
|
|
137
|
+
fontWeight: "var(--font-weight-regular)",
|
|
138
|
+
lineHeight: "var(--line-height-normal)",
|
|
139
|
+
letterSpacing: "0",
|
|
140
|
+
fontFamily:
|
|
141
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
142
|
+
},
|
|
143
|
+
subheadline: {
|
|
144
|
+
fontSize: "var(--subheadline)",
|
|
145
|
+
fontWeight: "var(--font-weight-regular)",
|
|
146
|
+
lineHeight: "var(--line-height-normal)",
|
|
147
|
+
letterSpacing: "0",
|
|
148
|
+
fontFamily:
|
|
149
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
150
|
+
},
|
|
151
|
+
footnote: {
|
|
152
|
+
fontSize: "var(--footnote)",
|
|
153
|
+
fontWeight: "var(--font-weight-regular)",
|
|
154
|
+
lineHeight: "var(--line-height-relaxed)",
|
|
155
|
+
letterSpacing: "0",
|
|
156
|
+
fontFamily:
|
|
157
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
158
|
+
},
|
|
159
|
+
caption: {
|
|
160
|
+
fontSize: "var(--caption)",
|
|
161
|
+
fontWeight: "var(--font-weight-regular)",
|
|
162
|
+
lineHeight: "var(--line-height-normal)",
|
|
163
|
+
letterSpacing: "0",
|
|
164
|
+
fontFamily:
|
|
165
|
+
"'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace",
|
|
166
|
+
},
|
|
167
|
+
} as const;
|
|
168
|
+
|
|
169
|
+
export type {
|
|
170
|
+
TypographyScale,
|
|
171
|
+
TypographyVariant,
|
|
172
|
+
TypographyVariantName,
|
|
173
|
+
} from "./types";
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/src/fonts.css
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/* Font face declarations for Inter and JetBrains Mono */
|
|
2
|
+
|
|
3
|
+
/* Inter Variable Font */
|
|
4
|
+
@font-face {
|
|
5
|
+
font-family: 'Inter var';
|
|
6
|
+
font-weight: 100 900;
|
|
7
|
+
font-style: normal;
|
|
8
|
+
font-display: swap;
|
|
9
|
+
src: url('./fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
|
|
10
|
+
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@font-face {
|
|
14
|
+
font-family: 'Inter var';
|
|
15
|
+
font-weight: 100 900;
|
|
16
|
+
font-style: italic;
|
|
17
|
+
font-display: swap;
|
|
18
|
+
src: url('./fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
|
|
19
|
+
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* JetBrains Mono Variable Font */
|
|
23
|
+
@font-face {
|
|
24
|
+
font-family: 'JetBrains Mono';
|
|
25
|
+
font-weight: 100 800;
|
|
26
|
+
font-style: normal;
|
|
27
|
+
font-display: swap;
|
|
28
|
+
src: url('./fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
|
|
29
|
+
font-feature-settings: 'liga' 1, 'calt' 1, 'zero' 1;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@font-face {
|
|
33
|
+
font-family: 'JetBrains Mono';
|
|
34
|
+
font-weight: 100 800;
|
|
35
|
+
font-style: italic;
|
|
36
|
+
font-display: swap;
|
|
37
|
+
src: url('./fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
|
|
38
|
+
font-feature-settings: 'liga' 1, 'calt' 1, 'zero' 1;
|
|
39
|
+
}
|
package/src/index.ts
ADDED
package/src/types.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// Typography types and interfaces
|
|
2
|
+
|
|
3
|
+
export interface TypographyVariant {
|
|
4
|
+
fontSize: string;
|
|
5
|
+
fontWeight: string;
|
|
6
|
+
lineHeight: string;
|
|
7
|
+
letterSpacing?: string;
|
|
8
|
+
fontFamily?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface TypographyScale {
|
|
12
|
+
largeTitle: TypographyVariant;
|
|
13
|
+
title1: TypographyVariant;
|
|
14
|
+
title2: TypographyVariant;
|
|
15
|
+
title3: TypographyVariant;
|
|
16
|
+
headline: TypographyVariant;
|
|
17
|
+
body: TypographyVariant;
|
|
18
|
+
callout: TypographyVariant;
|
|
19
|
+
subheadline: TypographyVariant;
|
|
20
|
+
footnote: TypographyVariant;
|
|
21
|
+
caption: TypographyVariant;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export type TypographyVariantName = keyof TypographyScale;
|
|
@@ -0,0 +1,379 @@
|
|
|
1
|
+
/* Import font face declarations */
|
|
2
|
+
@import "./fonts.css";
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
--base-font-size: 13px;
|
|
6
|
+
|
|
7
|
+
/* Title hierarchy - using perfect fourth scale (1.333) */
|
|
8
|
+
--large-title: calc(1.846 * var(--base-font-size)); /* 24px */
|
|
9
|
+
--title1: calc(1.538 * var(--base-font-size)); /* 20px */
|
|
10
|
+
--title2: calc(1.231 * var(--base-font-size)); /* 16px */
|
|
11
|
+
--title3: calc(1.077 * var(--base-font-size)); /* 14px */
|
|
12
|
+
|
|
13
|
+
/* Body text styles */
|
|
14
|
+
--headline: var(--base-font-size); /* 13px */
|
|
15
|
+
--body: var(--base-font-size); /* 13px */
|
|
16
|
+
--callout: calc(0.923 * var(--base-font-size)); /* 12px */
|
|
17
|
+
--subheadline: calc(0.846 * var(--base-font-size)); /* 11px */
|
|
18
|
+
|
|
19
|
+
/* Small text styles */
|
|
20
|
+
--footnote: calc(0.846 * var(--base-font-size)); /* 11px */
|
|
21
|
+
--caption: calc(0.846 * var(--base-font-size)); /* 11px */
|
|
22
|
+
|
|
23
|
+
/* Line heights - using 8px baseline grid */
|
|
24
|
+
--line-height-tight: 1.2;
|
|
25
|
+
--line-height-normal: 1.5;
|
|
26
|
+
--line-height-relaxed: 1.6;
|
|
27
|
+
|
|
28
|
+
/* Letter spacing for improved readability */
|
|
29
|
+
--letter-spacing-tight: -0.022em;
|
|
30
|
+
--letter-spacing-normal: -0.006em;
|
|
31
|
+
--letter-spacing-wide: 0.03em;
|
|
32
|
+
|
|
33
|
+
/* Variable font settings */
|
|
34
|
+
--font-weight-thin: 100;
|
|
35
|
+
--font-weight-light: 300;
|
|
36
|
+
--font-weight-regular: 400;
|
|
37
|
+
--font-weight-medium: 500;
|
|
38
|
+
--font-weight-semibold: 600;
|
|
39
|
+
--font-weight-bold: 700;
|
|
40
|
+
--font-weight-black: 900;
|
|
41
|
+
|
|
42
|
+
/* Optical sizing for variable fonts */
|
|
43
|
+
--font-optical-sizing: auto;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@media screen and (max-width: 480px) {
|
|
47
|
+
:root {
|
|
48
|
+
--base-font-size: 17px;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Dark mode letter spacing adjustments */
|
|
53
|
+
@media (prefers-color-scheme: dark) {
|
|
54
|
+
:root {
|
|
55
|
+
/* Slightly increased letter spacing for dark mode */
|
|
56
|
+
--letter-spacing-tight: -0.019em;
|
|
57
|
+
--letter-spacing-normal: -0.003em;
|
|
58
|
+
--letter-spacing-wide: 0.035em;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Support for manual dark mode toggle */
|
|
63
|
+
.dark,
|
|
64
|
+
.dark-theme {
|
|
65
|
+
--letter-spacing-tight: -0.019em;
|
|
66
|
+
--letter-spacing-normal: -0.003em;
|
|
67
|
+
--letter-spacing-wide: 0.035em;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
*,
|
|
71
|
+
*::before,
|
|
72
|
+
*::after {
|
|
73
|
+
font-weight: normal;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
html {
|
|
77
|
+
font-size: var(--base-font-size);
|
|
78
|
+
-webkit-font-smoothing: antialiased;
|
|
79
|
+
-moz-osx-font-smoothing: grayscale;
|
|
80
|
+
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
body {
|
|
84
|
+
font-family: -apple-system, BlinkMacSystemFont, "Inter var", "SF Pro Display",
|
|
85
|
+
"SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
86
|
+
font-weight: var(--font-weight-regular);
|
|
87
|
+
text-rendering: optimizeLegibility;
|
|
88
|
+
font-optical-sizing: var(--font-optical-sizing);
|
|
89
|
+
line-height: var(--line-height-normal);
|
|
90
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
91
|
+
font-variant-ligatures: common-ligatures contextual;
|
|
92
|
+
font-variant-numeric: oldstyle-nums proportional-nums;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Variable font support detection and fallback */
|
|
96
|
+
@supports (font-variation-settings: normal) {
|
|
97
|
+
body {
|
|
98
|
+
font-family: "Inter var", -apple-system, BlinkMacSystemFont,
|
|
99
|
+
"SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial,
|
|
100
|
+
sans-serif;
|
|
101
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Title styles with variable font weights */
|
|
106
|
+
.largeTitle {
|
|
107
|
+
font-size: var(--large-title);
|
|
108
|
+
font-weight: var(--font-weight-bold);
|
|
109
|
+
font-variation-settings: "wght" var(--font-weight-bold);
|
|
110
|
+
line-height: var(--line-height-tight);
|
|
111
|
+
letter-spacing: var(--letter-spacing-tight);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.title1 {
|
|
115
|
+
font-size: var(--title1);
|
|
116
|
+
font-weight: var(--font-weight-semibold);
|
|
117
|
+
font-variation-settings: "wght" var(--font-weight-semibold);
|
|
118
|
+
line-height: var(--line-height-tight);
|
|
119
|
+
letter-spacing: var(--letter-spacing-tight);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.title2 {
|
|
123
|
+
font-size: var(--title2);
|
|
124
|
+
font-weight: var(--font-weight-semibold);
|
|
125
|
+
font-variation-settings: "wght" var(--font-weight-semibold);
|
|
126
|
+
line-height: var(--line-height-tight);
|
|
127
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.title3 {
|
|
131
|
+
font-size: var(--title3);
|
|
132
|
+
font-weight: var(--font-weight-medium);
|
|
133
|
+
font-variation-settings: "wght" var(--font-weight-medium);
|
|
134
|
+
line-height: var(--line-height-normal);
|
|
135
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Body text styles */
|
|
139
|
+
.headline {
|
|
140
|
+
font-size: var(--headline);
|
|
141
|
+
font-weight: var(--font-weight-semibold);
|
|
142
|
+
font-variation-settings: "wght" var(--font-weight-semibold);
|
|
143
|
+
line-height: var(--line-height-normal);
|
|
144
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.body {
|
|
148
|
+
font-size: var(--body);
|
|
149
|
+
font-weight: var(--font-weight-regular);
|
|
150
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
151
|
+
line-height: var(--line-height-normal);
|
|
152
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.callout {
|
|
156
|
+
font-size: var(--callout);
|
|
157
|
+
font-weight: var(--font-weight-regular);
|
|
158
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
159
|
+
line-height: var(--line-height-normal);
|
|
160
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.subheadline {
|
|
164
|
+
font-size: var(--subheadline);
|
|
165
|
+
font-weight: var(--font-weight-regular);
|
|
166
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
167
|
+
line-height: var(--line-height-normal);
|
|
168
|
+
letter-spacing: var(--letter-spacing-wide);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Small text styles */
|
|
172
|
+
.footnote {
|
|
173
|
+
font-size: var(--footnote);
|
|
174
|
+
font-weight: var(--font-weight-regular);
|
|
175
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
176
|
+
line-height: var(--line-height-relaxed);
|
|
177
|
+
letter-spacing: var(--letter-spacing-normal);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.caption {
|
|
181
|
+
font-size: var(--caption);
|
|
182
|
+
font-weight: var(--font-weight-regular);
|
|
183
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
184
|
+
line-height: var(--line-height-normal);
|
|
185
|
+
letter-spacing: var(--letter-spacing-wide);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* Monospace typography with variable font support */
|
|
189
|
+
.largeTitle-mono {
|
|
190
|
+
font-size: var(--large-title);
|
|
191
|
+
font-weight: var(--font-weight-semibold);
|
|
192
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
193
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
194
|
+
"Liberation Mono", "Courier New", monospace;
|
|
195
|
+
font-variation-settings: "wght" var(--font-weight-semibold);
|
|
196
|
+
line-height: var(--line-height-tight);
|
|
197
|
+
letter-spacing: 0;
|
|
198
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.title1-mono {
|
|
202
|
+
font-size: var(--title1);
|
|
203
|
+
font-weight: var(--font-weight-medium);
|
|
204
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
205
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
206
|
+
"Liberation Mono", "Courier New", monospace;
|
|
207
|
+
font-variation-settings: "wght" var(--font-weight-medium);
|
|
208
|
+
line-height: var(--line-height-tight);
|
|
209
|
+
letter-spacing: 0;
|
|
210
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.title2-mono {
|
|
214
|
+
font-size: var(--title2);
|
|
215
|
+
font-weight: var(--font-weight-medium);
|
|
216
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
217
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
218
|
+
"Liberation Mono", "Courier New", monospace;
|
|
219
|
+
font-variation-settings: "wght" var(--font-weight-medium);
|
|
220
|
+
line-height: var(--line-height-tight);
|
|
221
|
+
letter-spacing: 0;
|
|
222
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.title3-mono {
|
|
226
|
+
font-size: var(--title3);
|
|
227
|
+
font-weight: var(--font-weight-medium);
|
|
228
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
229
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
230
|
+
"Liberation Mono", "Courier New", monospace;
|
|
231
|
+
font-variation-settings: "wght" var(--font-weight-medium);
|
|
232
|
+
line-height: var(--line-height-normal);
|
|
233
|
+
letter-spacing: 0;
|
|
234
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.headline-mono {
|
|
238
|
+
font-size: var(--headline);
|
|
239
|
+
font-weight: var(--font-weight-medium);
|
|
240
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
241
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
242
|
+
"Liberation Mono", "Courier New", monospace;
|
|
243
|
+
font-variation-settings: "wght" var(--font-weight-medium);
|
|
244
|
+
line-height: var(--line-height-normal);
|
|
245
|
+
letter-spacing: 0;
|
|
246
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.body-mono {
|
|
250
|
+
font-size: var(--body);
|
|
251
|
+
font-weight: var(--font-weight-regular);
|
|
252
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
253
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
254
|
+
"Liberation Mono", "Courier New", monospace;
|
|
255
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
256
|
+
line-height: var(--line-height-normal);
|
|
257
|
+
letter-spacing: 0;
|
|
258
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.callout-mono {
|
|
262
|
+
font-size: var(--callout);
|
|
263
|
+
font-weight: var(--font-weight-regular);
|
|
264
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
265
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
266
|
+
"Liberation Mono", "Courier New", monospace;
|
|
267
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
268
|
+
line-height: var(--line-height-normal);
|
|
269
|
+
letter-spacing: 0;
|
|
270
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.subheadline-mono {
|
|
274
|
+
font-size: var(--subheadline);
|
|
275
|
+
font-weight: var(--font-weight-regular);
|
|
276
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
277
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
278
|
+
"Liberation Mono", "Courier New", monospace;
|
|
279
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
280
|
+
line-height: var(--line-height-normal);
|
|
281
|
+
letter-spacing: 0;
|
|
282
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.footnote-mono {
|
|
286
|
+
font-size: var(--footnote);
|
|
287
|
+
font-weight: var(--font-weight-regular);
|
|
288
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
289
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
290
|
+
"Liberation Mono", "Courier New", monospace;
|
|
291
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
292
|
+
line-height: var(--line-height-relaxed);
|
|
293
|
+
letter-spacing: 0;
|
|
294
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.caption-mono {
|
|
298
|
+
font-size: var(--caption);
|
|
299
|
+
font-weight: var(--font-weight-regular);
|
|
300
|
+
font-family: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata",
|
|
301
|
+
"Roboto Mono", "Source Code Pro", "Menlo", "DejaVu Sans Mono",
|
|
302
|
+
"Liberation Mono", "Courier New", monospace;
|
|
303
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
304
|
+
line-height: var(--line-height-normal);
|
|
305
|
+
letter-spacing: 0;
|
|
306
|
+
font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.text-left {
|
|
310
|
+
text-align: left;
|
|
311
|
+
}
|
|
312
|
+
.text-center {
|
|
313
|
+
text-align: center;
|
|
314
|
+
}
|
|
315
|
+
.text-right {
|
|
316
|
+
text-align: right;
|
|
317
|
+
}
|
|
318
|
+
.text-justify {
|
|
319
|
+
text-align: justify;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/* Font weight utilities for variable fonts */
|
|
323
|
+
.font-thin {
|
|
324
|
+
font-weight: var(--font-weight-thin);
|
|
325
|
+
font-variation-settings: "wght" var(--font-weight-thin);
|
|
326
|
+
}
|
|
327
|
+
.font-light {
|
|
328
|
+
font-weight: var(--font-weight-light);
|
|
329
|
+
font-variation-settings: "wght" var(--font-weight-light);
|
|
330
|
+
}
|
|
331
|
+
.font-regular {
|
|
332
|
+
font-weight: var(--font-weight-regular);
|
|
333
|
+
font-variation-settings: "wght" var(--font-weight-regular);
|
|
334
|
+
}
|
|
335
|
+
.font-medium {
|
|
336
|
+
font-weight: var(--font-weight-medium);
|
|
337
|
+
font-variation-settings: "wght" var(--font-weight-medium);
|
|
338
|
+
}
|
|
339
|
+
.font-semibold {
|
|
340
|
+
font-weight: var(--font-weight-semibold);
|
|
341
|
+
font-variation-settings: "wght" var(--font-weight-semibold);
|
|
342
|
+
}
|
|
343
|
+
.font-bold {
|
|
344
|
+
font-weight: var(--font-weight-bold);
|
|
345
|
+
font-variation-settings: "wght" var(--font-weight-bold);
|
|
346
|
+
}
|
|
347
|
+
.font-black {
|
|
348
|
+
font-weight: var(--font-weight-black);
|
|
349
|
+
font-variation-settings: "wght" var(--font-weight-black);
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* Improved rendering for different screen densities */
|
|
353
|
+
@media screen and (-webkit-min-device-pixel-ratio: 2),
|
|
354
|
+
screen and (min-resolution: 192dpi) {
|
|
355
|
+
body {
|
|
356
|
+
-webkit-font-smoothing: antialiased;
|
|
357
|
+
-moz-osx-font-smoothing: grayscale;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* List styles */
|
|
362
|
+
ul {
|
|
363
|
+
list-style: none;
|
|
364
|
+
margin: 0;
|
|
365
|
+
padding: 0;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* Tabular numbers for better number alignment */
|
|
369
|
+
.tabular-nums {
|
|
370
|
+
font-variant-numeric: tabular-nums;
|
|
371
|
+
font-feature-settings: "tnum" 1;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/* Prevent font size adjustment on mobile */
|
|
375
|
+
body {
|
|
376
|
+
-webkit-text-size-adjust: 100%;
|
|
377
|
+
-ms-text-size-adjust: 100%;
|
|
378
|
+
text-size-adjust: 100%;
|
|
379
|
+
}
|