Skip to content

Commit c5b8a43

Browse files
recrwplayrecrwplay
committed
Merge branch 'admonitions-ndl' into tabs-examples-admons
2 parents bafead1 + 4a85152 commit c5b8a43

File tree

3 files changed

+73
-54
lines changed

3 files changed

+73
-54
lines changed

‎src/css/doc.css‎

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -334,8 +334,9 @@ body {
334334

335335
.doc .admonitionblock {
336336
margin: 1.5rem 0 1.5rem;
337-
/* border-left: 4px solid var(--doc-font-color); */
338-
border-radius: 0.25rem;
337+
border-radius: 0.5rem;
338+
border-style: solid;
339+
border-width: 1px;
339340
}
340341

341342
.doc .admonitionblock p,
@@ -411,19 +412,19 @@ body {
411412
}
412413

413414
.doc .admonitionblock td.icon i.icon-tip {
414-
background-color: var(--tip-border-color);
415+
background-color: var(--tip-color);
415416
}
416417

417418
.doc .admonitionblock td.icon i.icon-important {
418-
background-color: var(--important-border-color);
419+
background-color: var(--important-color);
419420
}
420421

421422
.doc .admonitionblock td.icon i.icon-caution {
422-
background-color: var(--caution-border-color);
423+
background-color: var(--caution-color);
423424
}
424425

425426
.doc .admonitionblock td.icon i.icon-warning {
426-
background-color: var(--warning-border-color);
427+
background-color: var(--warning-color);
427428
}
428429

429430
/* admonition icon contents */
@@ -472,85 +473,81 @@ body {
472473

473474
.doc .admonitionblock.warning {
474475
background-color: var(--warning-background-color);
475-
color: var(--warning-color);
476-
/* border-left-color: var(--warning-border-color); */
476+
border-color: var(--warning-border-color);
477477
}
478478

479479
.doc .admonitionblock.warning a.btn {
480480
background-color: var(--color-red-600);
481481
}
482482

483483
.doc .admonitionblock.warning a {
484-
color: var(--color-red-500);
484+
color: var(--warning-color);
485485
}
486486

487487
.doc .admonitionblock.caution {
488488
background-color: var(--caution-background-color);
489-
color: var(--caution-color);
490-
/* border-left-color: var(--caution-border-color); */
489+
border-color: var(--caution-border-color);
491490
}
492491

493492
.doc .admonitionblock.caution a {
494-
color: var(--color-orange-500);
493+
color: var(--caution-color);
495494
}
496495

497-
.doc .admonitionblock.caution a:hover {
496+
/* .doc .admonitionblock.caution a:hover {
498497
color: var(--color-orange-400);
499-
}
498+
} */
500499

501500
.doc .admonitionblock.caution a.btn {
502501
background-color: var(--color-orange-600);
503502
}
504503

505504
.doc .admonitionblock.tip {
506505
background-color: var(--tip-background-color);
507-
color: var(--tip-color);
508-
/* border-left-color: var(--tip-color); */
506+
border-color: var(--tip-border-color);
509507
}
510508

511509
.doc .admonitionblock.tip a {
512510
color: rgba(var(--colors-baltic-50));
511+
color: var(--tip-color);
513512
}
514513

515-
.doc .admonitionblock.tip a:hover {
514+
/* .doc .admonitionblock.tip a:hover {
516515
color: var(--color-blue-500);
517-
}
516+
} */
518517

519518
.doc .admonitionblock.tip a.btn {
520519
background-color: rgba(var(--colors-baltic-50));
521520
}
522521

523522
.doc .admonitionblock.note {
524523
background-color: var(--note-background-color);
525-
color: var(--note-color);
526-
/* border-left-color: var(--note-border-color); */
524+
border-color: var(--note-border-color);
527525
}
528526

529527
.doc .admonitionblock.note a {
530-
color: rgba(var(--colors-neutral-60));
528+
color: var(--note-color);
531529
}
532530

533-
.doc .admonitionblock.note a:hover {
531+
/* .doc .admonitionblock.note a:hover {
534532
color: rgba(var(--colors-neutral-50));
535-
}
533+
} */
536534

537535
.doc .admonitionblock.note a.btn {
538536
background-color: rgba(var(--colors-neutral-60));
539537
}
540538

541539
.doc .admonitionblock.important {
542540
background-color: var(--important-background-color);
543-
color: var(--important-color);
544-
/* border-left-color: var(--important-border-color); */
541+
border-color: var(--important-border-color);
545542
}
546543

547544
.doc .admonitionblock.important a {
548545
color: var(--important-color);
549546
}
550547

551-
.doc .admonitionblock.important a:hover {
548+
/* .doc .admonitionblock.important a:hover {
552549
color: var(--color-purple-500);
553-
}
550+
} */
554551

555552
.doc .admonitionblock.important a.btn {
556553
background-color: var(--color-purple-600);

‎src/css/highlight.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/*! Adapted from the GitHub style by Vasily Polovnyov <vast@whiteants.net> */
22
.hljs-comment,
33
.hljs-quote {
4-
color: rgba(var(--colors-neutral-50));
4+
color: rgba(var(--colors-neutral-60));
55
font-style: italic;
66
}
77

88
.hljs-keyword,
99
.hljs-selector-tag,
1010
.hljs-subst {
11-
color: rgba(var(--colors-neutral-50));
11+
color: rgba(var(--colors-neutral-60));
1212
font-weight: var(--monospace-font-weight-bold);
1313
}
1414

@@ -17,18 +17,18 @@
1717
.hljs-variable,
1818
.hljs-template-variable,
1919
.hljs-tag .hljs-attr {
20-
color: rgba(var(--colors-baltic-50));
20+
color: rgba(var(--colors-baltic-60));
2121
}
2222

2323
.hljs-string,
2424
.hljs-doctag {
25-
color: rgba(var(--colors-forest-40));
25+
color: rgba(var(--colors-forest-50));
2626
}
2727

2828
.hljs-title,
2929
.hljs-section,
3030
.hljs-selector-id {
31-
color: rgba(var(--colors-lavender-50));
31+
color: rgba(var(--colors-lavender-60));
3232
font-weight: var(--monospace-font-weight-bold);
3333
}
3434

@@ -38,24 +38,24 @@
3838

3939
.hljs-type,
4040
.hljs-class .hljs-title {
41-
color: rgba(var(--colors-baltic-50));
41+
color: rgba(var(--colors-baltic-60));
4242
font-weight: var(--monospace-font-weight-bold);
4343
}
4444

4545
.hljs-tag,
4646
.hljs-name,
4747
.hljs-attribute {
48-
color: rgba(var(--colors-lavender-40));
48+
color: rgba(var(--colors-lavender-60));
4949
font-weight: normal;
5050
}
5151

5252
.hljs-regexp,
5353
.hljs-link {
54-
color: rgba(var(--colors-forest-40));
54+
color: rgba(var(--colors-forest-50));
5555
}
5656

5757
.hljs-operator {
58-
color: rgba(var(--colors-neutral-50));
58+
color: rgba(var(--colors-neutral-60));
5959
}
6060

6161
.hljs-symbol,
@@ -65,11 +65,11 @@
6565

6666
.hljs-built_in,
6767
.hljs-builtin-name {
68-
color: rgba(var(--colors-baltic-50));
68+
color: rgba(var(--colors-baltic-60));
6969
}
7070

7171
.hljs-meta {
72-
color: rgba(var(--colors-neutral-50));
72+
color: rgba(var(--colors-neutral-60));
7373
/* font-weight: var(--monospace-font-weight-bold); */
7474
}
7575

‎src/css/vars.css‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
--colors-mint-60: #2aada5;
5757
--colors-mint-70: #116161;
5858
--colors-mint-default: #55f9e2;
59-
--body-font-color: rgba(var(--colors-neutral-60));
59+
--body-font-color: rgba(var(--colors-neutral-75));
6060

6161
/* end: design system colors */
6262

@@ -174,7 +174,7 @@
174174
--body-font-size--desktop: 1em; /* 18px */
175175
--body-font-size--print: 0.9375em; /* 15px */
176176
--body-line-height: 1.5;
177-
--body-font-color: rgba(var(--colors-neutral-70));
177+
--body-font-color: rgba(var(--colors-neutral-75));
178178
--body-font-family: "Public Sans", "Nunito Sans", "Helvetica Neue", helvetica, roboto, arial, sans-serif;
179179
--body-font-weight-bold: var(--font-weight-semibold);
180180
--monospace-font-family: "Roboto Mono", monospace;
@@ -247,27 +247,49 @@
247247
NB: admonitions are dark text on light background
248248
to use the same colors on labels, reverse the
249249
background and color */
250-
--featured-color: rgba(var(--colors-hibiscus-70));
251-
--featured-border-color: rgba(var(--colors-lavender-50));
252-
--featured-background-color: rgba(var(--colors-hibiscus-10));
253-
--caution-color: rgba(var(--colors-marigold-70));
254-
--caution-border-color: rgba(var(--colors-marigold-50));
255-
--caution-background-color: rgba(var(--colors-marigold-10));
256-
--important-color: rgba(var(--colors-lavender-70));
257-
--important-border-color: rgba(var(--colors-lavender-50));
258-
--important-background-color: rgba(var(--colors-lavender-10));
259-
--tip-color: rgba(var(--colors-forest-70));
260-
--tip-border-color: rgba(var(--colors-forest-40));
261-
--tip-background-color: rgba(var(--colors-forest-10));
250+
251+
/* NOTE */
262252
--note-color: rgba(var(--theme-light-palette-primary-bg-strong));
253+
--note-border-color: rgba(var(--theme-light-palette-primary-border-weak));
263254
--note-background-color: rgba(var(--theme-light-palette-primary-bg-weak));
255+
256+
/* TIP */
257+
--tip-color: rgba(var(--theme-light-palette-success-bg-strong));
258+
--tip-border-color: rgba(var(--theme-light-palette-success-border-weak));
259+
--tip-background-color: rgba(var(--theme-light-palette-success-bg-weak));
260+
261+
/* IMPORTANT */
262+
--important-color: rgba(var(--colors-lavender-70));
263+
--important-border-color: rgba(var(--colors-lavender-20));
264+
--important-background-color: rgba(var(--colors-lavender-10));
265+
266+
/* CAUTION */
267+
--caution-color: rgba(var(--theme-light-palette-warning-bg-strong));
268+
--caution-border-color: rgba(var(--theme-light-palette-warning-border-weak));
269+
--caution-background-color: rgba(var(--theme-light-palette-warning-bg-weak));
270+
271+
/* WARNING */
264272
--warning-color: rgba(var(--theme-light-palette-danger-bg-strong));
265-
--warning-border-color: rgba(var(--theme-light-palette-danger-bg-strong));
273+
--warning-border-color: rgba(var(--theme-light-palette-danger-border-weak));
266274
--warning-background-color: rgba(var(--theme-light-palette-danger-bg-weak));
267-
--mark-background: rgba(var(--theme-light-palette-primary-bg-weak));
275+
276+
/* FEATURED */
277+
--featured-color: rgba(var(--colors-hibiscus-70));
278+
--featured-border-color: rgba(var(--colors-lavender-50));
279+
--featured-background-color: rgba(var(--colors-hibiscus-10));
280+
281+
/* EXAMPLE */
282+
--example-color: rgba(var(--theme-light-palette-neutral-bg-strong));
283+
--example-border-color: rgba(var(--theme-light-palette-neutral-border-weak));
284+
--example-background-color: rgba(var(--theme-light-palette-neutral-bg-weak));
285+
286+
/* Tables in admonitions */
268287
--admonition-table-border-color: rgba(var(--colors-neutral-70));
269288
--admonition-table-header-color: rgba(var(--colors-neutral-20));
270289

290+
/* misc */
291+
--mark-background: rgba(var(--theme-light-palette-primary-bg-weak));
292+
271293
/* success */
272294
--success-color: rgba(var(--theme-light-palette-success-bg-strong));
273295
--success-background-color: rgba(var(--theme-light-palette-success-bg-weak));

0 commit comments

Comments
 (0)