clampography 0.9.10 → 2.0.0-beta.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.
package/package.json CHANGED
@@ -1,18 +1,16 @@
1
1
  {
2
2
  "name": "clampography",
3
- "version": "0.9.10",
4
- "description": "Fluid typography system based on CSS clamp(). Alternative to Tailwind CSS Typography plugin.",
5
- "main": "clampography.css",
6
- "style": "clampography.css",
7
- "files": [
8
- "clampography.css",
9
- "presets/"
10
- ],
3
+ "version": "2.0.0-beta.2",
4
+ "description": "Fluid typography system based on CSS clamp() with optional themes and extra styles. A feature-rich alternative to Tailwind CSS Typography plugin.",
5
+ "main": "src/index.js",
6
+ "type": "module",
11
7
  "exports": {
12
- ".": "./clampography.css",
13
- "./base": "./clampography.css",
14
- "./*": "./presets/*.css"
8
+ ".": "./src/index.js",
9
+ "./theme": "./src/theme-plugin.js"
15
10
  },
11
+ "files": [
12
+ "src"
13
+ ],
16
14
  "keywords": [
17
15
  "alternative",
18
16
  "blog",
@@ -26,11 +24,14 @@
26
24
  "font-size",
27
25
  "markdown",
28
26
  "style",
27
+ "styles",
29
28
  "tailwind",
30
29
  "tailwind-css",
31
30
  "tailwind-plugin",
32
31
  "tailwindcss",
33
32
  "text",
33
+ "theme",
34
+ "themes",
34
35
  "typography"
35
36
  ],
36
37
  "repository": {
@@ -39,5 +40,11 @@
39
40
  },
40
41
  "homepage": "https://next.dav.one/clampography/",
41
42
  "author": "Dawid Wąsowski",
42
- "license": "MIT"
43
+ "license": "MIT",
44
+ "peerDependencies": {
45
+ "tailwindcss": ">=4.0.0"
46
+ },
47
+ "devDependencies": {
48
+ "tailwindcss": "^4.0.0"
49
+ }
43
50
  }
