@offlinemediainc/offline-ui 0.1.0 → 0.1.1

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 +13 -12
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.1",
4
4
  "private": false,
5
5
  "description": "Offline Media design system components",
6
6
  "license": "MIT",
@@ -31,6 +31,17 @@
31
31
  "sideEffects": [
32
32
  "**/*.css"
33
33
  ],
34
+ "scripts": {
35
+ "dev": "next dev",
36
+ "build": "next build",
37
+ "build:lib": "tsup && cp src/styles/theme.css dist/styles.css",
38
+ "start": "next start",
39
+ "lint": "eslint",
40
+ "storybook": "storybook dev -p 6006",
41
+ "build-storybook": "storybook build",
42
+ "prepublishOnly": "pnpm run build:lib",
43
+ "chromatic": "chromatic --exit-zero-on-changes"
44
+ },
34
45
  "peerDependencies": {
35
46
  "react": "^18.0.0 || ^19.0.0",
36
47
  "react-dom": "^18.0.0 || ^19.0.0",
@@ -85,15 +96,5 @@
85
96
  "typescript": "^5",
86
97
  "vite": "^7.3.1",
87
98
  "vitest": "^4.0.16"
88
- },
89
- "scripts": {
90
- "dev": "next dev",
91
- "build": "next build",
92
- "build:lib": "tsup && cp src/styles/theme.css dist/styles.css",
93
- "start": "next start",
94
- "lint": "eslint",
95
- "storybook": "storybook dev -p 6006",
96
- "build-storybook": "storybook build",
97
- "chromatic": "chromatic --exit-zero-on-changes"
98
99
  }
99
- }
100
+ }