@hackersheet/react-document-content-styles 0.1.0-alpha.12 → 0.1.0-alpha.14

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/dist/basic.module.css +45 -30
  2. package/package.json +3 -3
package/dist/basic.module.css CHANGED
@@ -18,7 +18,7 @@
18
18
  margin: 4rem 0 1.5rem 0;
19
19
  padding: 0.5rem 0;
20
20
  font-weight: 700;
21
- border-bottom: 1px solid hsl(var(--hsdc-border));
21
+ border-bottom: 1px solid var(--hsdc-border);
22
22
  }
23
23
  .main h1 {
24
24
  font-size: 2rem;
@@ -91,17 +91,17 @@
91
91
  border-collapse: separate;
92
92
  border-radius: 0.25rem;
93
93
  border-spacing: 0;
94
- border: 1px solid hsl(var(--hsdc-border));
94
+ border: 1px solid var(--hsdc-border);
95
95
  overflow: hidden;
96
96
  }
97
97
  .main table:not(:global(.gist-block) table) thead {
98
- background-color: hsl(var(--hsdc-muted));
98
+ background-color: var(--hsdc-muted);
99
99
  }
100
100
  .main table:not(:global(.gist-block) table) tbody td {
101
- border-top: 1px solid hsl(var(--hsdc-border));
101
+ border-top: 1px solid var(--hsdc-border);
102
102
  }
103
103
  .main table:not(:global(.gist-block) table) tbody tr:hover {
104
- background-color: hsl(var(--hsdc-muted)/0.5);
104
+ background-color: oklch(from var(--hsdc-muted) l c h/0.5);
105
105
  }
106
106
  .main table:not(:global(.gist-block) table) th,
107
107
  .main table:not(:global(.gist-block) table) td {
@@ -131,14 +131,14 @@
131
131
  font-family: var(--hsdc-font-code);
132
132
  font-size: 0.875em;
133
133
  line-height: 1.5;
134
- border: 1px solid hsl(var(--hsdc-border));
135
- background-color: hsl(var(--hsdc-muted));
134
+ border: 1px solid var(--hsdc-border);
135
+ background-color: var(--hsdc-muted);
136
136
  }
137
137
  .main blockquote {
138
138
  margin: 1.8rem 0;
139
139
  padding: 0.5rem 1rem;
140
- border-left: 0.25em solid hsl(var(--hsdc-border));
141
- color: hsl(var(--hsdc-muted-foreground));
140
+ border-left: 0.25em solid var(--hsdc-border);
141
+ color: var(--hsdc-muted-foreground);
142
142
  }
143
143
  .main blockquote > :first-child {
144
144
  margin-top: 0;
@@ -150,7 +150,7 @@
150
150
  margin: 0 0.75em;
151
151
  }
152
152
  .main a:not(article a) {
153
- color: hsl(var(--hsdc-link));
153
+ color: var(--hsdc-link);
154
154
  }
155
155
  .main a:not(article a):hover {
156
156
  text-decoration-line: underline;
@@ -159,7 +159,7 @@
159
159
  cursor: pointer;
160
160
  }
161
161
  .main summary:hover {
162
- background-color: hsl(var(--hsdc-muted)/0.5);
162
+ background-color: oklch(from var(--hsdc-muted) l c h/0.5);
163
163
  }
164
164
 
165
165
  .main :global(.heading):has(a) {
@@ -177,7 +177,7 @@
177
177
  width: 1em;
178
178
  height: 1em;
179
179
  vertical-align: middle;
180
- color: hsl(var(--hsdc-muted-foreground));
180
+ color: var(--hsdc-muted-foreground);
181
181
  }
182
182
  .main :global(.heading):hover :global(.heading-link-icon) {
183
183
  display: inline-block;
@@ -185,8 +185,8 @@
185
185
  .main :global(.footnotes) {
186
186
  margin-top: 4rem;
187
187
  padding-top: 2rem;
188
- border-top: 1px solid hsl(var(--hsdc-border));
189
- color: hsl(var(--hsdc-muted-foreground));
188
+ border-top: 1px solid var(--hsdc-border);
189
+ color: var(--hsdc-muted-foreground);
190
190
  }
191
191
  .main :global(.footnotes) p {
192
192
  margin: 0;
@@ -223,7 +223,7 @@
223
223
  }
224
224
  .main :global(.code-block) {
225
225
  margin: 1.5rem 0;
226
- border: 1px solid hsl(var(--hsdc-border));
226
+ border: 1px solid var(--hsdc-border);
227
227
  border-radius: 0.25rem;
228
228
  overflow: hidden;
229
229
  }
@@ -232,7 +232,7 @@
232
232
  font-size: 0.875rem;
233
233
  padding: 1rem;
234
234
  overflow: auto;
235
- background-color: hsl(var(--hsdc-code-block));
235
+ background-color: var(--hsdc-code-block);
236
236
  }
