astro-blog-kit 0.2.8 → 0.3.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.
Files changed (3) hide show
  1. package/components/CommentForm.astro +20 -20
  2. package/components/Comments.astro +14 -14
  3. package/package.json +1 -1
package/components/CommentForm.astro CHANGED
@@ -170,14 +170,14 @@ const { postId, apiRoute = "/api/comments", replyToId } = Astro.props;
170
170
  max-width: 720px;
171
171
  margin: 3rem auto 0;
172
172
  padding: 0 2rem 4rem;
173
- font-family: var(--font-body);
173
+ font-family: var(--bk-font-body);
174
174
  }
175
175
 
176
176
  .comment-form__title {
177
- font-family: var(--font-display);
177
+ font-family: var(--bk-font-display);
178
178
  font-size: 1.35rem;
179
179
  font-weight: 700;
180
- color: var(--color-text);
180
+ color: var(--bk-text);
181
181
  margin: 0 0 1.5rem;
182
182
  }
183
183
 
@@ -206,9 +206,9 @@ const { postId, apiRoute = "/api/comments", replyToId } = Astro.props;
206
206
  align-items: center;
207
207
  gap: 0.5rem;
208
208
  font-size: 0.85rem;
209
- color: var(--color-muted);
210
- background: var(--color-surface);
211
- border: 1px solid var(--color-border);
209
+ color: var(--bk-muted);
210
+ background: var(--bk-surface);
211
+ border: 1px solid var(--bk-border);
212
212
  border-radius: 6px;
213
213
  padding: 0.5rem 0.75rem;
214
214
  margin-bottom: 1rem;
@@ -224,12 +224,12 @@ const { postId, apiRoute = "/api/comments", replyToId } = Astro.props;
224
224
  border: none;
225
225
  cursor: pointer;
226
226
  font-size: 0.8rem;
227
- color: var(--color-muted);
227
+ color: var(--bk-muted);
228
228
  padding: 0;
229
229
  }
230
230
 
231
231
  .comment-form__reply-indicator button:hover {
232
- color: var(--color-accent);
232
+ color: var(--bk-accent);
233
233
  }
234
234
 
