@umbra.ui/typography 0.2.0 → 0.4.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.
Files changed (7) hide show
  1. package/dist/components.d.ts +40 -80
  2. package/dist/components.d.ts.map +1 -1
  3. package/dist/components.js +40 -80
  4. package/package.json +6 -7
  5. package/src/components.ts +40 -100
  6. package/src/fonts.css +17 -13
  7. package/src/typography.css +61 -277
package/dist/components.d.ts CHANGED
@@ -1,145 +1,105 @@
1
1
  export declare const defaultTypographyScale: {
2
2
  readonly largeTitle: {
3
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";
4
+ readonly fontWeight: "normal";
5
+ readonly fontFamily: "Inter var";
8
6
  };
9
7
  readonly title1: {
10
8
  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";
9
+ readonly fontWeight: "normal";
10
+ readonly fontFamily: "Inter var";
15
11
  };
16
12
  readonly title2: {
17
13
  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";
14
+ readonly fontWeight: "normal";
15
+ readonly fontFamily: "Inter var";
22
16
  };
23
17
  readonly title3: {
24
18
  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";
19
+ readonly fontWeight: "bold";
20
+ readonly fontFamily: "Inter var";
29
21
  };
30
22
  readonly headline: {
31
23
  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";
24
+ readonly fontWeight: "600";
25
+ readonly fontFamily: "Inter var";
36
26
  };
37
27
  readonly body: {
38
28
  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";
29
+ readonly fontWeight: "normal";
30
+ readonly fontFamily: "Inter var";
43
31
  };
44
32
  readonly callout: {
45
33
  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";
34
+ readonly fontWeight: "normal";
35
+ readonly fontFamily: "Inter var";
50
36
  };
51
37
  readonly subheadline: {
52
38
  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";
39
+ readonly fontWeight: "normal";
40
+ readonly fontFamily: "Inter var";
57
41
  };
58
42
  readonly footnote: {
59
43
  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";
44
+ readonly fontWeight: "normal";
45
+ readonly fontFamily: "Inter var";
64
46
  };
65
47
  readonly caption: {
66
48
  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";
49
+ readonly fontWeight: "normal";
50
+ readonly fontFamily: "Inter var";
71
51
  };
72
52
  };
73
53
  export declare const monospaceTypographyScale: {
74
54
  readonly largeTitle: {
75
55
  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";
56
+ readonly fontWeight: "normal";
57
+ readonly fontFamily: "JetBrains Mono";
80
58
  };
81
59
  readonly title1: {
82
60
  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";
61
+ readonly fontWeight: "normal";
62
+ readonly fontFamily: "JetBrains Mono";
87
63
  };
88
64
  readonly title2: {
89
65
  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";
66
+ readonly fontWeight: "normal";
67
+ readonly fontFamily: "JetBrains Mono";
94
68
  };
95
69
  readonly title3: {
96
70
  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";
71
+ readonly fontWeight: "bold";
72
+ readonly fontFamily: "JetBrains Mono";
101
73
  };
102
74
  readonly headline: {
103
75
  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";
76
+ readonly fontWeight: "600";
77
+ readonly fontFamily: "JetBrains Mono";
108
78
  };
109
79
  readonly body: {
110
80
  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";
81
+ readonly fontWeight: "normal";
82
+ readonly fontFamily: "JetBrains Mono";
115
83
  };
116
84
  readonly callout: {
117
85
  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";
86
+ readonly fontWeight: "normal";
87
+ readonly fontFamily: "JetBrains Mono";
122
88
  };
123
89
  readonly subheadline: {
124
90
  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";
91
+ readonly fontWeight: "normal";
92
+ readonly fontFamily: "JetBrains Mono";
129
93
  };
130
94
  readonly footnote: {
131
95
  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";
96
+ readonly fontWeight: "normal";
97
+ readonly fontFamily: "JetBrains Mono";
136
98
  };
137
99
  readonly caption: {
138
100
  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";
101
+ readonly fontWeight: "normal";
102
+ readonly fontFamily: "JetBrains Mono";
143
103
  };
144
104
  };
145
105
  export type { TypographyScale, TypographyVariant, TypographyVariantName, } from "./types";
