@offlinemediainc/offline-ui 0.1.0 → 0.1.2

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 (2) hide show
  1. package/dist/styles.css +424 -310
  2. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -1,313 +1,427 @@
1
1
  /* @offlinemediainc/offline-ui Theme CSS */
2
+ /* Compatible with Tailwind v4 + Turbopack + Next.js 16 */
2
3
 
3
- /* Tailwind v4 theme configuration - maps CSS variables to Tailwind colors */
4
- /* For Tailwind v4 consumers, add to your CSS: @source "../node_modules/@offlinemediainc/offline-ui/dist/**/*.js"; */
5
-
6
- @layer base {
7
- :root {
8
- --background: 0 0% 100%;
9
- --foreground: 0 0% 3.9%;
10
- --card: 0 0% 100%;
11
- --card-foreground: 0 0% 3.9%;
12
- --popover: 0 0% 100%;
13
- --popover-foreground: 0 0% 3.9%;
14
- --primary: 0 0% 9%;
15
- --primary-foreground: 0 0% 98%;
16
- --secondary: 0 0% 96.1%;
17
- --secondary-foreground: 0 0% 9%;
18
- --muted: 0 0% 96.1%;
19
- --muted-foreground: 0 0% 45.1%;
20
- --accent: 0 0% 96.1%;
21
- --accent-foreground: 0 0% 9%;
22
- --destructive: 0 84.2% 60.2%;
23
- --destructive-foreground: 0 0% 98%;
24
- --border: 0 0% 89.8%;
25
- --input: 0 0% 89.8%;
26
- --ring: 0 0% 3.9%;
27
- --chart-1: 12 76% 61%;
28
- --chart-2: 173 58% 39%;
29
- --chart-3: 197 37% 24%;
30
- --chart-4: 43 74% 66%;
31
- --chart-5: 27 87% 67%;
32
- --radius: 0.375rem;
33
- /* Offline brand sidebar - black background with yellow accents */
34
- --sidebar-background: 0 0% 10%; /* #191919 */
35
- --sidebar-foreground: 0 0% 98%; /* slightly off-white for softer text */
36
- --sidebar-primary: 39 90% 46%; /* #de8e0f yellow */
37
- --sidebar-primary-foreground: 0 0% 100%;
38
- --sidebar-accent: 0 0% 16%; /* #292929 - subtle hover state */
39
- --sidebar-accent-foreground: 0 0% 100%;
40
- --sidebar-border: 0 0% 30%; /* #4a4a4a - more visible for connector lines */
41
- --sidebar-ring: 39 90% 46%; /* yellow ring */
42
- --colors-yellow-25: #fff2d8;
43
- --colors-yellow-50: #ffe9bd;
44
- --colors-yellow-100: #ffd386;
45
- --colors-yellow-200: #ffbd54;
46
- --colors-yellow-300: #f0a52c;
47
- --colors-yellow-400: #de8e0f;
48
- --colors-yellow-500: #c57900;
49
- --colors-yellow-600: #a76700;
50
- --colors-yellow-700: #835100;
51
- --colors-yellow-800: #5c3900;
52
- --colors-yellow-900: #331f00;
53
- --colors-blue-25: #d8e7ff;
54
- --colors-blue-50: #bed6ff;
55
- --colors-blue-100: #85afff;
56
- --colors-blue-200: #508bff;
57
- --colors-blue-300: #236aff;
58
- --colors-blue-400: #004fff;
59
- --colors-blue-500: #0046e0;
60
- --colors-blue-600: #003bbb;
61
- --colors-blue-700: #002e91;
62
- --colors-blue-800: #001f63;
63
- --colors-blue-900: #001033;
64
- --colors-gray-25: #f2f2f2;
65
- --colors-gray-50: #ececec;
66
- --colors-gray-100: #dfdfdf;
67
- --colors-gray-200: #c6c6c6;
68
- --colors-gray-300: #aeaeae;
69
- --colors-gray-400: #959595;
70
- --colors-gray-500: #7c7c7c;
71
- --colors-gray-600: #636363;
72
- --colors-gray-700: #4a4a4a;
73
- --colors-gray-800: #323232;
74
- --colors-gray-900: #191919;
75
- --colors-red-400: #d31a0c;
76
- --semantic-success500: #099250;
77
- --card-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06),
78
- 0px 2px 2px 0px rgba(0, 0, 0, 0.05),
79
- 0px 6px 3px 0px rgba(0, 0, 0, 0.03),
80
- 0px 10px 4px 0px rgba(0, 0, 0, 0.01),
81
- 0px 15px 4px 0px rgba(0, 0, 0, 0);
82
- --new-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08),
83
- 0px 4px 8px 0px rgba(0, 0, 0, 0.06),
84
- 0px 8px 16px 0px rgba(0, 0, 0, 0.04);
85
- --tag-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
86
- 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
87
- }
88
- .dark {
89
- --sidebar-background: 240 5.9% 10%;
90
- --sidebar-foreground: 240 4.8% 95.9%;
91
- --sidebar-primary: 224.3 76.3% 48%;
92
- --sidebar-primary-foreground: 0 0% 100%;
93
- --sidebar-accent: 240 3.7% 15.9%;
94
- --sidebar-accent-foreground: 240 4.8% 95.9%;
95
- --sidebar-border: 240 3.7% 15.9%;
96
- --sidebar-ring: 217.2 91.2% 59.8%;
97
- }
98
- }
99
-
100
- @layer base {
101
- * {
102
- border-color: hsl(var(--border));
103
- }
104
- html {
105
- font-size: 106.25%; /* 17px root instead of 16px - scales all rem values */
106
- }
107
- body {
108
- background-color: hsl(var(--background));
109
- color: hsl(var(--foreground));
110
- font-family:
111
- var(--font-satoshi),
112
- "Satoshi",
113
- "Inter",
114
- "Helvetica Neue",
115
- Arial,
116
- sans-serif;
117
- letter-spacing: 0.02em;
118
- color: var(--colors-gray-900);
119
- }
120
- }
121
-
122
- @layer utilities {
123
- .text-balance {
124
- text-wrap: balance;
125
- }
126
- .shadow-card {
127
- box-shadow: var(--card-shadow);
128
- }
129
- .shadow-elevated {
130
- box-shadow: var(--new-shadow);
131
- }
132
- .shadow-tag {
133
- box-shadow: var(--tag-shadow);
134
- }
135
- .surface-premium {
136
- position: relative;
137
- border-radius: calc(var(--radius) + 0.125rem);
138
- border: 3px solid transparent;
139
- background:
140
- linear-gradient(#ffffff, #ffffff) padding-box,
141
- linear-gradient(92deg, #bca687 2.57%, #b8a284 8.96%, #f9f2e8 10.5%, #c1b5a2 32.05%, #ab8f76 35.52%, #735b42 65.89%, #a68b6e 74%, #b79a7a 90.26%, #8f7e61 98.62%)
142
- border-box;
143
- box-shadow: var(--card-shadow);
144
- }
145
- .badge-premium {
146
- background-color: #000000;
147
- border: 1px solid #323232;
148
- border-radius: 0.5rem;
149
- color: var(--colors-yellow-400);
150
- display: inline-flex;
151
- align-items: center;
152
- gap: 0.5rem;
153
- padding: 0.5rem 1.5rem;
154
- position: relative;
155
- overflow: hidden;
156
- }
157
- .badge-premium span {
158
- font-weight: 600;
159
- font-size: 0.75rem;
160
- letter-spacing: 0.15em;
161
- background: linear-gradient(135deg, #a76700 0%, #ffd386 50%, #a76700 100%);
162
- -webkit-background-clip: text;
163
- background-clip: text;
164
- color: transparent;
165
- }
166
- .input-field {
167
- border-radius: 0.5rem;
168
- border: 1px solid var(--colors-gray-100);
169
- background-color: #ffffff;
170
- padding: 0.75rem 1rem;
171
- font-size: 1rem;
172
- line-height: 1.5rem;
173
- color: var(--colors-gray-900);
174
- transition: all 0.2s ease-in-out;
175
- }
176
- .input-field::placeholder {
177
- color: var(--colors-gray-400);
178
- }
179
- .input-field:hover {
180
- border-color: var(--colors-gray-200);
181
- }
182
- .input-field:focus-visible {
183
- outline: none;
184
- border-color: var(--colors-gray-900);
185
- box-shadow: 0 0 0 2px rgba(25, 25, 25, 0.12);
186
- }
187
- .input-field.error {
188
- border-color: var(--colors-red-400);
189
- box-shadow: 0 0 0 2px rgba(211, 26, 12, 0.1);
190
- }
191
- }
192
-
193
- @layer components {
194
- .display-large {
195
- font-family: var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif;
196
- font-size: 2.25rem;
197
- line-height: 1;
198
- font-weight: 800;
199
- letter-spacing: 0;
200
- }
201
- .display-medium {
202
- font-family: var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif;
203
- font-size: 2rem;
204
- line-height: 1;
205
- font-weight: 800;
206
- letter-spacing: 0;
207
- }
208
- .display-small {
209
- font-family: var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif;
210
- font-size: 1.8125rem;
211
- line-height: 1;
212
- font-weight: 800;
213
- letter-spacing: 0;
214
- }
215
- .headline-large {
216
- font-family: var(--font-satoshi), sans-serif;
217
- font-size: 1.625rem;
218
- line-height: 2rem;
219
- font-weight: 700;
220
- }
221
- .headline-medium {
222
- font-family: var(--font-satoshi), sans-serif;
223
- font-size: 1.4375rem;
224
- line-height: 1.75rem;
225
- font-weight: 700;
226
- }
227
- .headline-small {
228
- font-family: var(--font-satoshi), sans-serif;
229
- font-size: 1.25rem;
230
- line-height: 1.5rem;
231
- font-weight: 700;
232
- }
233
- .title-large {
234
- font-family: var(--font-satoshi), sans-serif;
235
- font-size: 1.125rem;
236
- line-height: 1.375rem;
237
- font-weight: 700;
238
- }
239
- .title-medium {
240
- font-family: var(--font-satoshi), sans-serif;
241
- font-size: 1rem;
242
- line-height: 1.25rem;
243
- font-weight: 700;
244
- }
245
- .title-small {
246
- font-family: var(--font-satoshi), sans-serif;
247
- font-size: 0.875rem;
248
- line-height: 1.125rem;
249
- font-weight: 700;
250
- }
251
- .body-large {
252
- font-family: var(--font-satoshi), sans-serif;
253
- font-size: 1rem;
254
- line-height: 1.5rem;
255
- font-weight: 500;
256
- }
257
- .body-medium {
258
- font-family: var(--font-satoshi), sans-serif;
259
- font-size: 0.875rem;
260
- line-height: 1.25rem;
261
- font-weight: 500;
262
- }
263
- .body-small {
264
- font-family: var(--font-satoshi), sans-serif;
265
- font-size: 0.75rem;
266
- line-height: 1rem;
267
- font-weight: 500;
268
- }
269
- .body-x-small {
270
- font-family: var(--font-satoshi), sans-serif;
271
- font-size: 0.625rem;
272
- line-height: 0.875rem;
273
- font-weight: 500;
274
- }
275
- .label-large {
276
- font-family: var(--font-satoshi), sans-serif;
277
- font-size: 0.875rem;
278
- line-height: 1.125rem;
279
- font-weight: 700;
280
- }
281
- .label-medium {
282
- font-family: var(--font-satoshi), sans-serif;
283
- font-size: 0.75rem;
284
- line-height: 1rem;
285
- font-weight: 700;
286
- }
287
- .label-small {
288
- font-family: var(--font-satoshi), sans-serif;
289
- font-size: 0.625rem;
290
- line-height: 0.875rem;
291
- font-weight: 700;
292
- }
293
- .nav-label {
294
- font-family: var(--font-satoshi), sans-serif;
295
- font-size: 0.75rem;
296
- font-weight: 800;
297
- letter-spacing: 0.33em;
298
- }
299
- .nav-link {
300
- font-family: var(--font-satoshi), sans-serif;
301
- font-size: 1.375rem;
302
- font-weight: 500;
303
- transition: opacity 0.3s ease;
304
- }
305
- .nav-link:hover {
306
- opacity: 0.72;
307
- }
308
- .stat-mono {
309
- font-family: var(--font-dm-mono), "DM Mono", monospace;
310
- font-weight: 500;
311
- letter-spacing: 0.04em;
312
- }
4
+ /*
5
+ * IMPORTANT: This file intentionally does NOT use @layer directives.
6
+ * Using @layer causes PostCSS conflicts when consumers import this file
7
+ * into their Tailwind v4 projects (Turbopack re-processes the layers).
8
+ */
9
+
10
+ /* ============================================
11
+ CSS Variables (Theme Tokens)
12
+ ============================================ */
13
+
14
+ :root {
15
+ --background: 0 0% 100%;
16
+ --foreground: 0 0% 3.9%;
17
+ --card: 0 0% 100%;
18
+ --card-foreground: 0 0% 3.9%;
19
+ --popover: 0 0% 100%;
20
+ --popover-foreground: 0 0% 3.9%;
21
+ --primary: 0 0% 9%;
22
+ --primary-foreground: 0 0% 98%;
23
+ --secondary: 0 0% 96.1%;
24
+ --secondary-foreground: 0 0% 9%;
25
+ --muted: 0 0% 96.1%;
26
+ --muted-foreground: 0 0% 45.1%;
27
+ --accent: 0 0% 96.1%;
28
+ --accent-foreground: 0 0% 9%;
29
+ --destructive: 0 84.2% 60.2%;
30
+ --destructive-foreground: 0 0% 98%;
31
+ --border: 0 0% 89.8%;
32
+ --input: 0 0% 89.8%;
33
+ --ring: 0 0% 3.9%;
34
+ --chart-1: 12 76% 61%;
35
+ --chart-2: 173 58% 39%;
36
+ --chart-3: 197 37% 24%;
37
+ --chart-4: 43 74% 66%;
38
+ --chart-5: 27 87% 67%;
39
+ --radius: 0.375rem;
40
+
41
+ /* Sidebar dimensions */
42
+ --sidebar-width: 16rem;
43
+ --sidebar-width-icon: 3rem;
44
+
45
+ /* Offline brand sidebar - black background with yellow accents */
46
+ --sidebar-background: 0 0% 10%;
47
+ --sidebar-foreground: 0 0% 98%;
48
+ --sidebar-primary: 39 90% 46%;
49
+ --sidebar-primary-foreground: 0 0% 100%;
50
+ --sidebar-accent: 0 0% 16%;
51
+ --sidebar-accent-foreground: 0 0% 100%;
52
+ --sidebar-border: 0 0% 30%;
53
+ --sidebar-ring: 39 90% 46%;
54
+
55
+ /* Offline brand colors */
56
+ --colors-yellow-25: #fff2d8;
57
+ --colors-yellow-50: #ffe9bd;
58
+ --colors-yellow-100: #ffd386;
59
+ --colors-yellow-200: #ffbd54;
60
+ --colors-yellow-300: #f0a52c;
61
+ --colors-yellow-400: #de8e0f;
62
+ --colors-yellow-500: #c57900;
63
+ --colors-yellow-600: #a76700;
64
+ --colors-yellow-700: #835100;
65
+ --colors-yellow-800: #5c3900;
66
+ --colors-yellow-900: #331f00;
67
+
68
+ --colors-blue-25: #d8e7ff;
69
+ --colors-blue-50: #bed6ff;
70
+ --colors-blue-100: #85afff;
71
+ --colors-blue-200: #508bff;
72
+ --colors-blue-300: #236aff;
73
+ --colors-blue-400: #004fff;
74
+ --colors-blue-500: #0046e0;
75
+ --colors-blue-600: #003bbb;
76
+ --colors-blue-700: #002e91;
77
+ --colors-blue-800: #001f63;
78
+ --colors-blue-900: #001033;
79
+
80
+ --colors-gray-25: #f2f2f2;
81
+ --colors-gray-50: #ececec;
82
+ --colors-gray-100: #dfdfdf;
83
+ --colors-gray-200: #c6c6c6;
84
+ --colors-gray-300: #aeaeae;
85
+ --colors-gray-400: #959595;
86
+ --colors-gray-500: #7c7c7c;
87
+ --colors-gray-600: #636363;
88
+ --colors-gray-700: #4a4a4a;
89
+ --colors-gray-800: #323232;
90
+ --colors-gray-900: #191919;
91
+
92
+ --colors-red-400: #d31a0c;
93
+ --semantic-success500: #099250;
94
+
95
+ /* Shadows */
96
+ --card-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06),
97
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.05),
98
+ 0px 6px 3px 0px rgba(0, 0, 0, 0.03),
99
+ 0px 10px 4px 0px rgba(0, 0, 0, 0.01),
100
+ 0px 15px 4px 0px rgba(0, 0, 0, 0);
101
+ --new-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08),
102
+ 0px 4px 8px 0px rgba(0, 0, 0, 0.06),
103
+ 0px 8px 16px 0px rgba(0, 0, 0, 0.04);
104
+ --tag-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08),
105
+ 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
106
+ }
107
+
108
+ .dark {
109
+ --sidebar-background: 240 5.9% 10%;
110
+ --sidebar-foreground: 240 4.8% 95.9%;
111
+ --sidebar-primary: 224.3 76.3% 48%;
112
+ --sidebar-primary-foreground: 0 0% 100%;
113
+ --sidebar-accent: 240 3.7% 15.9%;
114
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
115
+ --sidebar-border: 240 3.7% 15.9%;
116
+ --sidebar-ring: 217.2 91.2% 59.8%;
117
+ }
118
+
119
+ /* ============================================
120
+ Base Styles
121
+ ============================================ */
122
+
123
+ * {
124
+ border-color: hsl(var(--border));
125
+ }
126
+
127
+ html {
128
+ font-size: 106.25%; /* 17px root instead of 16px */
129
+ }
130
+
131
+ body {
132
+ background-color: hsl(var(--background));
133
+ color: hsl(var(--foreground));
134
+ font-family:
135
+ var(--font-satoshi),
136
+ "Satoshi",
137
+ "Inter",
138
+ "Helvetica Neue",
139
+ Arial,
140
+ sans-serif;
141
+ letter-spacing: 0.02em;
142
+ color: var(--colors-gray-900);
143
+ }
144
+
145
+ /* ============================================
146
+ Sidebar Utilities (required for OfflineSidebar)
147
+ Tailwind v4 @source doesn't generate arbitrary value classes
148
+ ============================================ */
149
+
150
+ .w-\[--sidebar-width\] {
151
+ width: var(--sidebar-width);
152
+ }
153
+
154
+ .w-\[--sidebar-width-icon\] {
155
+ width: var(--sidebar-width-icon);
156
+ }
157
+
158
+ .w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
159
+ width: calc(var(--sidebar-width-icon) + 1rem);
160
+ }
161
+
162
+ .w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
163
+ width: calc(var(--sidebar-width-icon) + 1rem + 2px);
164
+ }
165
+
166
+ .bg-sidebar {
167
+ background-color: hsl(var(--sidebar-background));
168
+ }
169
+
170
+ .text-sidebar-foreground {
171
+ color: hsl(var(--sidebar-foreground));
172
+ }
173
+
174
+ .text-sidebar-primary {
175
+ color: hsl(var(--sidebar-primary));
176
+ }
177
+
178
+ .text-sidebar-primary-foreground {
179
+ color: hsl(var(--sidebar-primary-foreground));
180
+ }
181
+
182
+ .bg-sidebar-accent {
183
+ background-color: hsl(var(--sidebar-accent));
184
+ }
185
+
186
+ .text-sidebar-accent-foreground {
187
+ color: hsl(var(--sidebar-accent-foreground));
188
+ }
189
+
190
+ .bg-sidebar-primary {
191
+ background-color: hsl(var(--sidebar-primary));
192
+ }
193
+
194
+ .border-sidebar-border {
195
+ border-color: hsl(var(--sidebar-border));
196
+ }
197
+
198
+ .ring-sidebar-ring {
199
+ --tw-ring-color: hsl(var(--sidebar-ring));
200
+ }
201
+
202
+ /* ============================================
203
+ Utility Classes
204
+ ============================================ */
205
+
206
+ .text-balance {
207
+ text-wrap: balance;
208
+ }
209
+
210
+ .shadow-card {
211
+ box-shadow: var(--card-shadow);
212
+ }
213
+
214
+ .shadow-elevated {
215
+ box-shadow: var(--new-shadow);
216
+ }
217
+
218
+ .shadow-tag {
219
+ box-shadow: var(--tag-shadow);
220
+ }
221
+
222
+ .surface-premium {
223
+ position: relative;
224
+ border-radius: calc(var(--radius) + 0.125rem);
225
+ border: 3px solid transparent;
226
+ background:
227
+ linear-gradient(#ffffff, #ffffff) padding-box,
228
+ linear-gradient(92deg, #bca687 2.57%, #b8a284 8.96%, #f9f2e8 10.5%, #c1b5a2 32.05%, #ab8f76 35.52%, #735b42 65.89%, #a68b6e 74%, #b79a7a 90.26%, #8f7e61 98.62%)
229
+ border-box;
230
+ box-shadow: var(--card-shadow);
231
+ }
232
+
233
+ .badge-premium {
234
+ background-color: #000000;
235
+ border: 1px solid #323232;
236
+ border-radius: 0.5rem;
237
+ color: var(--colors-yellow-400);
238
+ display: inline-flex;
239
+ align-items: center;
240
+ gap: 0.5rem;
241
+ padding: 0.5rem 1.5rem;
242
+ position: relative;
243
+ overflow: hidden;
244
+ }
245
+
246
+ .badge-premium span {
247
+ font-weight: 600;
248
+ font-size: 0.75rem;
249
+ letter-spacing: 0.15em;
250
+ background: linear-gradient(135deg, #a76700 0%, #ffd386 50%, #a76700 100%);
251
+ -webkit-background-clip: text;
252
+ background-clip: text;
253
+ color: transparent;
254
+ }
255
+
256
+ .input-field {
257
+ border-radius: 0.5rem;
258
+ border: 1px solid var(--colors-gray-100);
259
+ background-color: #ffffff;
260
+ padding: 0.75rem 1rem;
261
+ font-size: 1rem;
262
+ line-height: 1.5rem;
263
+ color: var(--colors-gray-900);
264
+ transition: all 0.2s ease-in-out;
265
+ }
266
+
267
+ .input-field::placeholder {
268
+ color: var(--colors-gray-400);
269
+ }
270
+
271
+ .input-field:hover {
272
+ border-color: var(--colors-gray-200);
273
+ }
274
+
275
+ .input-field:focus-visible {
276
+ outline: none;
277
+ border-color: var(--colors-gray-900);
278
+ box-shadow: 0 0 0 2px rgba(25, 25, 25, 0.12);
279
+ }
280
+
281
+ .input-field.error {
282
+ border-color: var(--colors-red-400);
283
+ box-shadow: 0 0 0 2px rgba(211, 26, 12, 0.1);
284
+ }
285
+
286
+ /* ============================================
287
+ Typography Classes
288
+ ============================================ */
289
+
290
+ .display-large {
291
+ font-family: var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif;
292
+ font-size: 2.25rem;
293
+ line-height: 1;
294
+ font-weight: 800;
295
+ letter-spacing: 0;
296
+ }
297
+
298
+ .display-medium {
299
+ font-family: var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif;
300
+ font-size: 2rem;
301
+ line-height: 1;
302
+ font-weight: 800;
303
+ letter-spacing: 0;
304
+ }
305
+
306
+ .display-small {
307
+ font-family: var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif;
308
+ font-size: 1.8125rem;
309
+ line-height: 1;
310
+ font-weight: 800;
311
+ letter-spacing: 0;
312
+ }
313
+
314
+ .headline-large {
315
+ font-family: var(--font-satoshi), sans-serif;
316
+ font-size: 1.625rem;
317
+ line-height: 2rem;
318
+ font-weight: 700;
319
+ }
320
+
321
+ .headline-medium {
322
+ font-family: var(--font-satoshi), sans-serif;
323
+ font-size: 1.4375rem;
324
+ line-height: 1.75rem;
325
+ font-weight: 700;
326
+ }
327
+
328
+ .headline-small {
329
+ font-family: var(--font-satoshi), sans-serif;
330
+ font-size: 1.25rem;
331
+ line-height: 1.5rem;
332
+ font-weight: 700;
333
+ }
334
+
335
+ .title-large {
336
+ font-family: var(--font-satoshi), sans-serif;
337
+ font-size: 1.125rem;
338
+ line-height: 1.375rem;
339
+ font-weight: 700;
340
+ }
341
+
342
+ .title-medium {
343
+ font-family: var(--font-satoshi), sans-serif;
344
+ font-size: 1rem;
345
+ line-height: 1.25rem;
346
+ font-weight: 700;
347
+ }
348
+
349
+ .title-small {
350
+ font-family: var(--font-satoshi), sans-serif;
351
+ font-size: 0.875rem;
352
+ line-height: 1.125rem;
353
+ font-weight: 700;
354
+ }
355
+
356
+ .body-large {
357
+ font-family: var(--font-satoshi), sans-serif;
358
+ font-size: 1rem;
359
+ line-height: 1.5rem;
360
+ font-weight: 500;
361
+ }
362
+
363
+ .body-medium {
364
+ font-family: var(--font-satoshi), sans-serif;
365
+ font-size: 0.875rem;
366
+ line-height: 1.25rem;
367
+ font-weight: 500;
368
+ }
369
+
370
+ .body-small {
371
+ font-family: var(--font-satoshi), sans-serif;
372
+ font-size: 0.75rem;
373
+ line-height: 1rem;
374
+ font-weight: 500;
375
+ }
376
+
377
+ .body-x-small {
378
+ font-family: var(--font-satoshi), sans-serif;
379
+ font-size: 0.625rem;
380
+ line-height: 0.875rem;
381
+ font-weight: 500;
382
+ }
383
+
384
+ .label-large {
385
+ font-family: var(--font-satoshi), sans-serif;
386
+ font-size: 0.875rem;
387
+ line-height: 1.125rem;
388
+ font-weight: 700;
389
+ }
390
+
391
+ .label-medium {
392
+ font-family: var(--font-satoshi), sans-serif;
393
+ font-size: 0.75rem;
394
+ line-height: 1rem;
395
+ font-weight: 700;
396
+ }
397
+
398
+ .label-small {
399
+ font-family: var(--font-satoshi), sans-serif;
400
+ font-size: 0.625rem;
401
+ line-height: 0.875rem;
402
+ font-weight: 700;
403
+ }
404
+
405
+ .nav-label {
406
+ font-family: var(--font-satoshi), sans-serif;
407
+ font-size: 0.75rem;
408
+ font-weight: 800;
409
+ letter-spacing: 0.33em;
410
+ }
411
+
412
+ .nav-link {
413
+ font-family: var(--font-satoshi), sans-serif;
414
+ font-size: 1.375rem;
415
+ font-weight: 500;
416
+ transition: opacity 0.3s ease;
417
+ }
418
+
419
+ .nav-link:hover {
420
+ opacity: 0.72;
421
+ }
422
+
423
+ .stat-mono {
424
+ font-family: var(--font-dm-mono), "DM Mono", monospace;
425
+ font-weight: 500;
426
+ letter-spacing: 0.04em;
313
427
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@offlinemediainc/offline-ui",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "private": false,
5
5
  "description": "Offline Media design system components",
6
6
  "license": "MIT",