clampography 2.0.0-beta.12 → 2.0.0-beta.13

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/package.json +1 -1
  2. package/src/base.js +0 -2
  3. package/src/extra.js +32 -32
  4. package/src/index.js +15 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "clampography",
3
- "version": "2.0.0-beta.12",
3
+ "version": "2.0.0-beta.13",
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
@@ -83,8 +83,6 @@ export default {
83
83
  // LINKS - Clickable Text (Structural Indicators)
84
84
  a: {
85
85
  "text-decoration-line": "underline",
86
- "text-decoration-thickness": "0.0625em",
87
- "text-underline-offset": "0.15em",
88
86
  cursor: "pointer",
89
87
  },
90
88
 
package/src/extra.js CHANGED
@@ -1,18 +1,18 @@
1
1
  export default {
2
2
  // --- Basic Coloring (Applying theme variables) ---
3
3
  "body": {
4
- "background-color": "oklch(var(--clampography-background))",
5
- "color": "oklch(var(--clampography-text))",
4
+ "background-color": "var(--clampography-background)",
5
+ "color": "var(--clampography-text)",
6
6
  },
7
7
 
8
8
  ":where(h1, h2, h3, h4, h5, h6)": {
9
- "color": "oklch(var(--clampography-heading))",
9
+ "color": "var(--clampography-heading)",
10
10
  },
11
11
 
12
12
  // Styled Links (Enhanced)
13
13
  "a": {
14
- "color": "oklch(var(--clampography-link))",
15
- "font-weight": "700",
14
+ "color": "var(--clampography-link)",
15
+ "font-weight": "600",
16
16
  "letter-spacing": "0.025em",
17
17
  "text-decoration-line": "underline",
18
18
  "text-decoration-thickness": "2px",
@@ -22,23 +22,23 @@ export default {
22
22
  },
23
23
 
24
24
  "a:hover": {
25
- "text-decoration-color": "oklch(var(--clampography-primary))",
25
+ "text-decoration-color": "var(--clampography-link)",
26
26
  },
27
27
 
28
28
  // Lists
29
29
  "ul > li::before": {
30
- "background-color": "oklch(var(--clampography-primary))", // Bullet points
30
+ "background-color": "var(--clampography-primary)", // Bullet points
31
31
  },
32
32
 
33
33
  "ol > li::before": {
34
- "color": "oklch(var(--clampography-secondary))", // Numbers
34
+ "color": "var(--clampography-secondary)", // Numbers
35
35
  },
36
36
 
37
37
  // Inline Code
38
38
  ":where(code, kbd, samp)": {
39
- "background-color": "oklch(var(--clampography-surface))",
40
- "color": "oklch(var(--clampography-heading))",
41
- "border": "1px solid oklch(var(--clampography-border))",
39
+ "background-color": "var(--clampography-surface)",
40
+ "color": "var(--clampography-heading)",
41
+ "border": "1px solid var(--clampography-border)",
42
42
  "border-radius": "0.25rem",
43
43
  "padding": "0.125rem var(--spacing-xs)",
44
44
  },
@@ -50,8 +50,8 @@ export default {
50
50
 
51
51
  // Preformatted Code Blocks
52
52
  "pre": {
53
- "background-color": "oklch(var(--clampography-surface))",
54
- "border": "1px solid oklch(var(--clampography-border))",
53
+ "background-color": "var(--clampography-surface)",
54
+ "border": "1px solid var(--clampography-border)",
55
55
  "border-radius": "0.375rem",
56
56
  "padding": "1rem",
57
57
  },
@@ -59,15 +59,15 @@ export default {
59
59
  // Tables
60
60
  "table": {
61
61
  "padding": "var(--spacing-sm)",
62
- "border": "1px solid oklch(var(--clampography-border))",
62
+ "border": "1px solid var(--clampography-border)",
63
63
  },
64
64
 
65
65
  "th": {
66
- "color": "oklch(var(--clampography-heading))",
66
+ "color": "var(--clampography-heading)",
67
67
  },
68
68
 
69
69
  "th, td": {
70
- "border": "1px solid oklch(var(--clampography-border))",
70
+ "border": "1px solid var(--clampography-border)",
71
71
  },
72
72
 
73
73
  "thead th": {
@@ -76,12 +76,12 @@ export default {
76
76
 
77
77
  // Zebra striping for table rows
78
78
  "tbody tr:nth-child(even)": {
79
- "background-color": "oklch(var(--clampography-surface))",
79
+ "background-color": "var(--clampography-surface)",
80
80
  },
81
81
 
82
82
  // Captions & Muted text
83
83
  "caption, figcaption, .muted": {
84
- "color": "oklch(var(--clampography-muted))",
84
+ "color": "var(--clampography-muted)",
85
85
  },
86
86
 
87
87
  // Horizontal Rule (Thematic)
@@ -90,31 +90,31 @@ export default {
90
90
  "border-width": "0",
91
91
  "margin-top": "3rem",
92
92
  "margin-bottom": "3rem",
93
- "background-color": "oklch(var(--clampography-border))",
93
+ "background-color": "var(--clampography-border)",
94
94
  },
95
95
 
96
96
  // Styled Blockquote
97
97
  "blockquote": {
98
98
  "border-left-width": "4px",
99
- "border-left-color": "oklch(var(--clampography-primary))",
100
- "background-color": "oklch(var(--clampography-surface))",
99
+ "border-left-color": "var(--clampography-primary)",
100
+ "background-color": "var(--clampography-surface)",
101
101
  "padding": "1rem",
102
102
  "border-radius": "0.25rem",
103
103
  "font-style": "italic",
104
- "color": "oklch(var(--clampography-heading))",
104
+ "color": "var(--clampography-heading)",
105
105
  },
106
106
 
107
107
  // Mark
108
108
  "mark": {
109
- "background-color": "oklch(var(--clampography-primary))",
110
- "color": "oklch(var(--clampography-background))",
109
+ "background-color": "var(--clampography-primary)",
110
+ "color": "var(--clampography-background)",
111
111
  "padding": "0.125rem var(--spacing-xs)",
112
112
  "border-radius": "0.25rem",
113
113
  },
114
114
 
115
115
  // Deleted Text
116
116
  "del": {
117
- "text-decoration-color": "oklch(var(--clampography-secondary))",
117
+ "text-decoration-color": "var(--clampography-secondary)",
118
118
  "text-decoration-thickness": "2px",
119
119
  },
120
120
 
@@ -122,7 +122,7 @@ export default {
122
122
  // WILL BE REMOVED FROM THIS FILE
123
123
  ":where(button, [type='button'], [type='reset'], [type='submit'])": {
124
124
  "padding": "var(--spacing-xs) var(--spacing-sm)",
125
- "border": "1px solid oklch(var(--clampography-border))",
125
+ "border": "1px solid var(--clampography-border)",
126
126
  "border-radius": "0.375rem", // ← Rounded corners
127
127
  },
128
128
 
@@ -130,33 +130,33 @@ export default {
130
130
  // WILL BE REMOVED FROM THIS FILE
131
131
  ":where(input:not([type='checkbox'], [type='radio']), textarea, select)": {
132
132
  "padding": "var(--spacing-xs) var(--spacing-sm)",
133
- "border": "1px solid oklch(var(--clampography-border))",
133
+ "border": "1px solid var(--clampography-border)",
134
134
  "border-radius": "0.375rem", // ← Rounded corners
135
135
  },
136
136
 
137
137
  // Fieldset
138
138
  "fieldset": {
139
- "border": "1px solid oklch(var(--clampography-border))",
139
+ "border": "1px solid var(--clampography-border)",
140
140
  "border-radius": "0.375rem",
141
141
  },
142
142
 
143
143
  "legend": {
144
- "color": "oklch(var(--clampography-heading))",
144
+ "color": "var(--clampography-heading)",
145
145
  },
146
146
 
147
147
  // Details
148
148
  "details": {
149
- "border": "1px solid oklch(var(--clampography-border))",
149
+ "border": "1px solid var(--clampography-border)",
150
150
  "border-radius": "0.375rem",
151
151
  "padding": "0.5rem",
152
152
  },
153
153
 
154
154
  "summary": {
155
- "color": "oklch(var(--clampography-heading))",
155
+ "color": "var(--clampography-heading)",
156
156
  },
157
157
 
158
158
  "details[open] > summary": {
159
- "border-bottom": "1px solid oklch(var(--clampography-border))",
159
+ "border-bottom": "1px solid var(--clampography-border)",
160
160
  "padding-bottom": "0.5rem",
161
161
  },
162
162
  };
package/src/index.js CHANGED
@@ -33,6 +33,7 @@ export default plugin.withOptions(
33
33
  let defaultThemeName = null;
34
34
  let prefersDarkTheme = false;
35
35
  let rootSelector = options.root ?? ":root";
36
+ let isAllThemes = false; // Track if user specified "all"
36
37
 
37
38
  // Normalize input to an array of strings
38
39
  let rawThemeList = [];
@@ -40,6 +41,7 @@ export default plugin.withOptions(
40
41
  if (typeof configThemes === "string") {
41
42
  if (["all", "true", "yes"].includes(configThemes.trim())) {
42
43
  // Special case: themes: all
44
+ isAllThemes = true;
43
45
  rawThemeList = Object.keys(builtInThemes);
44
46
  } else if (["false", "none", "no"].includes(configThemes.trim())) {
45
47
  // Explicitly disabled themes
@@ -85,7 +87,19 @@ export default plugin.withOptions(
85
87
  themesToInclude.length === 0 && !defaultThemeName && !prefersDarkTheme
86
88
  ) return;
87
89
 
88
- // 4. Generate CSS
90
+ // 4. Auto-configure defaults for "themes: all"
91
+ // If user didn't specify --default or --prefersdark flags,
92
+ // automatically set light as default and dark for prefers-color-scheme
93
+ if (isAllThemes) {
94
+ if (!defaultThemeName && themesToInclude.includes("light")) {
95
+ defaultThemeName = "light";
96
+ }
97
+ if (!prefersDarkTheme && themesToInclude.includes("dark")) {
98
+ prefersDarkTheme = "dark";
99
+ }
100
+ }
101
+
102
+ // 5. Generate CSS
89
103
  const themeStyles = {};
90
104
 
91
105
  // A. Default theme (:root)