package/src/base.js ADDED
@@ -0,0 +1,432 @@
1
+ /**
2
+ * Base typography and layout styles (structure only, no colors).
3
+ * Converted from base.css.
4
+ */
5
+ export default {
6
+ // Global CSS Variables (Spacing & Fonts)
7
+ "@layer base": {
8
+ ":root": {
9
+ "--spacing-sm": "clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem)",
10
+ "--spacing-md": "clamp(1rem, 0.75rem + 1.25vw, 1.5rem)",
11
+ "--spacing-lg": "clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem)",
12
+ "--spacing-xl": "clamp(2rem, 1.5rem + 2.5vw, 3rem)",
13
+ "--scroll-offset": "5rem",
14
+ "--font-family-base":
15
+ "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
16
+ "--font-family-mono":
17
+ "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
18
+ },
19
+ },
20
+
21
+ // Body Structure
22
+ "body": {
23
+ "font-family": "var(--font-family-base)",
24
+ "font-size": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
25
+ "line-height": "1.75",
26
+ "text-rendering": "optimizeLegibility",
27
+ "-webkit-font-smoothing": "antialiased",
28
+ "-moz-osx-font-smoothing": "grayscale",
29
+ "text-wrap": "pretty",
30
+ },
31
+
32
+ // Headings Structure
33
+ ":where(h1, h2, h3, h4, h5, h6)": {
34
+ "font-weight": "700",
35
+ "scroll-margin-top": "var(--scroll-offset)",
36
+ "font-size": "1rem",
37
+ "line-height": "1.5",
38
+ "margin-top": "0",
39
+ "margin-bottom": "var(--spacing-xs)",
40
+ "text-decoration": "none",
41
+ "break-after": "avoid",
42
+ },
43
+
44
+ "h1": {
45
+ "font-size": "clamp(2.25rem, 1.95rem + 1.5vw, 3rem)",
46
+ "line-height": "1.1111",
47
+ "font-weight": "800",
48
+ "margin-top": "0",
49
+ "margin-bottom": "var(--spacing-xl)",
50
+ },
51
+
52
+ "h6": {
53
+ "font-size": "0.875rem",
54
+ "line-height": "1.5",
55
+ "margin-top": "0",
56
+ "margin-bottom": "var(--spacing-xs)",
57
+ },
58
+
59
+ // Links
60
+ "a": {
61
+ "text-decoration-line": "underline",
62
+ "text-decoration-thickness": "0.0625em",
63
+ "text-underline-offset": "0.15em",
64
+ "cursor": "pointer",
65
+ "text-decoration": "underline",
66
+ },
67
+
68
+ ":where(h1, h2, h3, h4, h5, h6) a": {
69
+ "text-decoration": "none",
70
+ },
71
+
72
+ // Lists & Menus
73
+ "menu": {
74
+ "list-style": "none",
75
+ "margin-bottom": "var(--spacing-md)",
76
+ "padding-left": "0",
77
+ },
78
+
79
+ "menu > li::before": {
80
+ "display": "none",
81
+ },
82
+
83
+ "hgroup": {
84
+ "margin-bottom": "var(--spacing-lg)",
85
+ },
86
+
87
+ "hgroup :where(h1, h2, h3, h4, h5, h6)": {
88
+ "margin-bottom": "var(--spacing-xs)",
89
+ },
90
+
91
+ "hgroup :where(p)": {
92
+ "margin-top": "0",
93
+ "margin-bottom": "0",
94
+ "font-size": "0.875em",
95
+ "font-weight": "400",
96
+ "line-height": "1.5",
97
+ },
98
+
99
+ "p": {
100
+ "line-height": "1.75",
101
+ "margin-bottom": "var(--spacing-md)",
102
+ "margin-top": "0",
103
+ },
104
+
105
+ // Inline elements
106
+ ":where(strong, b)": {
107
+ "font-weight": "700",
108
+ },
109
+
110
+ ":where(em, i, cite, var)": {
111
+ "font-style": "italic",
112
+ },
113
+
114
+ "dfn": {
115
+ "font-style": "normal",
116
+ "font-weight": "600",
117
+ },
118
+
119
+ "small": {
120
+ "font-size": "0.875em",
121
+ "line-height": "1.5",
122
+ },
123
+
124
+ ":where(code, kbd, samp)": {
125
+ "font-family": "var(--font-family-mono)",
126
+ "padding":
127
+ "clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem) clamp(0.1875rem, 0.15rem + 0.1875vw, 0.3125rem)",
128
+ },
129
+
130
+ ":where(code:not(pre code))": {
131
+ "padding":
132
+ "clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem) clamp(0.1875rem, 0.15rem + 0.1875vw, 0.3125rem)",
133
+ },
134
+
135
+ ":where(sub, sup)": {
136
+ "font-size": "0.75em",
137
+ "line-height": "0",
138
+ "position": "relative",
139
+ "vertical-align": "baseline",
140
+ },
141
+
142
+ "sup": {
143
+ "top": "-0.5em",
144
+ },
145
+
146
+ "sub": {
147
+ "bottom": "-0.25em",
148
+ },
149
+
150
+ "abbr[title]": {
151
+ "text-decoration": "underline dotted",
152
+ "cursor": "help",
153
+ },
154
+
155
+ "del": {
156
+ "text-decoration": "line-through",
157
+ },
158
+
159
+ "ins": {
160
+ "text-decoration": "underline",
161
+ },
162
+
163
+ "s": {
164
+ "text-decoration": "line-through",
165
+ },
166
+
167
+ "u": {
168
+ "text-decoration": "underline",
169
+ },
170
+
171
+ "mark": {
172
+ "font-style": "normal",
173
+ "font-weight": "inherit",
174
+ },
175
+
176
+ "address": {
177
+ "font-style": "normal",
178
+ "margin-top": "var(--spacing-md)",
179
+ "margin-bottom": "var(--spacing-md)",
180
+ },
181
+
182
+ "time": {
183
+ "font-style": "normal",
184
+ "font-variant-numeric": "tabular-nums",
185
+ },
186
+
187
+ // Blockquotes
188
+ "blockquote": {
189
+ "margin-top": "0",
190
+ "margin-bottom": "0",
191
+ "padding-left": "var(--spacing-md)",
192
+ },
193
+
194
+ "blockquote blockquote": {
195
+ "margin-top": "var(--spacing-sm)",
196
+ "margin-bottom": "var(--spacing-sm)",
197
+ "padding-left": "var(--spacing-sm)",
198
+ },
199
+
200
+ "q": {
201
+ "font-style": "inherit",
202
+ },
203
+
204
+ // Lists
205
+ ":where(ul, ol)": {
206
+ "list-style": "none",
207
+ "margin-bottom": "0",
208
+ "padding-left": "var(--spacing-md)",
209
+ "margin-top": "var(--spacing-xs)",
210
+ },
211
+
212
+ "li": {
213
+ "position": "relative",
214
+ "padding-left": "0.375em",
215
+ },
216
+
217
+ "li + li": {
218
+ "margin-top": "var(--spacing-xs)",
219
+ },
220
+
221
+ "li > :where(ul, ol):first-child": {
222
+ "margin-top": "var(--spacing-xs)",
223
+ },
224
+
225
+ "ul > li::before": {
226
+ "content": "''",
227
+ "position": "absolute",
228
+ "left": "-1.125em",
229
+ "top": "calc(0.875em - 0.1875em)",
230
+ "width": "0.375em",
231
+ "height": "0.375em",
232
+ "border-radius": "50%",
233
+ },
234
+
235
+ "ol": {
236
+ "counter-reset": "list-counter",
237
+ "margin-top": "0",
238
+ "margin-bottom": "0",
239
+ },
240
+
241
+ "ol > li": {
242
+ "counter-increment": "list-counter",
243
+ },
244
+
245
+ "ol > li::before": {
246
+ "content": "counter(list-counter) '.'",
247
+ "position": "absolute",
248
+ "left": "-2.5em",
249
+ "width": "1.75em",
250
+ "text-align": "right",
251
+ "font-weight": "600",
252
+ },
253
+
254
+ ":where(ul, ol) :where(ul, ol)": {
255
+ "margin-bottom": "0",
256
+ "padding-left": "var(--spacing-md)",
257
+ },
258
+
259
+ "dl": {
260
+ "margin-top": "0",
261
+ "margin-bottom": "0",
262
+ },
263
+
264
+ "dt": {
265
+ "font-weight": "600",
266
+ "margin-top": "var(--spacing-sm)",
267
+ },
268
+
269
+ "dt:first-child": {
270
+ "margin-top": "0",
271
+ },
272
+
273
+ "dd": {
274
+ "margin-left": "var(--spacing-md)",
275
+ },
276
+
277
+ "dt + dd": {
278
+ "margin-top": "var(--spacing-xs)",
279
+ },
280
+
281
+ "dd + dd": {
282
+ "margin-top": "var(--spacing-xs)",
283
+ },
284
+
285
+ "dd:last-child": {
286
+ "margin-bottom": "0",
287
+ },
288
+
289
+ // Pre / Code
290
+ "pre": {
291
+ "margin-top": "var(--spacing-md)",
292
+ "margin-bottom": "var(--spacing-md)",
293
+ "font-family": "var(--font-family-mono)",
294
+ "line-height": "1.6",
295
+ "overflow-x": "auto",
296
+ "break-inside": "avoid",
297
+ },
298
+
299
+ "pre code": {
300
+ "font-size": "inherit",
301
+ "padding": "0",
302
+ "border-radius": "0",
303
+ },
304
+
305
+ // Fieldset & Form
306
+ "fieldset": {
307
+ "margin-top": "var(--spacing-md)",
308
+ "margin-bottom": "var(--spacing-md)",
309
+ "padding": "var(--spacing-md)",
310
+ "border": "0",
311
+ },
312
+
313
+ "legend": {
314
+ "font-weight": "600",
315
+ "padding": "0 var(--spacing-xs)",
316
+ },
317
+
318
+ "output": {
319
+ "display": "inline-block",
320
+ "font-variant-numeric": "tabular-nums",
321
+ },
322
+
323
+ ":where(meter, progress)": {
324
+ "display": "inline-block",
325
+ "vertical-align": "middle",
326
+ },
327
+
328
+ // Media
329
+ ":where(img, video)": {
330
+ "max-width": "100%",
331
+ "height": "auto",
332
+ "break-inside": "avoid",
333
+ },
334
+
335
+ "figure": {
336
+ "margin-top": "0",
337
+ "margin-bottom": "0",
338
+ "break-inside": "avoid",
339
+ },
340
+
341
+ "figcaption": {
342
+ "margin-top": "0.375rem",
343
+ "font-size": "0.875em",
344
+ "line-height": "1.5",
345
+ },
346
+
347
+ // Tables
348
+ "table": {
349
+ "width": "100%",
350
+ "margin-top": "0",
351
+ "margin-bottom": "0",
352
+ "border-collapse": "collapse",
353
+ "font-size": "0.9375em",
354
+ "line-height": "1.6",
355
+ },
356
+
357
+ "caption": {
358
+ "margin-bottom": "var(--spacing-xs)",
359
+ "font-size": "0.875em",
360
+ "font-weight": "600",
361
+ "text-align": "left",
362
+ },
363
+
364
+ "th, td": {
365
+ "padding": "var(--spacing-xs) var(--spacing-sm)",
366
+ "text-align": "left",
367
+ "font-weight": "600",
368
+ },
369
+
370
+ "thead th, tbody th, tbody td, tfoot th, tfoot td": {
371
+ "vertical-align": "top",
372
+ },
373
+
374
+ "thead th": {
375
+ "vertical-align": "bottom",
376
+ },
377
+
378
+ "tbody + tbody": {
379
+ "border-top-width": "2px",
380
+ },
381
+
382
+ // Horizontal Rule
383
+ "hr": {
384
+ "margin-top": "var(--spacing-xl)",
385
+ "margin-bottom": "var(--spacing-xl)",
386
+ "border": "0",
387
+ },
388
+
389
+ // Interactive
390
+ ":where(:focus, :focus-visible)": {
391
+ "outline-offset": "2px",
392
+ },
393
+
394
+ "details": {
395
+ "margin-top": "var(--spacing-md)",
396
+ "margin-bottom": "var(--spacing-md)",
397
+ },
398
+
399
+ "summary": {
400
+ "cursor": "pointer",
401
+ "font-weight": "600",
402
+ },
403
+
404
+ "details[open] > summary": {
405
+ "margin-bottom": "var(--spacing-xs)",
406
+ },
407
+
408
+ "dialog": {
409
+ "font-size": "inherit",
410
+ "line-height": "inherit",
411
+ },
412
+
413
+ // Resets
414
+ "ul": {
415
+ "margin-top": "0",
416
+ "margin-bottom": "0",
417
+ },
418
+
419
+ ":where(p, pre):first-child": {
420
+ "margin-top": "0",
421
+ },
422
+
423
+ ":where(p, pre):last-child": {
424
+ "margin-bottom": "0",
425
+ },
426
+
427
+ "@media print": {
428
+ "table": {
429
+ "break-inside": "avoid",
430
+ },
431
+ },
432
+ };
package/src/extra.js ADDED
@@ -0,0 +1,138 @@
1
+ /**
2
+ * Extra opinionated styles and coloring.
3
+ * Applies colors to the structural base elements.
4
+ */
5
+ export default {
6
+ // --- Basic Coloring (Applying theme variables) ---
7
+
8
+ "body": {
9
+ "background-color": "var(--clampography-background)",
10
+ "color": "var(--clampography-text)",
11
+ },
12
+
13
+ ":where(h1, h2, h3, h4, h5, h6)": {
14
+ "color": "var(--clampography-heading)",
15
+ },
16
+
17
+ "a": {
18
+ "color": "var(--clampography-link)",
19
+ },
20
+
21
+ // Lists
22
+ "ul > li::before": {
23
+ "background-color": "var(--clampography-primary)", // Bullet points
24
+ },
25
+
26
+ "ol > li::before": {
27
+ "color": "var(--clampography-secondary)", // Numbers
28
+ },
29
+
30
+ // Inline Code
31
+ ":where(code, kbd, samp)": {
32
+ "background-color": "var(--clampography-surface)",
33
+ "color": "var(--clampography-heading)",
34
+ "border": "1px solid var(--clampography-border)",
35
+ "border-radius": "0.25rem",
36
+ },
37
+
38
+ // Preformatted Code Blocks
39
+ "pre": {
40
+ "background-color": "var(--clampography-surface)",
41
+ "border": "1px solid var(--clampography-border)",
42
+ "border-radius": "0.375rem",
43
+ "padding": "1rem",
44
+ },
45
+
46
+ // Tables
47
+ "th": {
48
+ "color": "var(--clampography-heading)",
49
+ },
50
+
51
+ "th, td": {
52
+ "border-bottom": "1px solid var(--clampography-border)",
53
+ },
54
+
55
+ "thead th": {
56
+ "border-bottom-width": "2px",
57
+ },
58
+
59
+ // Captions & Muted text
60
+ "caption, figcaption, .muted": {
61
+ "color": "var(--clampography-muted)",
62
+ },
63
+
64
+ // Horizontal Rule (Thematic)
65
+ "hr": {
66
+ "height": "1px",
67
+ "border-width": "0",
68
+ "margin-top": "3rem",
69
+ "margin-bottom": "3rem",
70
+ "background-color": "var(--clampography-border)",
71
+ },
72
+
73
+ // --- Opinionated Extras ---
74
+
75
+ // Styled Blockquote
76
+ "blockquote": {
77
+ "border-left-width": "4px",
78
+ "border-left-color": "var(--clampography-primary)",
79
+ "background-color": "var(--clampography-surface)",
80
+ "padding": "1rem",
81
+ "border-radius": "0.25rem",
82
+ "font-style": "italic",
83
+ "color": "var(--clampography-heading)",
84
+ },
85
+
86
+ // Styled Links (Enhanced)
87
+ "a": {
88
+ "font-weight": "700",
89
+ "letter-spacing": "0.025em",
90
+ "text-decoration-line": "underline",
91
+ "text-decoration-thickness": "2px",
92
+ "text-underline-offset": "4px",
93
+ "transition-property": "color, text-decoration-color",
94
+ "transition-duration": "150ms",
95
+ },
96
+
97
+ "a:hover": {
98
+ "text-decoration-color": "var(--clampography-primary)",
99
+ },
100
+
101
+ // Mark
102
+ "mark": {
103
+ "background-color": "var(--clampography-primary)",
104
+ "color": "var(--clampography-background)",
105
+ },
106
+
107
+ // Deleted Text
108
+ "del": {
109
+ "text-decoration-color": "var(--clampography-secondary)",
110
+ "text-decoration-thickness": "2px",
111
+ },
112
+
113
+ // Fieldset
114
+ "fieldset": {
115
+ "border": "1px solid var(--clampography-border)",
116
+ "border-radius": "0.375rem",
117
+ },
118
+
119
+ "legend": {
120
+ "color": "var(--clampography-heading)",
121
+ },
122
+
123
+ // Details
124
+ "details": {
125
+ "border": "1px solid var(--clampography-border)",
126
+ "border-radius": "0.375rem",
127
+ "padding": "0.5rem",
128
+ },
129
+
130
+ "summary": {
131
+ "color": "var(--clampography-heading)",
132
+ },
133
+
134
+ "details[open] > summary": {
135
+ "border-bottom": "1px solid var(--clampography-border)",
136
+ "padding-bottom": "0.5rem",
137
+ },
138
+ };