235
235
  .comment-form__row {
@@ -254,25 +254,25 @@ const { postId, apiRoute = "/api/comments", replyToId } = Astro.props;
254
254
  .comment-form__label {
255
255
  font-size: 0.8rem;
256
256
  font-weight: 600;
257
- color: var(--color-text);
258
- font-family: var(--font-mono);
257
+ color: var(--bk-text);
258
+ font-family: var(--bk-font-mono);
259
259
  letter-spacing: 0.5px;
260
260
  text-transform: uppercase;
261
261
  }
262
262
 
263
263
  .comment-form__label span {
264
- color: var(--color-accent);
264
+ color: var(--bk-accent);
265
265
  }
266
266
 
267
267
  .comment-form__input,
268
268
  .comment-form__textarea {
269
- background: var(--color-surface);
270
- border: 1px solid var(--color-border);
269
+ background: var(--bk-surface);
270
+ border: 1px solid var(--bk-border);
271
271
  border-radius: 6px;
272
272
  padding: 0.65rem 0.9rem;
273
273
  font-size: 0.95rem;
274
- font-family: var(--font-body);
275
- color: var(--color-text);
274
+ font-family: var(--bk-font-body);
275
+ color: var(--bk-text);
276
276
  transition: border-color 0.15s;
277
277
  width: 100%;
278
278
  box-sizing: border-box;
@@ -281,7 +281,7 @@ const { postId, apiRoute = "/api/comments", replyToId } = Astro.props;
281
281
  .comment-form__input:focus,
282
282
  .comment-form__textarea:focus {
283
283
  outline: none;
284
- border-color: var(--color-accent);
284
+ border-color: var(--bk-accent);
285
285
  }
286
286
 
287
287
  .comment-form__textarea {
@@ -291,20 +291,20 @@ const { postId, apiRoute = "/api/comments", replyToId } = Astro.props;
291
291
 
292
292
  .comment-form__hint {
293
293
  font-size: 0.75rem;
294
- color: var(--color-muted);
294
+ color: var(--bk-muted);
295
295
  margin: 0;
296
296
  }
297
297
 
298
298
  .comment-form__submit {
299
299
  margin-top: 1.25rem;
300
300
  padding: 0.7rem 1.75rem;
301
- background: var(--color-accent);
302
- color: var(--color-bg);
301
+ background: var(--bk-accent);
302
+ color: var(--bk-bg);
303
303
  border: none;
304
304
  border-radius: 6px;
305
305
  font-size: 0.9rem;
306
306
  font-weight: 700;
307
- font-family: var(--font-mono);
307
+ font-family: var(--bk-font-mono);
308
308
  letter-spacing: 0.5px;
309
309
  cursor: pointer;
310
310
  transition: opacity 0.15s;
package/components/Comments.astro CHANGED
@@ -121,21 +121,21 @@ const getReplies = (parentId: number) =>
121
121
  max-width: 720px;
122
122
  margin: 4rem auto 0;
123
123
  padding: 0 2rem;
124
- font-family: var(--font-body);
124
+ font-family: var(--bk-font-body);
125
125
  }
126
126
 
127
127
  .comments__title {
128
- font-family: var(--font-display);
128
+ font-family: var(--bk-font-display);
129
129
  font-size: 1.5rem;
130
130
  font-weight: 700;
131
- color: var(--color-text);
131
+ color: var(--bk-text);
132
132
  margin: 0 0 2rem;
133
133
  padding-bottom: 1rem;
134
- border-bottom: 1px solid var(--color-border);
134
+ border-bottom: 1px solid var(--bk-border);
135
135
  }
136
136
 
137
137
  .comments__empty {
138
- color: var(--color-muted);
138
+ color: var(--bk-muted);
139
139
  font-size: 0.95rem;
140
140
  }
141
141
 
@@ -157,7 +157,7 @@ const getReplies = (parentId: number) =>
157
157
 
158
158
  .comment--reply {
159
159
  padding-left: 1.5rem;
160
- border-left: 2px solid var(--color-border);
160
+ border-left: 2px solid var(--bk-border);
161
161
  }
162
162
 
163
163
  .comment__header {
@@ -171,7 +171,7 @@ const getReplies = (parentId: number) =>
171
171
  height: 48px;
172
172
  border-radius: 50%;
173
173
  object-fit: cover;
174
- border: 2px solid var(--color-border);
174
+ border: 2px solid var(--bk-border);
175
175
  flex-shrink: 0;
176
176
  }
177
177
 
@@ -189,18 +189,18 @@ const getReplies = (parentId: number) =>
189
189
  .comment__author {
190
190
  font-size: 0.9rem;
191
191
  font-weight: 700;
192
- color: var(--color-text);
192
+ color: var(--bk-text);
193
193
  }
194
194
 
195
195
  .comment__date {
196
196
  font-size: 0.75rem;
197
- color: var(--color-muted);
198
- font-family: var(--font-mono);
197
+ color: var(--bk-muted);
198
+ font-family: var(--bk-font-mono);
199
199
  }
200
200
 
201
201
  .comment__body {
202
202
  font-size: 0.95rem;
203
- color: var(--color-muted-light);
203
+ color: var(--bk-muted-light);
204
204
  line-height: 1.75;
205
205
  }
206
206
 
@@ -218,14 +218,14 @@ const getReplies = (parentId: number) =>
218
218
  border: none;
219
219
  cursor: pointer;
220
220
  font-size: 0.8rem;
221
- font-family: var(--font-mono);
222
- color: var(--color-muted);
221
+ font-family: var(--bk-font-mono);
222
+ color: var(--bk-muted);
223
223
  padding: 0;
224
224
  transition: color 0.15s;
225
225
  }
226
226
 
227
227
  .comment__reply-btn:hover {
228
- color: var(--color-accent);
228
+ color: var(--bk-accent);
229
229
  }
230
230
 
231
231
  .comment__replies {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "astro-blog-kit",
3
- "version": "0.2.8",
3
+ "version": "0.3.0",
4
4
  "description": "A ready-to-use blog system for Astro with WordPress headless support, optional i18n, multiple layouts, and a comment system.",
5
5
  "type": "module",
6
6
  "license": "MIT",