package/dist/components.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDzB,CAAC;AAEX,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD3B,CAAC;AAEX,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}
package/dist/components.js CHANGED
@@ -2,144 +2,104 @@
2
2
  export const defaultTypographyScale = {
3
3
  largeTitle: {
4
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",
5
+ fontWeight: "normal",
6
+ fontFamily: "Inter var",
9
7
  },
10
8
  title1: {
11
9
  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",
10
+ fontWeight: "normal",
11
+ fontFamily: "Inter var",
16
12
  },
17
13
  title2: {
18
14
  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",
15
+ fontWeight: "normal",
16
+ fontFamily: "Inter var",
23
17
  },
24
18
  title3: {
25
19
  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",
20
+ fontWeight: "bold",
21
+ fontFamily: "Inter var",
30
22
  },
31
23
  headline: {
32
24
  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",
25
+ fontWeight: "600",
26
+ fontFamily: "Inter var",
37
27
  },
38
28
  body: {
39
29
  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",
30
+ fontWeight: "normal",
31
+ fontFamily: "Inter var",
44
32
  },
45
33
  callout: {
46
34
  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",
35
+ fontWeight: "normal",
36
+ fontFamily: "Inter var",
51
37
  },
52
38
  subheadline: {
53
39
  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",
40
+ fontWeight: "normal",
41
+ fontFamily: "Inter var",
58
42
  },
59
43
  footnote: {
60
44
  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",
45
+ fontWeight: "normal",
46
+ fontFamily: "Inter var",
65
47
  },
66
48
  caption: {
67
49
  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",
50
+ fontWeight: "normal",
51
+ fontFamily: "Inter var",
72
52
  },
73
53
  };
74
54
  export const monospaceTypographyScale = {
75
55
  largeTitle: {
76
56
  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",
57
+ fontWeight: "normal",
58
+ fontFamily: "JetBrains Mono",
81
59
  },
82
60
  title1: {
83
61
  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",
62
+ fontWeight: "normal",
63
+ fontFamily: "JetBrains Mono",
88
64
  },
89
65
  title2: {
90
66
  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",
67
+ fontWeight: "normal",
68
+ fontFamily: "JetBrains Mono",
95
69
  },
96
70
  title3: {
97
71
  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",
72
+ fontWeight: "bold",
73
+ fontFamily: "JetBrains Mono",
102
74
  },
103
75
  headline: {
104
76
  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",
77
+ fontWeight: "600",
78
+ fontFamily: "JetBrains Mono",
109
79
  },
110
80
  body: {
111
81
  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",
82
+ fontWeight: "normal",
83
+ fontFamily: "JetBrains Mono",
116
84
  },
117
85
  callout: {
118
86
  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",
87
+ fontWeight: "normal",
88
+ fontFamily: "JetBrains Mono",
123
89
  },
124
90
  subheadline: {
125
91
  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",
92
+ fontWeight: "normal",
93
+ fontFamily: "JetBrains Mono",
130
94
  },
131
95
  footnote: {
132
96
  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",
97
+ fontWeight: "normal",
98
+ fontFamily: "JetBrains Mono",
137
99
  },
138
100
  caption: {
139
101
  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",
102
+ fontWeight: "normal",
103
+ fontFamily: "JetBrains Mono",
144
104
  },
145
105
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umbra.ui/typography",
3
- "version": "0.2.0",
3
+ "version": "0.4.0",
4
4
  "description": "Typography components for Umbra UI",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -25,11 +25,6 @@
25
25
  "node": ">=16",
26
26
  "bun": ">=1.0"
27
27
  },
28
- "scripts": {
29
- "build": "tsc",
30
- "dev": "tsc --watch",
31
- "prepublishOnly": "npm run build"
32
- },
33
28
  "keywords": [
34
29
  "typography",
35
30
  "design-system",
@@ -42,5 +37,9 @@
42
37
  },
43
38
  "publishConfig": {
44
39
  "access": "public"
40
+ },
41
+ "scripts": {
42
+ "build": "tsc",
43
+ "dev": "tsc --watch"
45
44
  }
46
- }
45
+ }
package/src/components.ts CHANGED
@@ -3,166 +3,106 @@
3
3
  export const defaultTypographyScale = {
4
4
  largeTitle: {
5
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",
6
+ fontWeight: "normal",
7
+ fontFamily: "Inter var",
11
8
  },
12
9
  title1: {
13
10
  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",
11
+ fontWeight: "normal",
12
+ fontFamily: "Inter var",
19
13
  },
20
14
  title2: {
21
15
  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",
16
+ fontWeight: "normal",
17
+ fontFamily: "Inter var",
27
18
  },
28
19
  title3: {
29
20
  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",
21
+ fontWeight: "bold",
22
+ fontFamily: "Inter var",
35
23
  },
36
24
  headline: {
37
25
  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",
26
+ fontWeight: "600",
27
+ fontFamily: "Inter var",
43
28
  },
44
29
  body: {
45
30
  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",
31
+ fontWeight: "normal",
32
+ fontFamily: "Inter var",
51
33
  },
52
34
  callout: {
53
35
  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",
36
+ fontWeight: "normal",
37
+ fontFamily: "Inter var",
59
38
  },
60
39
  subheadline: {
61
40
  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",
41
+ fontWeight: "normal",
42
+ fontFamily: "Inter var",
67
43
  },
68
44
  footnote: {
69
45
  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",
46
+ fontWeight: "normal",
47
+ fontFamily: "Inter var",
75
48
  },
76
49
  caption: {
77
50
  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",
51
+ fontWeight: "normal",
52
+ fontFamily: "Inter var",
83
53
  },
84
54
  } as const;
