@noirmd/previewer 1.0.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.
@@ -0,0 +1,344 @@
1
+ /* NRpreviewer — Markdown typography
2
+ These styles work standalone without Tailwind.
3
+ If consumer has Tailwind, utility classes in JSX still apply on top. */
4
+
5
+ .md-h1 {
6
+ font-size: 1.5rem;
7
+ font-weight: 800;
8
+ letter-spacing: -0.025em;
9
+ line-height: 1.2;
10
+ margin: 1.5rem 0 0.75rem;
11
+ }
12
+ @media (min-width: 640px) {
13
+ .md-h1 { font-size: 1.875rem; }
14
+ }
15
+ @media (min-width: 768px) {
16
+ .md-h1 { font-size: 2.25rem; }
17
+ }
18
+
19
+ .md-h2 {
20
+ font-size: 1.25rem;
21
+ font-weight: 700;
22
+ letter-spacing: -0.025em;
23
+ line-height: 1.25;
24
+ margin: 1.25rem 0 0.625rem;
25
+ }
26
+ @media (min-width: 640px) {
27
+ .md-h2 { font-size: 1.5rem; }
28
+ }
29
+ @media (min-width: 768px) {
30
+ .md-h2 { font-size: 1.875rem; }
31
+ }
32
+
33
+ .md-h3 {
34
+ font-size: 1.125rem;
35
+ font-weight: 700;
36
+ line-height: 1.3;
37
+ margin: 1rem 0 0.5rem;
38
+ }
39
+ @media (min-width: 640px) {
40
+ .md-h3 { font-size: 1.25rem; }
41
+ }
42
+ @media (min-width: 768px) {
43
+ .md-h3 { font-size: 1.5rem; }
44
+ }
45
+
46
+ .md-h4 {
47
+ font-size: 1rem;
48
+ font-weight: 700;
49
+ line-height: 1.35;
50
+ margin: 0.75rem 0 0.375rem;
51
+ }
52
+ @media (min-width: 640px) {
53
+ .md-h4 { font-size: 1.125rem; }
54
+ }
55
+ @media (min-width: 768px) {
56
+ .md-h4 { font-size: 1.25rem; }
57
+ }
58
+
59
+ .md-h5 {
60
+ font-size: 0.875rem;
61
+ font-weight: 600;
62
+ line-height: 1.4;
63
+ margin: 0.625rem 0 0.25rem;
64
+ }
65
+ @media (min-width: 640px) {
66
+ .md-h5 { font-size: 1rem; }
67
+ }
68
+ @media (min-width: 768px) {
69
+ .md-h5 { font-size: 1.125rem; }
70
+ }
71
+
72
+ .md-h6 {
73
+ font-size: 0.75rem;
74
+ font-weight: 600;
75
+ line-height: 1.4;
76
+ margin: 0.5rem 0 0.25rem;
77
+ }
78
+ @media (min-width: 640px) {
79
+ .md-h6 { font-size: 0.875rem; }
80
+ }
81
+ @media (min-width: 768px) {
82
+ .md-h6 { font-size: 1rem; }
83
+ }
84
+
85
+ .md-p {
86
+ font-size: 0.875rem;
87
+ line-height: 1.625;
88
+ margin: 0.75rem 0;
89
+ }
90
+ @media (min-width: 640px) {
91
+ .md-p { font-size: 1rem; }
92
+ }
93
+
94
+ /* ── Links ── */
95
+ .nr-prose a {
96
+ text-decoration: none !important;
97
+ color: var(--color-accent-primary, #0ea5e9);
98
+ transition: color 0.15s;
99
+ }
100
+ .nr-prose a:hover {
101
+ text-decoration: underline !important;
102
+ color: var(--color-accent-hover, #38bdf8);
103
+ }
104
+
105
+ /* ── Lists ── */
106
+ .nr-prose ul,
107
+ .nr-prose ol {
108
+ list-style-type: disc;
109
+ margin: 0.75rem 0;
110
+ padding-left: 1.5rem;
111
+ font-size: 0.875rem;
112
+ line-height: 1.625;
113
+ }
114
+ @media (min-width: 640px) {
115
+ .nr-prose ul, .nr-prose ol { font-size: 1rem; }
116
+ }
117
+
118
+ .nr-prose ol {
119
+ list-style-type: decimal;
120
+ }
121
+
122
+ .nr-prose li {
123
+ margin: 0.25rem 0;
124
+ line-height: 1.625;
125
+ display: list-item;
126
+ }
127
+
128
+ .nr-prose li::marker {
129
+ color: var(--color-text-secondary, #64748b);
130
+ }
131
+
132
+ /* Nested lists */
133
+ .nr-prose li > ul,
134
+ .nr-prose li > ol {
135
+ margin: 0.25rem 0;
136
+ }
137
+
138
+ /* ── Tables ── */
139
+ .nr-prose table {
140
+ width: 100%;
141
+ border-collapse: collapse;
142
+ margin: 1rem 0;
143
+ font-size: 0.875rem;
144
+ line-height: 1.5;
145
+ }
146
+ @media (min-width: 640px) {
147
+ .nr-prose table { font-size: 1rem; }
148
+ }
149
+
150
+ .nr-prose thead {
151
+ border-bottom: 2px solid var(--color-border, #e2e8f0);
152
+ }
153
+
154
+ .nr-prose th {
155
+ padding: 0.5rem 0.75rem;
156
+ text-align: left;
157
+ font-weight: 700;
158
+ font-size: 0.75rem;
159
+ background: var(--color-background-secondary-solid, #f1f5f9);
160
+ border-bottom: 1px solid var(--color-border, #e2e8f0);
161
+ }
162
+
163
+ .nr-prose td {
164
+ padding: 0.5rem 0.75rem;
165
+ border-bottom: 1px solid var(--color-border, #e2e8f0);
166
+ }
167
+
168
+ .nr-prose tbody tr:last-child td {
169
+ border-bottom: none;
170
+ }
171
+
172
+ /* ── Blockquotes ── */
173
+ .nr-prose blockquote {
174
+ margin: 1rem 0;
175
+ padding: 0.5rem 1rem;
176
+ border-left: 4px solid var(--color-accent-primary, #0ea5e9);
177
+ color: var(--color-text-secondary, #64748b);
178
+ font-style: italic;
179
+ font-size: 0.875rem;
180
+ line-height: 1.625;
181
+ }
182
+ @media (min-width: 640px) {
183
+ .nr-prose blockquote { font-size: 1rem; }
184
+ }
185
+
186
+ .nr-prose blockquote p {
187
+ margin: 0.25rem 0;
188
+ }
189
+
190
+ /* ── Inline code ── */
191
+ .nr-prose :not(pre) > code {
192
+ font-family: 'JetBrains Mono', 'Fira Code', monospace;
193
+ font-size: 0.875em;
194
+ background: var(--color-background-secondary-solid, #f1f5f9);
195
+ padding: 0.125rem 0.375rem;
196
+ border-radius: 0.25rem;
197
+ color: var(--color-text-primary, #0f172a);
198
+ }
199
+
200
+ /* ── Code blocks ── */
201
+ .nr-prose pre {
202
+ margin: 1rem 0;
203
+ padding: 1rem;
204
+ overflow-x: auto;
205
+ font-size: 0.8125rem;
206
+ line-height: 1.6;
207
+ border-radius: 0.75rem;
208
+ background: var(--color-background-secondary-solid, #f1f5f9);
209
+ }
210
+
211
+ @media (min-width: 640px) {
212
+ .nr-prose pre { font-size: 0.875rem; }
213
+ }
214
+
215
+ /* ── Inline formatting ── */
216
+ .nr-prose strong,
217
+ .nr-prose b {
218
+ font-weight: 700;
219
+ }
220
+
221
+ .nr-prose em,
222
+ .nr-prose i {
223
+ font-style: italic;
224
+ }
225
+
226
+ .nr-prose del,
227
+ .nr-prose s {
228
+ text-decoration: line-through;
229
+ opacity: 0.7;
230
+ }
231
+
232
+ /* ── Highlight ── */
233
+ .nr-prose mark {
234
+ background: rgba(250, 204, 21, 0.2);
235
+ padding: 0 0.125rem;
236
+ border-radius: 0.125rem;
237
+ }
238
+
239
+ /* ── Horizontal rules ── */
240
+ .nr-prose hr {
241
+ border: none;
242
+ border-top: 1px solid var(--color-border, #e2e8f0);
243
+ margin: 2rem 0;
244
+ }
245
+
246
+ /* ── Spoiler ── */
247
+ .nr-prose .spoiler,
248
+ .nr-prose [class*="bg-text-primary"][class*="text-bg-primary"] {
249
+ background: var(--color-text-primary, #0f172a);
250
+ color: var(--color-text-primary, #0f172a);
251
+ border-radius: 0.25rem;
252
+ padding: 0 0.25rem;
253
+ cursor: pointer;
254
+ transition: background-color 0.2s, color 0.2s;
255
+ }
256
+
257
+ .nr-prose .spoiler:hover,
258
+ .nr-prose [class*="bg-text-primary"][class*="text-bg-primary"]:hover {
259
+ background: transparent;
260
+ color: inherit;
261
+ }
262
+
263
+ /* ── Images ── */
264
+ .nr-prose img {
265
+ max-width: 100%;
266
+ height: auto;
267
+ border-radius: 0.5rem;
268
+ }
269
+
270
+ /* ── Scrollbar (for code blocks and tables) ── */
271
+ .nr-prose pre::-webkit-scrollbar,
272
+ .nr-prose .overflow-x-auto::-webkit-scrollbar {
273
+ height: 4px;
274
+ }
275
+ .nr-prose pre::-webkit-scrollbar-thumb,
276
+ .nr-prose .overflow-x-auto::-webkit-scrollbar-thumb {
277
+ background: var(--color-border, #e2e8f0);
278
+ border-radius: 2px;
279
+ }
280
+
281
+ /* ── highlight.js theme — NoirMD ── */
282
+ .hljs {
283
+ color: #e2e8f0;
284
+ background: transparent;
285
+ }
286
+ .hljs-keyword,
287
+ .hljs-selector-tag,
288
+ .hljs-literal,
289
+ .hljs-section,
290
+ .hljs-link {
291
+ color: #c084fc;
292
+ font-weight: 600;
293
+ }
294
+ .hljs-function .hljs-keyword {
295
+ color: #c084fc;
296
+ }
297
+ .hljs-string,
298
+ .hljs-title,
299
+ .hljs-name,
300
+ .hljs-type,
301
+ .hljs-attribute,
302
+ .hljs-symbol,
303
+ .hljs-bullet,
304
+ .hljs-addition,
305
+ .hljs-variable,
306
+ .hljs-template-tag,
307
+ .hljs-template-variable {
308
+ color: #4ade80;
309
+ }
310
+ .hljs-comment,
311
+ .hljs-quote,
312
+ .hljs-deletion,
313
+ .hljs-meta {
314
+ color: #64748b;
315
+ font-style: italic;
316
+ }
317
+ .hljs-number,
318
+ .hljs-regexp,
319
+ .hljs-literal,
320
+ .hljs-built_in {
321
+ color: #fb923c;
322
+ }
323
+ .hljs-params {
324
+ color: #e2e8f0;
325
+ }
326
+ .hljs-attr {
327
+ color: #38bdf8;
328
+ }
329
+ .hljs-property {
330
+ color: #0ea5e9;
331
+ }
332
+ .hljs-selector-class,
333
+ .hljs-selector-id {
334
+ color: #fbbf24;
335
+ }
336
+ .hljs-tag {
337
+ color: #f87171;
338
+ }
339
+ .hljs-emphasis {
340
+ font-style: italic;
341
+ }
342
+ .hljs-strong {
343
+ font-weight: 700;
344
+ }
package/markdown.css ADDED
@@ -0,0 +1,344 @@
1
+ /* NRpreviewer — Markdown typography
2
+ These styles work standalone without Tailwind.
3
+ If consumer has Tailwind, utility classes in JSX still apply on top. */
4
+
5
+ .md-h1 {
6
+ font-size: 1.5rem;
7
+ font-weight: 800;
8
+ letter-spacing: -0.025em;
9
+ line-height: 1.2;
10
+ margin: 1.5rem 0 0.75rem;
11
+ }
12
+ @media (min-width: 640px) {
13
+ .md-h1 { font-size: 1.875rem; }
14
+ }
15
+ @media (min-width: 768px) {
16
+ .md-h1 { font-size: 2.25rem; }
17
+ }
18
+
19
+ .md-h2 {
20
+ font-size: 1.25rem;
21
+ font-weight: 700;
22
+ letter-spacing: -0.025em;
23
+ line-height: 1.25;
24
+ margin: 1.25rem 0 0.625rem;
25
+ }
26
+ @media (min-width: 640px) {
27
+ .md-h2 { font-size: 1.5rem; }
28
+ }
29
+ @media (min-width: 768px) {
30
+ .md-h2 { font-size: 1.875rem; }
31
+ }
32
+
33
+ .md-h3 {
34
+ font-size: 1.125rem;
35
+ font-weight: 700;
36
+ line-height: 1.3;
37
+ margin: 1rem 0 0.5rem;
38
+ }
39
+ @media (min-width: 640px) {
40
+ .md-h3 { font-size: 1.25rem; }
41
+ }
42
+ @media (min-width: 768px) {
43
+ .md-h3 { font-size: 1.5rem; }
44
+ }
45
+
46
+ .md-h4 {
47
+ font-size: 1rem;
48
+ font-weight: 700;
49
+ line-height: 1.35;
50
+ margin: 0.75rem 0 0.375rem;
51
+ }
52
+ @media (min-width: 640px) {
53
+ .md-h4 { font-size: 1.125rem; }
54
+ }
55
+ @media (min-width: 768px) {
56
+ .md-h4 { font-size: 1.25rem; }
57
+ }
58
+
59
+ .md-h5 {
60
+ font-size: 0.875rem;
61
+ font-weight: 600;
62
+ line-height: 1.4;
63
+ margin: 0.625rem 0 0.25rem;
64
+ }
65
+ @media (min-width: 640px) {
66
+ .md-h5 { font-size: 1rem; }
67
+ }
68
+ @media (min-width: 768px) {
69
+ .md-h5 { font-size: 1.125rem; }
70
+ }
71
+
72
+ .md-h6 {
73
+ font-size: 0.75rem;
74
+ font-weight: 600;
75
+ line-height: 1.4;
76
+ margin: 0.5rem 0 0.25rem;
77
+ }
78
+ @media (min-width: 640px) {
79
+ .md-h6 { font-size: 0.875rem; }
80
+ }
81
+ @media (min-width: 768px) {
82
+ .md-h6 { font-size: 1rem; }
83
+ }
84
+
85
+ .md-p {
86
+ font-size: 0.875rem;
87
+ line-height: 1.625;
88
+ margin: 0.75rem 0;
89
+ }
90
+ @media (min-width: 640px) {
91
+ .md-p { font-size: 1rem; }
92
+ }
93
+
94
+ /* ── Links ── */
95
+ .nr-prose a {
96
+ text-decoration: none !important;
97
+ color: var(--color-accent-primary, #0ea5e9);
98
+ transition: color 0.15s;
99
+ }
100
+ .nr-prose a:hover {
101
+ text-decoration: underline !important;
102
+ color: var(--color-accent-hover, #38bdf8);
103
+ }
104
+
105
+ /* ── Lists ── */
106
+ .nr-prose ul,
107
+ .nr-prose ol {
108
+ list-style-type: disc;
109
+ margin: 0.75rem 0;
110
+ padding-left: 1.5rem;
111
+ font-size: 0.875rem;
112
+ line-height: 1.625;
113
+ }
114
+ @media (min-width: 640px) {
115
+ .nr-prose ul, .nr-prose ol { font-size: 1rem; }
116
+ }
117
+
118
+ .nr-prose ol {
119
+ list-style-type: decimal;
120
+ }
121
+
122
+ .nr-prose li {
123
+ margin: 0.25rem 0;
124
+ line-height: 1.625;
125
+ display: list-item;
126
+ }
127
+
128
+ .nr-prose li::marker {
129
+ color: var(--color-text-secondary, #64748b);
130
+ }
131
+
132
+ /* Nested lists */
133
+ .nr-prose li > ul,
134
+ .nr-prose li > ol {
135
+ margin: 0.25rem 0;
136
+ }
137
+
138
+ /* ── Tables ── */
139
+ .nr-prose table {
140
+ width: 100%;
141
+ border-collapse: collapse;
142
+ margin: 1rem 0;
143
+ font-size: 0.875rem;
144
+ line-height: 1.5;
145
+ }
146
+ @media (min-width: 640px) {
147
+ .nr-prose table { font-size: 1rem; }
148
+ }
149
+
150
+ .nr-prose thead {
151
+ border-bottom: 2px solid var(--color-border, #e2e8f0);
152
+ }
153
+
154
+ .nr-prose th {
155
+ padding: 0.5rem 0.75rem;
156
+ text-align: left;
157
+ font-weight: 700;
158
+ font-size: 0.75rem;
159
+ background: var(--color-background-secondary-solid, #f1f5f9);
160
+ border-bottom: 1px solid var(--color-border, #e2e8f0);
161
+ }
162
+
163
+ .nr-prose td {
164
+ padding: 0.5rem 0.75rem;
165
+ border-bottom: 1px solid var(--color-border, #e2e8f0);
166
+ }
167
+
168
+ .nr-prose tbody tr:last-child td {
169
+ border-bottom: none;
170
+ }
171
+
172
+ /* ── Blockquotes ── */
173
+ .nr-prose blockquote {
174
+ margin: 1rem 0;
175
+ padding: 0.5rem 1rem;
176
+ border-left: 4px solid var(--color-accent-primary, #0ea5e9);
177
+ color: var(--color-text-secondary, #64748b);
178
+ font-style: italic;
179
+ font-size: 0.875rem;
180
+ line-height: 1.625;
181
+ }
182
+ @media (min-width: 640px) {
183
+ .nr-prose blockquote { font-size: 1rem; }
184
+ }
185
+
186
+ .nr-prose blockquote p {
187
+ margin: 0.25rem 0;
188
+ }
189
+
190
+ /* ── Inline code ── */
191
+ .nr-prose :not(pre) > code {
192
+ font-family: 'JetBrains Mono', 'Fira Code', monospace;
193
+ font-size: 0.875em;
194
+ background: var(--color-background-secondary-solid, #f1f5f9);
195
+ padding: 0.125rem 0.375rem;
196
+ border-radius: 0.25rem;
197
+ color: var(--color-text-primary, #0f172a);
198
+ }
199
+
200
+ /* ── Code blocks ── */
201
+ .nr-prose pre {
202
+ margin: 1rem 0;
203
+ padding: 1rem;
204
+ overflow-x: auto;
205
+ font-size: 0.8125rem;
206
+ line-height: 1.6;
207
+ border-radius: 0.75rem;
208
+ background: var(--color-background-secondary-solid, #f1f5f9);
209
+ }
210
+
211
+ @media (min-width: 640px) {
212
+ .nr-prose pre { font-size: 0.875rem; }
213
+ }
214
+
215
+ /* ── Inline formatting ── */
216
+ .nr-prose strong,
217
+ .nr-prose b {
218
+ font-weight: 700;
219
+ }
220
+
221
+ .nr-prose em,
222
+ .nr-prose i {
223
+ font-style: italic;
224
+ }
225
+
226
+ .nr-prose del,
227
+ .nr-prose s {
228
+ text-decoration: line-through;
229
+ opacity: 0.7;
230
+ }
231
+
232
+ /* ── Highlight ── */
233
+ .nr-prose mark {
234
+ background: rgba(250, 204, 21, 0.2);
235
+ padding: 0 0.125rem;
236
+ border-radius: 0.125rem;
237
+ }
238
+
239
+ /* ── Horizontal rules ── */
240
+ .nr-prose hr {
241
+ border: none;
242
+ border-top: 1px solid var(--color-border, #e2e8f0);
243
+ margin: 2rem 0;
244
+ }
245
+
246
+ /* ── Spoiler ── */
247
+ .nr-prose .spoiler,
248
+ .nr-prose [class*="bg-text-primary"][class*="text-bg-primary"] {
249
+ background: var(--color-text-primary, #0f172a);
250
+ color: var(--color-text-primary, #0f172a);
251
+ border-radius: 0.25rem;
252
+ padding: 0 0.25rem;
253
+ cursor: pointer;
254
+ transition: background-color 0.2s, color 0.2s;
255
+ }
256
+
257
+ .nr-prose .spoiler:hover,
258
+ .nr-prose [class*="bg-text-primary"][class*="text-bg-primary"]:hover {
259
+ background: transparent;
260
+ color: inherit;
261
+ }
262
+
263
+ /* ── Images ── */
264
+ .nr-prose img {
265
+ max-width: 100%;
266
+ height: auto;
267
+ border-radius: 0.5rem;
268
+ }
269
+
270
+ /* ── Scrollbar (for code blocks and tables) ── */
271
+ .nr-prose pre::-webkit-scrollbar,
272
+ .nr-prose .overflow-x-auto::-webkit-scrollbar {
273
+ height: 4px;
274
+ }
275
+ .nr-prose pre::-webkit-scrollbar-thumb,
276
+ .nr-prose .overflow-x-auto::-webkit-scrollbar-thumb {
277
+ background: var(--color-border, #e2e8f0);
278
+ border-radius: 2px;
279
+ }
280
+
281
+ /* ── highlight.js theme — NoirMD ── */
282
+ .hljs {
283
+ color: #e2e8f0;
284
+ background: transparent;
285
+ }
286
+ .hljs-keyword,
287
+ .hljs-selector-tag,
288
+ .hljs-literal,
289
+ .hljs-section,
290
+ .hljs-link {
291
+ color: #c084fc;
292
+ font-weight: 600;
293
+ }
294
+ .hljs-function .hljs-keyword {
295
+ color: #c084fc;
296
+ }
297
+ .hljs-string,
298
+ .hljs-title,
299
+ .hljs-name,
300
+ .hljs-type,
301
+ .hljs-attribute,
302
+ .hljs-symbol,
303
+ .hljs-bullet,
304
+ .hljs-addition,
305
+ .hljs-variable,
306
+ .hljs-template-tag,
307
+ .hljs-template-variable {
308
+ color: #4ade80;
309
+ }
310
+ .hljs-comment,
311
+ .hljs-quote,
312
+ .hljs-deletion,
313
+ .hljs-meta {
314
+ color: #64748b;
315
+ font-style: italic;
316
+ }
317
+ .hljs-number,
318
+ .hljs-regexp,
319
+ .hljs-literal,
320
+ .hljs-built_in {
321
+ color: #fb923c;
322
+ }
323
+ .hljs-params {
324
+ color: #e2e8f0;
325
+ }
326
+ .hljs-attr {
327
+ color: #38bdf8;
328
+ }
329
+ .hljs-property {
330
+ color: #0ea5e9;
331
+ }
332
+ .hljs-selector-class,
333
+ .hljs-selector-id {
334
+ color: #fbbf24;
335
+ }
336
+ .hljs-tag {
337
+ color: #f87171;
338
+ }
339
+ .hljs-emphasis {
340
+ font-style: italic;
341
+ }
342
+ .hljs-strong {
343
+ font-weight: 700;
344
+ }