237
237
  .main :global(.code-block) :global(.code-block-header) {
238
238
  display: flex;
@@ -242,8 +242,8 @@
242
242
  gap: 0.5rem;
243
243
  font-size: 0.875rem;
244
244
  padding: 0.5rem 1rem;
245
- background-color: hsl(var(--hsdc-muted));
246
- border-bottom: 1px solid hsl(var(--hsdc-border));
245
+ background-color: var(--hsdc-muted);
246
+ border-bottom: 1px solid var(--hsdc-border);
247
247
  }
248
248
  .main :global(.code-block) :global(.code-block-header) > div {
249
249
  display: flex;
@@ -267,28 +267,28 @@
267
267
  padding: 0 1rem;
268
268
  }
269
269
  .main :global(.shiki) :global(span.line.highlighted) {
270
- background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.1) !important;
270
+ background-color: oklch(from var(--hsdc-shiki-highlighted-word) l c h/0.1) !important;
271
271
  }
272
272
  .main :global(.shiki) :global(span.line.diff.add) {
273
- background-color: hsl(var(--hsdc-shiki-diff-add)/0.1) !important;
273
+ background-color: oklch(from var(--hsdc-shiki-diff-add) l c h/0.1) !important;
274
274
  }
275
275
  .main :global(.shiki) :global(span.line.diff.add)::before {
276
276
  position: absolute;
277
277
  left: 2px;
278
278
  content: "+";
279
- color: hsl(var(--hsdc-shiki-diff-add));
279
+ color: var(--hsdc-shiki-diff-add);
280
280
  }
281
281
  .main :global(.shiki) :global(span.line.diff.remove) {
282
- background-color: hsl(var(--hsdc-shiki-diff-remove)/0.1) !important;
282
+ background-color: oklch(from var(--hsdc-shiki-diff-remove) l c h/0.1) !important;
283
283
  }
284
284
  .main :global(.shiki) :global(span.line.diff.remove)::before {
285
285
  position: absolute;
286
286
  left: 2px;
287
287
  content: "-";
288
- color: hsl(var(--hsdc-shiki-diff-remove));
288
+ color: var(--hsdc-shiki-diff-remove);
289
289
  }
290
290
  .main :global(.shiki) :global(.highlighted-word) {
291
- background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.2);
291
+ background-color: oklch(from var(--hsdc-shiki-highlighted-word) l c h/0.2);
292
292
  padding: 0.125rem 0;
293
293
  margin: -0.125rem 0;
294
294
  }
@@ -309,7 +309,7 @@
309
309
  .main :global(.link-card) {
310
310
  display: flex;
311
311
  flex-direction: row;
312
- border: 1px solid hsl(var(--hsdc-border));
312
+ border: 1px solid var(--hsdc-border);
313
313
  border-radius: 0.5rem;
314
314
  overflow: hidden;
315
315
  color: inherit;
@@ -319,7 +319,7 @@
319
319
  }
320
320
  .main :global(.link-card):hover {
321
321
  text-decoration: none;
322
- background-color: hsl(var(--hsdc-muted)/0.5);
322
+ background-color: oklch(from var(--hsdc-muted) l c h/0.5);
323
323
  }
324
324
  .main :global(.link-card) :global(.link-card-main) {
325
325
  flex: 1;
@@ -356,7 +356,7 @@
356
356
  .main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
357
357
  font-size: 0.75rem;
358
358
  display: none;
359
- color: hsl(var(--hsdc-muted-foreground));
359
+ color: var(--hsdc-muted-foreground);
360
360
  }
361
361
  @media (min-width: 640px) {
362
362
  .main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
@@ -369,7 +369,7 @@
369
369
  align-items: center;
370
370
  gap: 0.5rem;
371
371
  font-size: 0.75rem;
372
- color: hsl(var(--hsdc-muted-foreground));
372
+ color: var(--hsdc-muted-foreground);
373
373
  }