85
55
 
86
56
  export const monospaceTypographyScale = {
87
57
  largeTitle: {
88
58
  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",
59
+ fontWeight: "normal",
60
+ fontFamily: "JetBrains Mono",
94
61
  },
95
62
  title1: {
96
63
  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",
64
+ fontWeight: "normal",
65
+ fontFamily: "JetBrains Mono",
102
66
  },
103
67
  title2: {
104
68
  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",
69
+ fontWeight: "normal",
70
+ fontFamily: "JetBrains Mono",
110
71
  },
111
72
  title3: {
112
73
  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",
74
+ fontWeight: "bold",
75
+ fontFamily: "JetBrains Mono",
118
76
  },
119
77
  headline: {
120
78
  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",
79
+ fontWeight: "600",
80
+ fontFamily: "JetBrains Mono",
126
81
  },
127
82
  body: {
128
83
  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",
84
+ fontWeight: "normal",
85
+ fontFamily: "JetBrains Mono",
134
86
  },
135
87
  callout: {
136
88
  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",
89
+ fontWeight: "normal",
90
+ fontFamily: "JetBrains Mono",
142
91
  },
143
92
  subheadline: {
144
93
  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",
94
+ fontWeight: "normal",
95
+ fontFamily: "JetBrains Mono",
150
96
  },
151
97
  footnote: {
152
98
  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",
99
+ fontWeight: "normal",
100
+ fontFamily: "JetBrains Mono",
158
101
  },
159
102
  caption: {
160
103
  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",
104
+ fontWeight: "normal",
105
+ fontFamily: "JetBrains Mono",
166
106
  },
167
107
  } as const;
168
108
 
package/src/fonts.css CHANGED
@@ -2,38 +2,42 @@
2
2
 
3
3
  /* Inter Variable Font */
4
4
  @font-face {
5
- font-family: 'Inter var';
5
+ font-family: "Inter var";
6
6
  font-weight: 100 900;
7
7
  font-style: normal;
8
8
  font-display: swap;
9
- src: url('./fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
10
- font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
9
+ src: url("./fonts/Inter-VariableFont_opsz,wght.ttf")
10
+ format("truetype-variations");
11
+ font-feature-settings: "cv02", "cv03", "cv04", "cv11";
11
12
  }
12
13
 
13
14
  @font-face {
14
- font-family: 'Inter var';
15
+ font-family: "Inter var";
15
16
  font-weight: 100 900;
16
17
  font-style: italic;
17
18
  font-display: swap;
18
- src: url('./fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
19
- font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
19
+ src: url("./fonts/Inter-Italic-VariableFont_opsz,wght.ttf")
20
+ format("truetype-variations");
21
+ font-feature-settings: "cv02", "cv03", "cv04", "cv11";
20
22
  }
21
23
 
22
24
  /* JetBrains Mono Variable Font */
23
25
  @font-face {
24
- font-family: 'JetBrains Mono';
26
+ font-family: "JetBrains Mono";
25
27
  font-weight: 100 800;
26
28
  font-style: normal;
27
29
  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
+ src: url("./fonts/JetBrainsMono-VariableFont_wght.ttf")
31
+ format("truetype-variations");
32
+ font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
30
33
  }
31
34
 
32
35
  @font-face {
33
- font-family: 'JetBrains Mono';
36
+ font-family: "JetBrains Mono";
34
37
  font-weight: 100 800;
35
38
  font-style: italic;
36
39
  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
- }
40
+ src: url("./fonts/JetBrainsMono-Italic-VariableFont_wght.ttf")
41
+ format("truetype-variations");
42
+ font-feature-settings: "liga" 1, "calt" 1, "zero" 1;
43
+ }
package/src/typography.css CHANGED
@@ -1,72 +1,26 @@
1
- /* Import font face declarations */
2
1
  @import "./fonts.css";
3
-
4
2
  :root {
3
+ /* These sizes are based on apple's text styles for somoma */
5
4
  --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 */
5
+ --large-title: calc(2 * var(--base-font-size)); /* 26px */
6
+ --title1: calc(1.6923 * var(--base-font-size)); /* 22px */
7
+ --title2: calc(1.3077 * var(--base-font-size)); /* 17px */
8
+ --title3: calc(1.1538 * var(--base-font-size)); /* 15px */
14
9
  --headline: var(--base-font-size); /* 13px */
15
10
  --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;
11
+ --callout: calc(0.9231 * var(--base-font-size)); /* 12px */
12
+ --subheadline: calc(0.8462 * var(--base-font-size)); /* 11px */
13
+ --footnote: calc(0.7692 * var(--base-font-size)); /* 10px */
14
+ --caption1: calc(0.7692 * var(--base-font-size)); /* 10px */
15
+ --caption2: calc(0.7692 * var(--base-font-size)); /* 10px */
44
16
  }
45
17
 
46
- @media screen and (max-width: 480px) {
18
+ @media (max-width: 480px) and (pointer: coarse) {
47
19
  :root {
48
20
  --base-font-size: 17px;
49
21
  }
50
22
  }
51
23
 
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
24
  *,
71
25
  *::before,
72
26
  *::after {
@@ -74,306 +28,136 @@
74
28
  }
75
29
 
76
30
  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;
31
+ font-size: var(--base-font-size); /* Set the base font size */
81
32
  }
82
33
 
83
34
  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);
