@obosbbl/grunnmuren-tailwind 2.0.1 → 2.0.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 (4) hide show
  1. package/font.css +21 -0
  2. package/package.json +7 -7
  3. package/tailwind-base.css +1 -0
  4. package/tailwind-typography.css +509 -0
package/font.css ADDED
@@ -0,0 +1,21 @@
1
+ @layer base {
2
+ @font-face {
3
+ font-family: "__OBOSText_Fallback";
4
+ src: local("Arial");
5
+ size-adjust: 100%;
6
+ ascent-override: 94%;
7
+ descent-override: 26%;
8
+ line-gap-override: 0%;
9
+ }
10
+
11
+ @font-face {
12
+ font-family: "__OBOSDisplay_Fallback";
13
+ src: local("Arial");
14
+ size-adjust: 100%;
15
+ ascent-override: 94%;
16
+ descent-override: 26%;
17
+ line-gap-override: 0%;
18
+ }
19
+
20
+ }
21
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-tailwind",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "description": "Grunnmuren Tailwind preset",
5
5
  "repository": {
6
6
  "url": "https://github.com/code-obos/grunnmuren"
@@ -11,19 +11,19 @@
11
11
  ".": "./tailwind-base.css"
12
12
  },
13
13
  "files": [
14
- "tailwind-base.css"
14
+ "tailwind-base.css",
15
+ "tailwind-typography.css",
16
+ "font.css"
15
17
  ],
16
- "dependencies": {
17
- "@tailwindcss/aspect-ratio": "^0.4.2",
18
- "@tailwindcss/typography": "^0.5.10",
19
- "tailwindcss-animate": "^1.0.7"
20
- },
21
18
  "devDependencies": {
22
19
  "tailwindcss": "4.0.17"
23
20
  },
24
21
  "peerDependencies": {
25
22
  "tailwindcss": "^4.0.0"
26
23
  },
24
+ "dependencies": {
25
+ "tw-animate-css": "^1.2.5"
26
+ },
27
27
  "scripts": {
28
28
  "font-fallback": "bun --cwd=./fonts ./generate-font-fallback.ts"
29
29
  }
package/tailwind-base.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @import "tailwindcss";
2
+ @import "tw-animate-css";
2
3
  @import "./tailwind-typography";
3
4
  @import "./font";
4
5
 