374
374
  .main :global(.link-card) :global(.link-card-main) :global(.link-card-domain) > div {
375
375
  text-wrap: nowrap;
@@ -421,30 +421,45 @@
421
421
  .main :global(.markdown-alert):global(.markdown-alert-note) :global(.markdown-alert-title) {
422
422
  color: var(--github-alert-note-color);
423
423
  }
424
+ .main :global(.markdown-alert):global(.markdown-alert-note) :global(.markdown-alert-title) svg {
425
+ fill: var(--github-alert-note-color);
426
+ }
424
427
  .main :global(.markdown-alert):global(.markdown-alert-tip) {
425
428
  border-left-color: var(--github-alert-tip-color);
426
429
  }
427
430
  .main :global(.markdown-alert):global(.markdown-alert-tip) :global(.markdown-alert-title) {
428
431
  color: var(--github-alert-tip-color);
429
432
  }
433
+ .main :global(.markdown-alert):global(.markdown-alert-tip) :global(.markdown-alert-title) svg {
434
+ fill: var(--github-alert-tip-color);
435
+ }
430
436
  .main :global(.markdown-alert):global(.markdown-alert-important) {
431
437
  border-left-color: var(--github-alert-important-color);
432
438
  }
433
439
  .main :global(.markdown-alert):global(.markdown-alert-important) :global(.markdown-alert-title) {
434
440
  color: var(--github-alert-important-color);
435
441
  }
442
+ .main :global(.markdown-alert):global(.markdown-alert-important) :global(.markdown-alert-title) svg {
443
+ fill: var(--github-alert-important-color);
444
+ }
436
445
  .main :global(.markdown-alert):global(.markdown-alert-warning) {
437
446
  border-left-color: var(--github-alert-warning-color);
438
447
  }
439
448
  .main :global(.markdown-alert):global(.markdown-alert-warning) :global(.markdown-alert-title) {
440
449
  color: var(--github-alert-warning-color);
441
450
  }
451
+ .main :global(.markdown-alert):global(.markdown-alert-warning) :global(.markdown-alert-title) svg {
452
+ fill: var(--github-alert-warning-color);
453
+ }
442
454
  .main :global(.markdown-alert):global(.markdown-alert-caution) {
443
455
  border-left-color: var(--github-alert-caution-color);
444
456
  }
445
457
  .main :global(.markdown-alert):global(.markdown-alert-caution) :global(.markdown-alert-title) {
446
458
  color: var(--github-alert-caution-color);
447
459
  }
460
+ .main :global(.markdown-alert):global(.markdown-alert-caution) :global(.markdown-alert-title) svg {
461
+ fill: var(--github-alert-caution-color);
462
+ }
448
463
  .main :global(.mermaid-block) {
449
464
  margin: 1.5rem 0;
450
465
  }
@@ -483,7 +498,7 @@
483
498
  .main :global(.gist-block) :global(.gist-file) {
484
499
  border-radius: 0.25rem;
485
500
  overflow: hidden;
486
- border: 1px solid hsl(var(--hsdc-border));
501
+ border: 1px solid var(--hsdc-border);
487
502
  }
488
503
  .main :global(.gist-block) :global(.gist-file:last-child) {
489
504
  margin-bottom: 0;
@@ -506,7 +521,7 @@
506
521
  }
507
522
  .main :global(.directory-tree) :global(.directory-tree-directory > .directory-tree-node-content) {
508
523
  font-weight: 800;
509
- color: hsl(var(--hsdc-muted-foreground));
524
+ color: var(--hsdc-muted-foreground);
510
525
  }
511
526
  .main :global(.directory-tree) ul {
512
527
  padding-left: 5px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hackersheet/react-document-content-styles",
3
- "version": "0.1.0-alpha.12",
3
+ "version": "0.1.0-alpha.14",
4
4
  "description": "Hacker Sheet document content styles.",
5
5
  "keywords": [],
6
6
  "repository": {
@@ -27,8 +27,8 @@
27
27
  "dist"
28
28
  ],
29
29
  "devDependencies": {
30
- "sass": "1.77.8",
31
- "typed-scss-modules": "8.0.1"
30
+ "sass": "1.93.2",
31
+ "typed-scss-modules": "8.1.1"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "rm -rf ./dist && mkdir dist && pnpm typegen:scss && pnpm build:css",