clampography 2.0.0-beta.5 → 2.0.0-beta.7

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/package.json +1 -1
  2. package/src/base.js +36 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "clampography",
3
- "version": "2.0.0-beta.5",
3
+ "version": "2.0.0-beta.7",
4
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
5
  "main": "src/index.js",
6
6
  "type": "module",
package/src/base.js CHANGED
@@ -6,6 +6,7 @@ export default {
6
6
  // Global CSS Variables (Spacing & Fonts)
7
7
  "@layer base": {
8
8
  ":root": {
9
+ "--spacing-xs": "clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem)",
9
10
  "--spacing-sm": "clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem)",
10
11
  "--spacing-md": "clamp(1rem, 0.75rem + 1.25vw, 1.5rem)",
11
12
  "--spacing-lg": "clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem)",
@@ -29,18 +30,17 @@ export default {
29
30
  "text-wrap": "pretty",
30
31
  },
31
32
 
32
- // Headings Structure
33
+ // Shared Heading Structure
33
34
  ":where(h1, h2, h3, h4, h5, h6)": {
34
35
  "font-weight": "700",
35
36
  "scroll-margin-top": "var(--scroll-offset)",
36
- "font-size": "1rem",
37
- "line-height": "1.5",
38
- "margin-top": "0",
37
+ "margin-top": "var(--spacing-lg)",
39
38
  "margin-bottom": "var(--spacing-xs)",
40
39
  "text-decoration": "none",
41
40
  "break-after": "avoid",
42
41
  },
43
42
 
43
+ // Specific Headings (Values from base.css)
44
44
  "h1": {
45
45
  "font-size": "clamp(2.25rem, 1.95rem + 1.5vw, 3rem)",
46
46
  "line-height": "1.1111",
@@ -49,10 +49,39 @@ export default {
49
49
  "margin-bottom": "var(--spacing-xl)",
50
50
  },
51
51
 
52
+ "h2": {
53
+ "font-size": "clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem)",
54
+ "line-height": "1.3333",
55
+ "font-weight": "700",
56
+ "margin-top": "var(--spacing-xl)",
57
+ "margin-bottom": "var(--spacing-md)",
58
+ },
59
+
60
+ "h3": {
61
+ "font-size": "clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem)",
62
+ "line-height": "1.6",
63
+ "margin-top": "var(--spacing-lg)",
64
+ "margin-bottom": "var(--spacing-sm)",
65
+ },
66
+
67
+ "h4": {
68
+ "font-size": "clamp(1rem, 0.975rem + 0.125vw, 1.125rem)",
69
+ "line-height": "1.5",
70
+ "margin-top": "var(--spacing-lg)",
71
+ "margin-bottom": "var(--spacing-sm)",
72
+ },
73
+
74
+ "h5": {
75
+ "font-size": "1rem",
76
+ "line-height": "1.5",
77
+ "margin-top": "var(--spacing-md)",
78
+ "margin-bottom": "var(--spacing-xs)",
79
+ },
80
+
52
81
  "h6": {
53
82
  "font-size": "0.875rem",
54
83
  "line-height": "1.5",
55
- "margin-top": "0",
84
+ "margin-top": "var(--spacing-md)",
56
85
  "margin-bottom": "var(--spacing-xs)",
57
86
  },
58
87
 
@@ -186,8 +215,8 @@ export default {
186
215
 
187
216
  // Blockquotes
188
217
  "blockquote": {
189
- "margin-top": "0",
190
- "margin-bottom": "0",
218
+ "margin-top": "var(--spacing-lg)",
219
+ "margin-bottom": "var(--spacing-lg)",
191
220
  "padding-left": "var(--spacing-md)",
192
221
  },
193
222