35
+ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
36
+ Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
37
+ sans-serif;
87
38
  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
- }
39
+ -webkit-font-smoothing: antialiased;
40
+ -moz-osx-font-smoothing: grayscale;
103
41
  }
104
42
 
105
- /* Title styles with variable font weights */
106
43
  .largeTitle {
107
44
  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);
45
+ font-family: "Inter var";
46
+ font-weight: normal;
112
47
  }
113
48
 
114
49
  .title1 {
115
50
  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);
51
+ font-family: "Inter var";
52
+ font-weight: normal;
120
53
  }
121
54
 
122
55
  .title2 {
123
56
  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);
57
+ font-family: "Inter var";
58
+ font-weight: normal;
128
59
  }
129
60
 
130
61
  .title3 {
131
62
  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);
63
+ font-family: "Inter var";
64
+ font-weight: bold;
136
65
  }
137
66
 
138
- /* Body text styles */
139
67
  .headline {
140
68
  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);
69
+ font-family: "Inter var";
70
+ font-weight: 600;
145
71
  }
146
72
 
147
73
  .body {
148
74
  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);
75
+ font-family: "Inter var";
76
+ font-weight: normal;
153
77
  }
154
78
 
155
79
  .callout {
156
80
  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);
81
+ font-family: "Inter var";
82
+ font-weight: normal;
161
83
  }
162
84
 
163
85
  .subheadline {
164
86
  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);
87
+ font-family: "Inter var";
88
+ font-weight: normal;
169
89
  }
170
90
 
171
- /* Small text styles */
172
91
  .footnote {
173
92
  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);
93
+ font-family: "Inter var";
94
+ font-weight: normal;
178
95
  }
179
96
 
180
97
  .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);
98
+ font-size: var(--caption1);
99
+ font-family: "Inter var";
100
+ font-weight: normal;
186
101
  }
187
102
 
188
- /* Monospace typography with variable font support */
103
+ /* Monospace typography */
104
+
189
105
  .largeTitle-mono {
190
106
  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;
107
+ font-family: "JetBrains Mono";
108
+ font-weight: normal;
199
109
  }
200
110
 
201
111
  .title1-mono {
202
112
  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;
113
+ font-family: "JetBrains Mono";
114
+ font-weight: normal;
211
115
  }
212
116
 
213
117
  .title2-mono {
214
118
  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;
119
+ font-family: "JetBrains Mono";
120
+ font-weight: normal;
223
121
  }
224
122
 
225
123
  .title3-mono {
226
124
  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;
125
+ font-family: "JetBrains Mono";
126
+ font-weight: bold;
235
127
  }
236
128
 
237
129
  .headline-mono {
238
130
  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;
131
+ font-family: "JetBrains Mono";
132
+ font-weight: 600;
247
133
  }
248
134
 
249
135
  .body-mono {
250
136
  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;
137
+ font-family: "JetBrains Mono";
138
+ font-weight: normal;
259
139
  }
260
140
 
261
141
  .callout-mono {
262
142
  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;
143
+ font-family: "JetBrains Mono";
144
+ font-weight: normal;
271
145
  }
272
146
 
273
147
  .subheadline-mono {
274
148
  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;
149
+ font-family: "JetBrains Mono";
150
+ font-weight: normal;
283
151
  }
284
152
 
285
153
  .footnote-mono {
286
154
  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;
155
+ font-family: "JetBrains Mono";
156
+ font-weight: normal;
295
157
  }
296
158
 
297
159
  .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%;
160
+ font-size: var(--caption1);
161
+ font-family: "JetBrains Mono";
162
+ font-weight: normal;
379
163
  }