package/tailwind-typography.css ADDED
@@ -0,0 +1,509 @@
1
+ /**
2
+ * This is a copy of the Tailwind Typography plugin's CSS.
3
+ * To support the prose styles from the tailwindcss-typography plugin.
4
+ */
5
+
6
+ @custom-variant prose-headings (& :is(h1, h2, h3, h4, th):not(:where([class~='not-prose'], [class~='not-prose'] *)));
7
+ @custom-variant prose-lead (& :is([class~="lead"]):not(:where([class~='not-prose'], [class~='not-prose'] *)));
8
+ @custom-variant prose-h1 (& :is(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)));
9
+ @custom-variant prose-h2 (& :is(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)));
10
+ @custom-variant prose-h3 (& :is(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)));
11
+ @custom-variant prose-h4 (& :is(h4):not(:where([class~='not-prose'], [class~='not-prose'] *)));
12
+ @custom-variant prose-p (& :is(p):not(:where([class~='not-prose'], [class~='not-prose'] *)));
13
+ @custom-variant prose-a (& :is(a):not(:where([class~='not-prose'], [class~='not-prose'] *)));
14
+ @custom-variant prose-blockquote (& :is(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)));
15
+ @custom-variant prose-figure (& :is(figure):not(:where([class~='not-prose'], [class~='not-prose'] *)));
16
+ @custom-variant prose-figcaption (& :is(figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *)));
17
+ @custom-variant prose-strong (& :is(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)));
18
+ @custom-variant prose-em (& :is(em):not(:where([class~='not-prose'], [class~='not-prose'] *)));
19
+ @custom-variant prose-kbd (& :is(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *)));
20
+ @custom-variant prose-code (& :is(code):not(:where([class~='not-prose'], [class~='not-prose'] *)));
21
+ @custom-variant prose-pre (& :is(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)));
22
+ @custom-variant prose-ol (& :is(ol):not(:where([class~='not-prose'], [class~='not-prose'] *)));
23
+ @custom-variant prose-ul (& :is(ul):not(:where([class~='not-prose'], [class~='not-prose'] *)));
24
+ @custom-variant prose-li (& :is(li):not(:where([class~='not-prose'], [class~='not-prose'] *)));
25
+ @custom-variant prose-table (& :is(table):not(:where([class~='not-prose'], [class~='not-prose'] *)));
26
+ @custom-variant prose-thead (& :is(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)));
27
+ @custom-variant prose-tr (& :is(tr):not(:where([class~='not-prose'], [class~='not-prose'] *)));
28
+ @custom-variant prose-th (& :is(th):not(:where([class~='not-prose'], [class~='not-prose'] *)));
29
+ @custom-variant prose-td (& :is(td):not(:where([class~='not-prose'], [class~='not-prose'] *)));
30
+ @custom-variant prose-img (& :is(img):not(:where([class~='not-prose'], [class~='not-prose'] *)));
31
+ @custom-variant prose-video (& :is(video):not(:where([class~='not-prose'], [class~='not-prose'] *)));
32
+ @custom-variant prose-hr (& :is(hr):not(:where([class~='not-prose'], [class~='not-prose'] *)));
33
+
34
+ @utility prose {
35
+ --tw-prose-body: --theme(--color-black, initial);
36
+ --tw-prose-headings: inherit;
37
+ --tw-prose-lead: inherit;
38
+ --tw-prose-links: inherit;
39
+ --tw-prose-bold: inherit;
40
+ --tw-prose-counters: --theme(--color-black, initial);
41
+ --tw-prose-bullets: --theme(--color-black, initial);
42
+ --tw-prose-hr: --theme(--color-gray-200, initial);
43
+ --tw-prose-quotes: inherit;
44
+ --tw-prose-quote-borders: --theme(--color-gray-200, initial);
45
+ --tw-prose-captions: --theme(--color-gray-500, initial);
46
+ --tw-prose-kbd: --theme(--color-gray-900, initial);
47
+ --tw-prose-kbd-shadows: --theme(--color-gray-900, initial);
48
+ --tw-prose-code: --theme(--color-gray-900, initial);
49
+ --tw-prose-pre-code: --theme(--color-gray-200, initial);
50
+ --tw-prose-pre-bg: --theme(--color-gray-800, initial);
51
+ --tw-prose-th-borders: --theme(--color-gray-300, initial);
52
+ --tw-prose-td-borders: --theme(--color-gray-200, initial);
53
+ --tw-prose-invert-body: --theme(--color-gray-300, initial);
54
+ --tw-prose-invert-headings: --theme(--color-white, initial);
55
+ --tw-prose-invert-lead: --theme(--color-gray-400, initial);
56
+ --tw-prose-invert-links: --theme(--color-white, initial);
57
+ --tw-prose-invert-bold: --theme(--color-white, initial);
58
+ --tw-prose-invert-counters: --theme(--color-gray-400, initial);
59
+ --tw-prose-invert-bullets: --theme(--color-gray-600, initial);
60
+ --tw-prose-invert-hr: --theme(--color-gray-700, initial);
61
+ --tw-prose-invert-quotes: --theme(--color-gray-100, initial);
62
+ --tw-prose-invert-quote-borders: --theme(--color-gray-700, initial);
63
+ --tw-prose-invert-captions: --theme(--color-gray-400, initial);
64
+ --tw-prose-invert-kbd: --theme(--color-white, initial);
65
+ --tw-prose-invert-kbd-shadows: --theme(--color-white, initial);
66
+ --tw-prose-invert-code: --theme(--color-white, initial);
67
+ --tw-prose-invert-pre-code: --theme(--color-gray-300, initial);
68
+ --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
69
+ --tw-prose-invert-th-borders: --theme(--color-gray-600, initial);
70
+ --tw-prose-invert-td-borders: --theme(--color-gray-700, initial);
71
+
72
+ font-size: 1rem;
73
+ line-height: 1.75;
74
+ color: var(--tw-prose-body);
75
+ max-width: 696px;
76
+
77
+ :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
78
+ &:where(p) {
79
+ @apply text-[1rem]/[1.625rem];
80
+ margin-top: 1.25em;
81
+ margin-bottom: 1.25em;
82
+ }
83
+
84
+ &:where([class~="lead"]) {
85
+ @apply font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem];
86
+ margin-top: 1.2em;
87
+ margin-bottom: 1.2em;
88
+ }
89
+
90
+ &:where(a) {
91
+ color: var(--tw-prose-links);
92
+ text-decoration: underline;
93
+ font-weight: 500;
94
+ }
95
+
96
+ &:where(strong) {
97
+ color: var(--tw-prose-bold);
98
+ font-weight: 600;
99
+ }
100
+
101
+ &:where(a strong) {
102
+ color: inherit;
103
+ }
104
+
105
+ &:where(blockquote strong) {
106
+ color: inherit;
107
+ }
108
+
109
+ &:where(thead th strong) {
110
+ color: inherit;
111
+ }
112
+
113
+ &:where(ol) {
114
+ list-style-type: decimal;
115
+ margin-top: 1.25em;
116
+ margin-bottom: 1.25em;
117
+ padding-left: 1.625em;
118
+ }
119
+
120
+ &:where(ol[type="A"]) {
121
+ list-style-type: upper-alpha;
122
+ }
123
+
124
+ &:where(ol[type="a"]) {
125
+ list-style-type: lower-alpha;
126
+ }
127
+
128
+ &:where(ol[type="A" s]) {
129
+ list-style-type: upper-alpha;
130
+ }
131
+
132
+ &:where(ol[type="a" s]) {
133
+ list-style-type: lower-alpha;
134
+ }
135
+
136
+ &:where(ol[type="I"]) {
137
+ list-style-type: upper-roman;
138
+ }
139
+
140
+ &:where(ol[type="i"]) {
141
+ list-style-type: lower-roman;
142
+ }
143
+
144
+ &:where(ol[type="I" s]) {
145
+ list-style-type: upper-roman;
146
+ }
147
+
148
+ &:where(ol[type="i" s]) {
149
+ list-style-type: lower-roman;
150
+ }
151
+
152
+ &:where(ol[type="1"]) {
153
+ list-style-type: decimal;
154
+ }
155
+
156
+ &:where(ul) {
157
+ list-style-type: disc;
158
+ margin-top: 1.25em;
159
+ margin-bottom: 1.25em;
160
+ padding-left: 1.625em;
161
+ }
162
+
163
+ &:where(ol > li)::marker {
164
+ font-weight: 400;
165
+ color: var(--tw-prose-counters);
166
+ }
167
+
168
+ &:where(ul > li)::marker {
169
+ color: var(--tw-prose-bullets);
170
+ }
171
+
172
+ &:where(dt) {
173
+ color: var(--tw-prose-headings);
174
+ font-weight: 600;
175
+ margin-top: 1.25em;
176
+ }
177
+
178
+ &:where(hr) {
179
+ border-color: var(--tw-prose-hr);
180
+ border-top-width: 1px;
181
+ margin-top: 3em;
182
+ margin-bottom: 3em;
183
+ }
184
+
185
+ &:where(blockquote) {
186
+ @apply font-medium italic grid grid-cols-[3rem_1fr] gap-x-[0.4375rem]
187
+ pt-4 text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem]
188
+ before:text-[4.6875rem]/[1.6875rem] before:font-display
189
+ before:not-italic before:content-["“"];
190
+ margin-top: 1.6em;
191
+ margin-bottom: 1.6em;
192
+ }
193
+
194
+ &:where(blockquote p:first-of-type)::before {
195
+ content: open-quote;
196
+ }
197
+
198
+ &:where(blockquote p:last-of-type)::after {
199
+ content: close-quote;
200
+ }
201
+
202
+ &:where(h1) {
203
+ @apply heading-xl;
204
+ margin-top: 0;
205
+ margin-bottom: 0.8888889em;
206
+ }
207
+
208
+ &:where(h1 strong) {
209
+ font-weight: 900;
210
+ color: inherit;
211
+ }
212
+
213
+ &:where(h2) {
214
+ @apply heading-l;
215
+ margin-top: 2em;
216
+ margin-bottom: 1em;
217
+ }
218
+
219
+ &:where(h2 strong) {
220
+ font-weight: 800;
221
+ color: inherit;
222
+ }
223
+
224
+ &:where(h3) {
225
+ @apply heading-m;
226
+ margin-top: 1.6em;
227
+ margin-bottom: 0.6em;
228
+ }
229
+
230
+ &:where(h3 strong) {
231
+ font-weight: 700;
232
+ color: inherit;
233
+ }
234
+
235
+ &:where(h4) {
236
+ @apply heading-s;
237
+ margin-top: 1.5em;
238
+ margin-bottom: 0.5em;
239
+ }
240
+
241
+ &:where(h4 strong) {
242
+ font-weight: 700;
243
+ color: inherit;
244
+ }
245
+
246
+ &:where(img) {
247
+ margin-top: 2em;
248
+ margin-bottom: 2em;
249
+ }
250
+
251
+ &:where(picture) {
252
+ display: block;
253
+ margin-top: 2em;
254
+ margin-bottom: 2em;
255
+ }
256
+
257
+ &:where(kbd) {
258
+ font-weight: 500;
259
+ font-family: inherit;
260
+ color: var(--tw-prose-kbd);
261
+ box-shadow: 0 0 0 1px --alpha(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0
262
+ --alpha(var(--tw-prose-kbd-shadows) / 10%);
263
+ font-size: 0.875em;
264
+ border-radius: 0.3125rem;
265
+ padding-top: 0.1875em;
266
+ padding-right: 0.375em;
267
+ padding-bottom: 0.1875em;
268
+ padding-left: 0.375em;
269
+ }
270
+
271
+ &:where(code) {
272
+ @apply text-(--tw-prose-code) py-0.5 px-2 rounded-sm border border-gray bg-gray-lightest whitespace-nowrap font-semibold text-sm;
273
+ }
274
+
275
+ &:where(a code) {
276
+ color: inherit;
277
+ }
278
+
279
+ &:where(h1 code) {
280
+ color: inherit;
281
+ }
282
+
283
+ &:where(h2 code) {
284
+ color: inherit;
285
+ font-size: 0.875em;
286
+ }
287
+
288
+ &:where(h3 code) {
289
+ color: inherit;
290
+ font-size: 0.9em;
291
+ }
292
+
293
+ &:where(h4 code) {
294
+ color: inherit;
295
+ }
296
+
297
+ &:where(blockquote code) {
298
+ color: inherit;
299
+ }
300
+
301
+ &:where(thead th code) {
302
+ color: inherit;
303
+ }
304
+
305
+ &:where(pre) {
306
+ color: var(--tw-prose-pre-code);
307
+ background-color: var(--tw-prose-pre-bg);
308
+ overflow-x: auto;
309
+ font-weight: 400;
310
+ font-size: 0.875em;
311
+ line-height: 1.7142857;
312
+ margin-top: 1.7142857em;
313
+ margin-bottom: 1.7142857em;
314
+ border-radius: 0.375rem;
315
+ padding-top: 0.8571429em;
316
+ padding-right: 1.1428571em;
317
+ padding-bottom: 0.8571429em;
318
+ padding-left: 1.1428571em;
319
+ }
320
+
321
+ &:where(pre code) {
322
+ background-color: transparent;
323
+ border-width: 0;
324
+ border-radius: 0;
325
+ padding: 0;
326
+ font-weight: inherit;
327
+ color: inherit;
328
+ font-size: inherit;
329
+ font-family: inherit;
330
+ line-height: inherit;
331
+ }
332
+
333
+ &:where(pre code)::before {
334
+ content: none;
335
+ }
336
+
337
+ &:where(pre code)::after {
338
+ content: none;
339
+ }
340
+
341
+ &:where(table) {
342
+ width: 100%;
343
+ table-layout: auto;
344
+ text-align: left;
345
+ margin-top: 2em;
346
+ margin-bottom: 2em;
347
+ font-size: 0.875em;
348
+ line-height: 1.7142857;
349
+ }
350
+
351
+ &:where(thead) {
352
+ border-bottom-width: 1px;
353
+ border-bottom-color: var(--tw-prose-th-borders);
354
+ }
355
+
356
+ &:where(thead th) {
357
+ color: var(--tw-prose-headings);
358
+ font-weight: 600;
359
+ vertical-align: bottom;
360
+ padding-right: 0.5714286em;
361
+ padding-bottom: 0.5714286em;
362
+ padding-left: 0.5714286em;
363
+ }
364
+
365
+ &:where(tbody tr) {
366
+ border-bottom-width: 1px;
367
+ border-bottom-color: var(--tw-prose-td-borders);
368
+ }
369
+
370
+ &:where(tbody tr:last-child) {
371
+ border-bottom-width: 0;
372
+ }
373
+
374
+ &:where(tbody td) {
375
+ vertical-align: baseline;
376
+ }
377
+
378
+ &:where(tfoot) {
379
+ border-top-width: 1px;
380
+ border-top-color: var(--tw-prose-th-borders);
381
+ }
382
+
383
+ &:where(tfoot td) {
384
+ vertical-align: top;
385
+ }
386
+
387
+ &:where(figure > *) {
388
+ margin-top: 0;
389
+ margin-bottom: 0;
390
+ }
391
+ &:where(figcaption) {
392
+ color: var(--tw-prose-captions);
393
+ font-size: 0.875em;
394
+ line-height: 1.4285714;
395
+ margin-top: 0.8571429em;
396
+ }
397
+
398
+ &:where(picture > img) {
399
+ margin-top: 0;
400
+ margin-bottom: 0;
401
+ }
402
+
403
+ &:where(video) {
404
+ margin-top: 2em;
405
+ margin-bottom: 2em;
406
+ }
407
+
408
+ &:where(li) {
409
+ margin-top: 0.5em;
410
+ margin-bottom: 0.5em;
411
+ }
412
+
413
+ &:where(ol > li) {
414
+ padding-left: 0.375em;
415
+ }
416
+
417
+ &:where(ul > li) {
418
+ padding-left: 0.375em;
419
+ }
420
+
421
+ &:where(.prose > ul > li p) {
422
+ margin-top: 0.75em;
423
+ margin-bottom: 0.75em;
424
+ }
425
+
426
+ &:where(.prose > ul > li > *:first-child) {
427
+ margin-top: 1.25em;
428
+ }
429
+
430
+ &:where(.prose > ul > li > *:last-child) {
431
+ margin-bottom: 1.25em;
432
+ }
433
+
434
+ &:where(.prose > ol > li > *:first-child) {
435
+ margin-top: 1.25em;
436
+ }
437
+
438
+ &:where(.prose > ol > li > *:last-child) {
439
+ margin-bottom: 1.25em;
440
+ }
441
+
442
+ &:where(ul ul, ul ol, ol ul, ol ol) {
443
+ margin-top: 0.75em;
444
+ margin-bottom: 0.75em;
445
+ }
446
+
447
+ &:where(dl) {
448
+ margin-top: 1.25em;
449
+ margin-bottom: 1.25em;
450
+ }
451
+
452
+ &:where(dd) {
453
+ margin-top: 0.5em;
454
+ padding-left: 1.625em;
455
+ }
456
+
457
+ &:where(hr + *) {
458
+ margin-top: 0;
459
+ }
460
+
461
+ &:where(h2 + *) {
462
+ margin-top: 0;
463
+ }
464
+
465
+ &:where(h3 + *) {
466
+ margin-top: 0;
467
+ }
468
+
469
+ &:where(h4 + *) {
470
+ margin-top: 0;
471
+ }
472
+
473
+ &:where(thead th:first-child) {
474
+ padding-left: 0;
475
+ }
476
+
477
+ &:where(thead th:last-child) {
478
+ padding-right: 0;
479
+ }
480
+
481
+ &:where(tbody td, tfoot td) {
482
+ padding-top: 0.5714286em;
483
+ padding-right: 0.5714286em;
484
+ padding-bottom: 0.5714286em;
485
+ padding-left: 0.5714286em;
486
+ }
487
+
488
+ &:where(tbody td:first-child, tfoot td:first-child) {
489
+ padding-left: 0;
490
+ }
491
+
492
+ &:where(tbody td:last-child, tfoot td:last-child) {
493
+ padding-right: 0;
494
+ }
495
+
496
+ &:where(figure) {
497
+ margin-top: 2em;
498
+ margin-bottom: 2em;
499
+ }
500
+
501
+ &:where(.prose > :first-child) {
502
+ margin-top: 0;
503
+ }
504
+
505
+ &:where(.prose > :last-child) {
506
+ margin-bottom: 0;
507
+ }
508
+ }
509
+ }