dynamic-ds 1.0.7 → 1.0.8

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 (6) hide show
  1. package/README.md +339 -270
  2. package/package.json +1 -1
  3. package/src/lib/styles/_animations.scss +1012 -300
  4. package/src/lib/styles/_spacing.scss +1413 -563
  5. package/src/lib/styles/_typography.scss +293 -148
  6. package/src/lib/styles/icons.scss +3135 -0
package/src/lib/styles/_typography.scss CHANGED
@@ -7,9 +7,13 @@
7
7
  // ============================================================================
8
8
  // 1. FONT FAMILY TOKENS
9
9
  // ============================================================================
10
- $font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
11
- $font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
12
- $font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
10
+ $font-family-sans:
11
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
12
+ Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
13
+ $font-family-mono:
14
+ ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
15
+ monospace;
16
+ $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
13
17
 
14
18
  :root {
15
19
  --font-sans: #{$font-family-sans};
@@ -21,30 +25,30 @@ $font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
21
25
  // 2. FONT SIZE SCALE (Based on 4px grid, rem units)
22
26
  // ============================================================================
23
27
  // Using modular scale with 1rem = 16px base
24
- $font-size-2xs: 0.625rem; // 10px
25
- $font-size-xs: 0.75rem; // 12px
26
- $font-size-sm: 0.875rem; // 14px
27
- $font-size-base: 1rem; // 16px
28
- $font-size-lg: 1.125rem; // 18px
29
- $font-size-xl: 1.25rem; // 20px
30
- $font-size-2xl: 1.5rem; // 24px
31
- $font-size-3xl: 1.875rem; // 30px
32
- $font-size-4xl: 2.25rem; // 36px
33
- $font-size-5xl: 3rem; // 48px
34
- $font-size-6xl: 3.75rem; // 60px
28
+ $font-size-2xs: 0.625rem; // 10px
29
+ $font-size-xs: 0.75rem; // 12px
30
+ $font-size-sm: 0.875rem; // 14px
31
+ $font-size-base: 1rem; // 16px
32
+ $font-size-lg: 1.125rem; // 18px
33
+ $font-size-xl: 1.25rem; // 20px
34
+ $font-size-2xl: 1.5rem; // 24px
35
+ $font-size-3xl: 1.875rem; // 30px
36
+ $font-size-4xl: 2.25rem; // 36px
37
+ $font-size-5xl: 3rem; // 48px
38
+ $font-size-6xl: 3.75rem; // 60px
35
39
 
36
40
  $font-sizes-map: (
37
- '2xs': $font-size-2xs,
38
- 'xs': $font-size-xs,
39
- 'sm': $font-size-sm,
40
- 'base': $font-size-base,
41
- 'lg': $font-size-lg,
42
- 'xl': $font-size-xl,
43
- '2xl': $font-size-2xl,
44
- '3xl': $font-size-3xl,
45
- '4xl': $font-size-4xl,
46
- '5xl': $font-size-5xl,
47
- '6xl': $font-size-6xl,
41
+ "2xs": $font-size-2xs,
42
+ "xs": $font-size-xs,
43
+ "sm": $font-size-sm,
44
+ "base": $font-size-base,
45
+ "lg": $font-size-lg,
46
+ "xl": $font-size-xl,
47
+ "2xl": $font-size-2xl,
48
+ "3xl": $font-size-3xl,
49
+ "4xl": $font-size-4xl,
50
+ "5xl": $font-size-5xl,
51
+ "6xl": $font-size-6xl,
48
52
  );
49
53
 
50
54
  :root {
@@ -75,15 +79,15 @@ $font-weight-extrabold: 800;
75
79
  $font-weight-black: 900;
76
80
 
77
81
  $font-weights: (
78
- 'thin': $font-weight-thin,
79
- 'extralight': $font-weight-extralight,
80
- 'light': $font-weight-light,
81
- 'normal': $font-weight-normal,
82
- 'medium': $font-weight-medium,
83
- 'semibold': $font-weight-semibold,
84
- 'bold': $font-weight-bold,
85
- 'extrabold': $font-weight-extrabold,
86
- 'black': $font-weight-black,
82
+ "thin": $font-weight-thin,
83
+ "extralight": $font-weight-extralight,
84
+ "light": $font-weight-light,
85
+ "normal": $font-weight-normal,
86
+ "medium": $font-weight-medium,
87
+ "semibold": $font-weight-semibold,
88
+ "bold": $font-weight-bold,
89
+ "extrabold": $font-weight-extrabold,
90
+ "black": $font-weight-black,
87
91
  );
88
92
 
89
93
  :root {
@@ -109,12 +113,12 @@ $line-height-relaxed: 1.625;
109
113
  $line-height-loose: 2;
110
114
 
111
115
  $line-heights: (
112
- 'none': $line-height-none,
113
- 'tight': $line-height-tight,
114
- 'snug': $line-height-snug,
115
- 'normal': $line-height-normal,
116
- 'relaxed': $line-height-relaxed,
117
- 'loose': $line-height-loose,
116
+ "none": $line-height-none,
117
+ "tight": $line-height-tight,
118
+ "snug": $line-height-snug,
119
+ "normal": $line-height-normal,
120
+ "relaxed": $line-height-relaxed,
121
+ "loose": $line-height-loose,
118
122
  );
119
123
 
120
124
  :root {
@@ -137,12 +141,12 @@ $letter-spacing-wider: 0.05em;
137
141
  $letter-spacing-widest: 0.1em;
138
142
 
139
143
  $letter-spacings: (
140
- 'tighter': $letter-spacing-tighter,
141
- 'tight': $letter-spacing-tight,
142
- 'normal': $letter-spacing-normal,
143
- 'wide': $letter-spacing-wide,
144
- 'wider': $letter-spacing-wider,
145
- 'widest': $letter-spacing-widest,
144
+ "tighter": $letter-spacing-tighter,
145
+ "tight": $letter-spacing-tight,
146
+ "normal": $letter-spacing-normal,
147
+ "wide": $letter-spacing-wide,
148
+ "wider": $letter-spacing-wider,
149
+ "widest": $letter-spacing-widest,
146
150
  );
147
151
 
148
152
  :root {
@@ -161,27 +165,40 @@ $letter-spacings: (
161
165
 
162
166
  :root {
163
167
  // Display headings (for hero sections, landing pages)
164
- --heading-display-xl: #{$font-weight-bold} #{$font-size-6xl}/#{$line-height-tight} var(--font-sans);
165
- --heading-display-lg: #{$font-weight-bold} #{$font-size-5xl}/#{$line-height-tight} var(--font-sans);
166
- --heading-display-md: #{$font-weight-bold} #{$font-size-4xl}/#{$line-height-tight} var(--font-sans);
167
-
168
+ --heading-display-xl: #{$font-weight-bold}
169
+ #{$font-size-6xl}/#{$line-height-tight} var(--font-sans);
170
+ --heading-display-lg: #{$font-weight-bold}
171
+ #{$font-size-5xl}/#{$line-height-tight} var(--font-sans);
172
+ --heading-display-md: #{$font-weight-bold}
173
+ #{$font-size-4xl}/#{$line-height-tight} var(--font-sans);
174
+
168
175
  // Standard headings
169
- --heading-h1: #{$font-weight-bold} #{$font-size-3xl}/#{$line-height-tight} var(--font-sans);
170
- --heading-h2: #{$font-weight-semibold} #{$font-size-2xl}/#{$line-height-snug} var(--font-sans);
171
- --heading-h3: #{$font-weight-semibold} #{$font-size-xl}/#{$line-height-snug} var(--font-sans);
172
- --heading-h4: #{$font-weight-semibold} #{$font-size-lg}/#{$line-height-normal} var(--font-sans);
173
- --heading-h5: #{$font-weight-medium} #{$font-size-base}/#{$line-height-normal} var(--font-sans);
174
- --heading-h6: #{$font-weight-medium} #{$font-size-sm}/#{$line-height-normal} var(--font-sans);
176
+ --heading-h1: #{$font-weight-bold} #{$font-size-3xl}/#{$line-height-tight}
177
+ var(--font-sans);
178
+ --heading-h2: #{$font-weight-semibold} #{$font-size-2xl}/#{$line-height-snug}
179
+ var(--font-sans);
180
+ --heading-h3: #{$font-weight-semibold} #{$font-size-xl}/#{$line-height-snug}
181
+ var(--font-sans);
182
+ --heading-h4: #{$font-weight-semibold} #{$font-size-lg}/#{$line-height-normal}
183
+ var(--font-sans);
184
+ --heading-h5: #{$font-weight-medium} #{$font-size-base}/#{$line-height-normal}
185
+ var(--font-sans);
186
+ --heading-h6: #{$font-weight-medium} #{$font-size-sm}/#{$line-height-normal}
187
+ var(--font-sans);
175
188
  }
176
189
 
177
190
  // ============================================================================
178
191
  // 7. BODY TEXT PRESETS
179
192
  // ============================================================================
180
193
  :root {
181
- --body-lg: #{$font-weight-normal} #{$font-size-lg}/#{$line-height-relaxed} var(--font-sans);
182
- --body-base: #{$font-weight-normal} #{$font-size-base}/#{$line-height-normal} var(--font-sans);
183
- --body-sm: #{$font-weight-normal} #{$font-size-sm}/#{$line-height-normal} var(--font-sans);
184
- --body-xs: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal} var(--font-sans);
194
+ --body-lg: #{$font-weight-normal} #{$font-size-lg}/#{$line-height-relaxed}
195
+ var(--font-sans);
196
+ --body-base: #{$font-weight-normal} #{$font-size-base}/#{$line-height-normal}
197
+ var(--font-sans);
198
+ --body-sm: #{$font-weight-normal} #{$font-size-sm}/#{$line-height-normal}
199
+ var(--font-sans);
200
+ --body-xs: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal}
201
+ var(--font-sans);
185
202
  }
186
203
 
187
204
  // ============================================================================
@@ -189,28 +206,42 @@ $letter-spacings: (
189
206
  // ============================================================================
190
207
  :root {
191
208
  // Labels
192
- --label-lg: #{$font-weight-medium} #{$font-size-base}/#{$line-height-tight} var(--font-sans);
193
- --label-base: #{$font-weight-medium} #{$font-size-sm}/#{$line-height-tight} var(--font-sans);
194
- --label-sm: #{$font-weight-medium} #{$font-size-xs}/#{$line-height-tight} var(--font-sans);
195
-
209
+ --label-lg: #{$font-weight-medium} #{$font-size-base}/#{$line-height-tight}
210
+ var(--font-sans);
211
+ --label-base: #{$font-weight-medium} #{$font-size-sm}/#{$line-height-tight}
212
+ var(--font-sans);
213
+ --label-sm: #{$font-weight-medium} #{$font-size-xs}/#{$line-height-tight}
214
+ var(--font-sans);
215
+
196
216
  // Captions
197
- --caption: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal} var(--font-sans);
198
- --caption-strong: #{$font-weight-medium} #{$font-size-xs}/#{$line-height-normal} var(--font-sans);
199
-
217
+ --caption: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal}
218
+ var(--font-sans);
219
+ --caption-strong: #{$font-weight-medium}
220
+ #{$font-size-xs}/#{$line-height-normal} var(--font-sans);
221
+
200
222
  // Overline (small caps style)
201
- --overline: #{$font-weight-semibold} #{$font-size-2xs}/#{$line-height-normal} var(--font-sans);
202
-
223
+ --overline: #{$font-weight-semibold} #{$font-size-2xs}/#{$line-height-normal}
224
+ var(--font-sans);
225
+
203
226
  // Code/Monospace
204
- --code: #{$font-weight-normal} #{$font-size-sm}/#{$line-height-normal} var(--font-mono);
205
- --code-sm: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal} var(--font-mono);
227
+ --code: #{$font-weight-normal} #{$font-size-sm}/#{$line-height-normal}
228
+ var(--font-mono);
229
+ --code-sm: #{$font-weight-normal} #{$font-size-xs}/#{$line-height-normal}
230
+ var(--font-mono);
206
231
  }
207
232
 
208
233
  // ============================================================================
209
234
  // 9. FONT FAMILY UTILITY CLASSES
210
235
  // ============================================================================
211
- .font-sans { font-family: var(--font-sans) !important; }
212
- .font-mono { font-family: var(--font-mono) !important; }
213
- .font-serif { font-family: var(--font-serif) !important; }
236
+ .font-sans {
237
+ font-family: var(--font-sans) !important;
238
+ }
239
+ .font-mono {
240
+ font-family: var(--font-mono) !important;
241
+ }
242
+ .font-serif {
243
+ font-family: var(--font-serif) !important;
244
+ }
214
245
 
215
246
  // ============================================================================
216
247
  // 10. FONT SIZE UTILITY CLASSES
@@ -240,14 +271,30 @@ $letter-spacings: (
240
271
  }
241
272
 
242
273
  // Fixed line heights (for precise control)
243
- .leading-3 { line-height: 0.75rem !important; } // 12px
244
- .leading-4 { line-height: 1rem !important; } // 16px
245
- .leading-5 { line-height: 1.25rem !important; } // 20px
246
- .leading-6 { line-height: 1.5rem !important; } // 24px
247
- .leading-7 { line-height: 1.75rem !important; } // 28px
248
- .leading-8 { line-height: 2rem !important; } // 32px
249
- .leading-9 { line-height: 2.25rem !important; } // 36px
250
- .leading-10 { line-height: 2.5rem !important; } // 40px
274
+ .leading-3 {
275
+ line-height: 0.75rem !important;
276
+ } // 12px
277
+ .leading-4 {
278
+ line-height: 1rem !important;
279
+ } // 16px
280
+ .leading-5 {
281
+ line-height: 1.25rem !important;
282
+ } // 20px
283
+ .leading-6 {
284
+ line-height: 1.5rem !important;
285
+ } // 24px
286
+ .leading-7 {
287
+ line-height: 1.75rem !important;
288
+ } // 28px
289
+ .leading-8 {
290
+ line-height: 2rem !important;
291
+ } // 32px
292
+ .leading-9 {
293
+ line-height: 2.25rem !important;
294
+ } // 36px
295
+ .leading-10 {
296
+ line-height: 2.5rem !important;
297
+ } // 40px
251
298
 
252
299
  // ============================================================================
253
300
  // 13. LETTER SPACING UTILITY CLASSES
@@ -261,40 +308,84 @@ $letter-spacings: (
261
308
  // ============================================================================
262
309
  // 14. TEXT ALIGNMENT UTILITY CLASSES
263
310
  // ============================================================================
264
- .text-left { text-align: left !important; }
265
- .text-center { text-align: center !important; }
266
- .text-right { text-align: right !important; }
267
- .text-justify { text-align: justify !important; }
268
- .text-start { text-align: start !important; }
269
- .text-end { text-align: end !important; }
311
+ .text-left {
312
+ text-align: left !important;
313
+ }
314
+ .text-center {
315
+ text-align: center !important;
316
+ }
317
+ .text-right {
318
+ text-align: right !important;
319
+ }
320
+ .text-justify {
321
+ text-align: justify !important;
322
+ }
323
+ .text-start {
324
+ text-align: start !important;
325
+ }
326
+ .text-end {
327
+ text-align: end !important;
328
+ }
270
329
 
271
330
  // ============================================================================
272
331
  // 15. TEXT DECORATION UTILITY CLASSES
273
332
  // ============================================================================
274
- .underline { text-decoration: underline !important; }
275
- .overline { text-decoration: overline !important; }
276
- .line-through { text-decoration: line-through !important; }
277
- .no-underline { text-decoration: none !important; }
333
+ .underline {
334
+ text-decoration: underline !important;
335
+ }
336
+ .overline {
337
+ text-decoration: overline !important;
338
+ }
339
+ .line-through {
340
+ text-decoration: line-through !important;
341
+ }
342
+ .no-underline {
343
+ text-decoration: none !important;
344
+ }
278
345
 
279
346
  // Decoration styles
280
- .decoration-solid { text-decoration-style: solid !important; }
281
- .decoration-double { text-decoration-style: double !important; }
282
- .decoration-dotted { text-decoration-style: dotted !important; }
283
- .decoration-dashed { text-decoration-style: dashed !important; }
284
- .decoration-wavy { text-decoration-style: wavy !important; }
347
+ .decoration-solid {
348
+ text-decoration-style: solid !important;
349
+ }
350
+ .decoration-double {
351
+ text-decoration-style: double !important;
352
+ }
353
+ .decoration-dotted {
354
+ text-decoration-style: dotted !important;
355
+ }
356
+ .decoration-dashed {
357
+ text-decoration-style: dashed !important;
358
+ }
359
+ .decoration-wavy {
360
+ text-decoration-style: wavy !important;
361
+ }
285
362
 
286
363
  // Decoration thickness
287
- .decoration-thin { text-decoration-thickness: 1px !important; }
288
- .decoration-thick { text-decoration-thickness: 2px !important; }
289
- .decoration-auto { text-decoration-thickness: auto !important; }
364
+ .decoration-thin {
365
+ text-decoration-thickness: 1px !important;
366
+ }
367
+ .decoration-thick {
368
+ text-decoration-thickness: 2px !important;
369
+ }
370
+ .decoration-auto {
371
+ text-decoration-thickness: auto !important;
372
+ }
290
373
 
291
374
  // ============================================================================
292
375
  // 16. TEXT TRANSFORM UTILITY CLASSES
293
376
  // ============================================================================
294
- .uppercase { text-transform: uppercase !important; }
295
- .lowercase { text-transform: lowercase !important; }
296
- .capitalize { text-transform: capitalize !important; }
297
- .normal-case { text-transform: none !important; }
377
+ .uppercase {
378
+ text-transform: uppercase !important;
379
+ }
380
+ .lowercase {
381
+ text-transform: lowercase !important;
382
+ }
383
+ .capitalize {
384
+ text-transform: capitalize !important;
385
+ }
386
+ .normal-case {
387
+ text-transform: none !important;
388
+ }
298
389
 
299
390
  // ============================================================================
300
391
  // 17. TEXT OVERFLOW & WRAPPING UTILITY CLASSES
@@ -305,23 +396,45 @@ $letter-spacings: (
305
396
  white-space: nowrap !important;
306
397
  }
307
398
 
308
- .text-ellipsis { text-overflow: ellipsis !important; }
309
- .text-clip { text-overflow: clip !important; }
399
+ .text-ellipsis {
400
+ text-overflow: ellipsis !important;
401
+ }
402
+ .text-clip {
403
+ text-overflow: clip !important;
404
+ }
310
405
 
311
- .whitespace-normal { white-space: normal !important; }
312
- .whitespace-nowrap { white-space: nowrap !important; }
313
- .whitespace-pre { white-space: pre !important; }
314
- .whitespace-pre-line { white-space: pre-line !important; }
315
- .whitespace-pre-wrap { white-space: pre-wrap !important; }
316
- .whitespace-break-spaces { white-space: break-spaces !important; }
406
+ .whitespace-normal {
407
+ white-space: normal !important;
408
+ }
409
+ .whitespace-nowrap {
410
+ white-space: nowrap !important;
411
+ }
412
+ .whitespace-pre {
413
+ white-space: pre !important;
414
+ }
415
+ .whitespace-pre-line {
416
+ white-space: pre-line !important;
417
+ }
418
+ .whitespace-pre-wrap {
419
+ white-space: pre-wrap !important;
420
+ }
421
+ .whitespace-break-spaces {
422
+ white-space: break-spaces !important;
423
+ }
317
424
 
318
- .break-normal {
319
- overflow-wrap: normal !important;
320
- word-break: normal !important;
425
+ .break-normal {
426
+ overflow-wrap: normal !important;
427
+ word-break: normal !important;
428
+ }
429
+ .break-words {
430
+ overflow-wrap: break-word !important;
431
+ }
432
+ .break-all {
433
+ word-break: break-all !important;
434
+ }
435
+ .break-keep {
436
+ word-break: keep-all !important;
321
437
  }
322
- .break-words { overflow-wrap: break-word !important; }
323
- .break-all { word-break: break-all !important; }
324
- .break-keep { word-break: keep-all !important; }
325
438
 
326
439
  // Line clamp utilities (multi-line truncation)
327
440
  .line-clamp-1 {
@@ -374,32 +487,38 @@ $letter-spacings: (
374
487
  color: var(--neutral-color-900);
375
488
  }
376
489
 
377
- .heading-h1, h1.ds {
490
+ .heading-h1,
491
+ h1.ds {
378
492
  font: var(--heading-h1);
379
493
  color: var(--neutral-color-875);
380
494
  margin: 0 0 0.5em;
381
495
  }
382
- .heading-h2, h2.ds {
496
+ .heading-h2,
497
+ h2.ds {
383
498
  font: var(--heading-h2);
384
499
  color: var(--neutral-color-875);
385
500
  margin: 0 0 0.5em;
386
501
  }
387
- .heading-h3, h3.ds {
502
+ .heading-h3,
503
+ h3.ds {
388
504
  font: var(--heading-h3);
389
505
  color: var(--neutral-color-850);
390
506
  margin: 0 0 0.5em;
391
507
  }
392
- .heading-h4, h4.ds {
508
+ .heading-h4,
509
+ h4.ds {
393
510
  font: var(--heading-h4);
394
511
  color: var(--neutral-color-850);
395
512
  margin: 0 0 0.5em;
396
513
  }
397
- .heading-h5, h5.ds {
514
+ .heading-h5,
515
+ h5.ds {
398
516
  font: var(--heading-h5);
399
517
  color: var(--neutral-color-800);
400
518
  margin: 0 0 0.5em;
401
519
  }
402
- .heading-h6, h6.ds {
520
+ .heading-h6,
521
+ h6.ds {
403
522
  font: var(--heading-h6);
404
523
  color: var(--neutral-color-800);
405
524
  margin: 0 0 0.5em;
@@ -412,7 +531,8 @@ $letter-spacings: (
412
531
  font: var(--body-lg);
413
532
  color: var(--neutral-color-700);
414
533
  }
415
- .body-base, p.ds {
534
+ .body-base,
535
+ p.ds {
416
536
  font: var(--body-base);
417
537
  color: var(--neutral-color-700);
418
538
  margin: 0 0 1em;
@@ -480,32 +600,52 @@ $letter-spacings: (
480
600
  font: var(--body-base);
481
601
  color: var(--neutral-color-700);
482
602
  max-width: 65ch;
483
-
603
+
484
604
  > * + * {
485
605
  margin-top: 1.25em;
486
606
  }
487
-
488
- h1, h2, h3, h4, h5, h6 {
607
+
608
+ h1,
609
+ h2,
610
+ h3,
611
+ h4,
612
+ h5,
613
+ h6 {
489
614
  margin-top: 2em;
490
615
  margin-bottom: 0.75em;
491
616
  }
492
-
493
- h1 { font: var(--heading-h1); color: var(--neutral-color-875); }
494
- h2 { font: var(--heading-h2); color: var(--neutral-color-875); }
495
- h3 { font: var(--heading-h3); color: var(--neutral-color-850); }
496
- h4 { font: var(--heading-h4); color: var(--neutral-color-850); }
497
-
498
- p { margin: 1.25em 0; }
499
-
500
- ul, ol {
617
+
618
+ h1 {
619
+ font: var(--heading-h1);
620
+ color: var(--neutral-color-875);
621
+ }
622
+ h2 {
623
+ font: var(--heading-h2);
624
+ color: var(--neutral-color-875);
625
+ }
626
+ h3 {
627
+ font: var(--heading-h3);
628
+ color: var(--neutral-color-850);
629
+ }
630
+ h4 {
631
+ font: var(--heading-h4);
632
+ color: var(--neutral-color-850);
633
+ }
634
+
635
+ p {
636
+ margin: 1.25em 0;
637
+ }
638
+
639
+ ul,
640
+ ol {
501
641
  padding-left: 1.5em;
502
642
  margin: 1.25em 0;
503
643
  }
504
-
644
+
505
645
  li {
506
646
  margin: 0.5em 0;
507
647
  }
508
-
648
+
509
649
  blockquote {
510
650
  border-left: 3px solid var(--primary-300);
511
651
  padding-left: 1em;
@@ -513,37 +653,37 @@ $letter-spacings: (
513
653
  font-style: italic;
514
654
  color: var(--neutral-color-600);
515
655
  }
516
-
656
+
517
657
  code {
518
658
  font: var(--code);
519
659
  background-color: var(--neutral-color-25);
520
660
  padding: 0.125em 0.25em;
521
661
  border-radius: 0.25em;
522
662
  }
523
-
663
+
524
664
  pre {
525
665
  background-color: var(--neutral-color-875);
526
666
  color: var(--neutral-color-100);
527
667
  padding: 1em;
528
668
  border-radius: 0.5em;
529
669
  overflow-x: auto;
530
-
670
+
531
671
  code {
532
672
  background: none;
533
673
  padding: 0;
534
674
  color: inherit;
535
675
  }
536
676
  }
537
-
677
+
538
678
  a {
539
679
  color: var(--primary-600);
540
680
  text-decoration: underline;
541
-
681
+
542
682
  &:hover {
543
683
  color: var(--primary-700);
544
684
  }
545
685
  }
546
-
686
+
547
687
  hr {
548
688
  border: none;
549
689
  border-top: 1px solid var(--neutral-color-100);
@@ -555,12 +695,17 @@ $letter-spacings: (
555
695
  .prose-sm {
556
696
  @extend .prose;
557
697
  font: var(--body-sm);
558
-
698
+
559
699
  > * + * {
560
700
  margin-top: 1em;
561
701
  }
562
-
563
- h1, h2, h3, h4, h5, h6 {
702
+
703
+ h1,
704
+ h2,
705
+ h3,
706
+ h4,
707
+ h5,
708
+ h6 {
564
709
  margin-top: 1.5em;
565
710
  margin-bottom: 0.5em;
566
711
  }