@stackoverflow/stacks 2.0.0-rc.4 → 2.0.0-rc.6

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 (34) hide show
  1. package/dist/components/code-block/code-block.fixtures.d.ts +2 -0
  2. package/dist/css/stacks.css +136 -182
  3. package/dist/css/stacks.min.css +1 -1
  4. package/lib/atomic/__snapshots__/color.less.test.ts.snap +246 -0
  5. package/lib/base/body.less +2 -2
  6. package/lib/components/anchor/anchor.less +3 -3
  7. package/lib/components/anchor/anchor.visual.test.ts +1 -1
  8. package/lib/components/avatar/avatar.visual.test.ts +1 -1
  9. package/lib/components/banner/banner.less +2 -2
  10. package/lib/components/button/button.a11y.test.ts +1 -1
  11. package/lib/components/button/button.less +31 -31
  12. package/lib/components/button/button.visual.test.ts +1 -1
  13. package/lib/components/code-block/code-block.a11y.test.ts +30 -0
  14. package/lib/components/code-block/code-block.fixtures.ts +88 -0
  15. package/lib/components/code-block/code-block.visual.test.ts +20 -0
  16. package/lib/components/link/link.less +6 -6
  17. package/lib/components/link-preview/link-preview.less +3 -3
  18. package/lib/components/navigation/navigation.a11y.test.ts +80 -0
  19. package/lib/components/navigation/navigation.visual.test.ts +101 -0
  20. package/lib/components/notice/notice.a11y.test.ts +1 -1
  21. package/lib/components/pagination/pagination.a11y.test.ts +1 -1
  22. package/lib/components/post-summary/post-summary.less +8 -8
  23. package/lib/components/prose/prose.less +1 -1
  24. package/lib/components/tag/tag.less +6 -6
  25. package/lib/components/toast/toast.a11y.test.ts +1 -1
  26. package/lib/components/topbar/topbar.less +44 -44
  27. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +16 -10
  28. package/lib/exports/__snapshots__/color.less.test.ts.snap +179 -186
  29. package/lib/exports/color-mixins.less +0 -1
  30. package/lib/exports/color.less +12 -3
  31. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +3 -3
  32. package/lib/exports/v1/constants-colors.less +2 -2
  33. package/package.json +3 -3
  34. package/lib/exports/theme.less +0 -85
package/dist/components/code-block/code-block.fixtures.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const highlightedFixtures: Record<string, string>;
2
+ export default highlightedFixtures;
package/dist/css/stacks.css CHANGED
@@ -465,9 +465,9 @@ body.theme-highcontrast .s-activity-indicator.s-activity-indicator__warning {
465
465
  --_an-a-fc-hover: var(--red-400);
466
466
  }
467
467
  .s-anchors.s-anchors__default {
468
- --_an-a-fc: var(--theme-link-color);
469
- --_an-a-fc-hover: var(--theme-link-color-hover);
470
- --_an-a-fc-visited: var(--theme-link-color-visited);
468
+ --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
469
+ --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
470
+ --_an-a-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
471
471
  }
472
472
  .s-anchors.s-anchors__grayscale {
473
473
  --_an-a-fc: var(--black-500);
@@ -867,8 +867,8 @@ a.s-badge:hover {
867
867
  inset: 0 0 auto 0;
868
868
  padding: var(--su12);
869
869
  position: fixed;
870
- -webkit-transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
871
- transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
870
+ -webkit-transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
871
+ transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
872
872
  width: 100%;
873
873
  z-index: calc(var(--zi-navigation-fixed) - 1);
874
874
  }
@@ -1181,37 +1181,37 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1181
1181
  --_bu-baw: var(--su-static1);
1182
1182
  --_bu-bc: transparent;
1183
1183
  --_bu-br: var(--br-md);
1184
- --_bu-fc: var(--theme-button-color);
1184
+ --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
1185
1185
  --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
1186
1186
  --_bu-fs: var(--fs-body1);
1187
1187
  --_bu-p: 0.8em;
1188
1188
  --_bu-bc-selected: transparent;
1189
- --_bu-bg-active: var(--theme-button-active-background-color);
1190
- --_bu-bg-hover: var(--theme-button-hover-background-color);
1191
- --_bu-bg-selected: var(--theme-button-selected-background-color);
1192
- --_bu-fc-active: var(--theme-button-hover-color);
1193
- --_bu-fc-hover: var(--theme-button-hover-color);
1194
- --_bu-fc-selected: var(--theme-button-selected-color);
1189
+ --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
1190
+ --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
1191
+ --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
1192
+ --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500));
1193
+ --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
1194
+ --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
1195
1195
  --_bu-filled-bc: transparent;
1196
1196
  --_bu-filled-bc-active: transparent;
1197
1197
  --_bu-filled-bc-selected: transparent;
1198
- --_bu-filled-bg: var(--theme-button-primary-background-color);
1199
- --_bu-filled-bg-active: var(--theme-button-primary-active-background-color);
1200
- --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color);
1201
- --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color);
1202
- --_bu-filled-fc: var(--theme-button-primary-color);
1203
- --_bu-filled-fc-active: var(--theme-button-primary-hover-color);
1204
- --_bu-filled-fc-hover: var(--theme-button-primary-hover-color);
1205
- --_bu-filled-fc-selected: var(--theme-button-primary-selected-color);
1206
- --_bu-outlined-bc: var(--theme-button-outlined-border-color);
1198
+ --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
1199
+ --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
1200
+ --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
1201
+ --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
1202
+ --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
1203
+ --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
1204
+ --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
1205
+ --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
1206
+ --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(----theme-secondary-400));
1207
1207
  --_bu-outlined-bg: var(--theme-button-outlined-background-color);
1208
- --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
1209
- --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
1210
- --_bu-outlined-fc-selected: var(--theme-button-selected-color);
1208
+ --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(----theme-secondary-400));
1209
+ --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
1210
+ --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
1211
1211
  --_bu-badge-o: 0.5;
1212
1212
  --_bu-dropdown-bw: var(--su-static4);
1213
1213
  --_bu-number-fc: var(--white);
1214
- --_bu-number-fc-filled: var(--theme-button-primary-number-color);
1214
+ --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1215
1215
  --_bu-number-fc-selected: var(--white);
1216
1216
  background-color: var(--_bu-bg, inherit);
1217
1217
  border: var(--_bu-baw) solid var(--_bu-bc);
@@ -1238,7 +1238,7 @@ body.theme-highcontrast .s-btn {
1238
1238
  --_bu-fc-selected: var(--white);
1239
1239
  --_bu-outlined-fc-selected: var(--white);
1240
1240
  --_bu-badge-o: 0.8;
1241
- --_bu-number-fc-selected: var(--theme-button-primary-number-color);
1241
+ --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1242
1242
  }
1243
1243
  fieldset[disabled] .s-btn,
1244
1244
  .s-btn[disabled],
@@ -1314,9 +1314,9 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
1314
1314
  --_bu-br: 0;
1315
1315
  --_bu-focus-ring: none;
1316
1316
  --_bu-p: 0;
1317
- --_li-fc: var(--theme-link-color);
1318
- --_li-fc-hover: var(--theme-link-color-hover);
1319
- --_li-fc-visited: var(--theme-link-color-visited);
1317
+ --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
1318
+ --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
1319
+ --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
1320
1320
  color: var(--_li-fc);
1321
1321
  cursor: pointer;
1322
1322
  text-decoration: none;
@@ -1380,9 +1380,9 @@ body.theme-highcontrast .s-btn.s-btn__link {
1380
1380
  text-decoration: underline !important;
1381
1381
  }
1382
1382
  .s-btn.s-btn__link.s-link__visited {
1383
- --_li-fc: var(--theme-link-color-visited);
1384
- --_li-fc-hover: var(--theme-link-color-hover);
1385
- --_li-fc-visited: var(--theme-link-color-visited);
1383
+ --_li-fc: var(--theme-link-color-visited, var(--theme-secondary-500));
1384
+ --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
1385
+ --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
1386
1386
  }
1387
1387
  .s-btn.s-btn__link.s-link__danger {
1388
1388
  --_li-fc: var(--red-400);
@@ -1545,16 +1545,16 @@ body.theme-highcontrast .s-btn.s-btn__muted {
1545
1545
  --_bu-number-fc-selected: var(--white);
1546
1546
  }
1547
1547
  .s-btn.s-btn__primary {
1548
- --_bu-bg: var(--theme-button-primary-background-color);
1549
- --_bu-bg-active: var(--theme-button-primary-active-background-color);
1550
- --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
1551
- --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
1552
- --_bu-fc: var(--theme-button-primary-color);
1553
- --_bu-fc-active: var(--theme-button-primary-hover-color);
1554
- --_bu-fc-hover: var(--theme-button-primary-hover-color);
1555
- --_bu-fc-selected: var(--theme-button-primary-selected-color);
1556
- --_bu-number-fc: var(--theme-button-primary-number-color);
1557
- --_bu-number-fc-selected: var(--theme-button-primary-number-color);
1548
+ --_bu-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
1549
+ --_bu-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
1550
+ --_bu-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
1551
+ --_bu-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
1552
+ --_bu-fc: var(--theme-button-primary-color, var(--white));
1553
+ --_bu-fc-active: var(--theme-button-primary-hover-color, var(--white));
1554
+ --_bu-fc-hover: var(--theme-button-primary-hover-color, var(--white));
1555
+ --_bu-fc-selected: var(--theme-button-primary-selected-color, var(--white));
1556
+ --_bu-number-fc: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1557
+ --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1558
1558
  }
1559
1559
  body.theme-highcontrast .s-btn.s-btn__primary {
1560
1560
  --_bu-bc: transparent;
@@ -2584,9 +2584,9 @@ body.theme-highcontrast .s-label--status {
2584
2584
  }
2585
2585
  a,
2586
2586
  .s-link {
2587
- --_li-fc: var(--theme-link-color);
2588
- --_li-fc-hover: var(--theme-link-color-hover);
2589
- --_li-fc-visited: var(--theme-link-color-visited);
2587
+ --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
2588
+ --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
2589
+ --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
2590
2590
  color: var(--_li-fc);
2591
2591
  cursor: pointer;
2592
2592
  text-decoration: none;
@@ -2655,9 +2655,9 @@ a.s-link__underlined,
2655
2655
  }
2656
2656
  a.s-link__visited,
2657
2657
  .s-link.s-link__visited {
2658
- --_li-fc: var(--theme-link-color-visited);
2659
- --_li-fc-hover: var(--theme-link-color-hover);
2660
- --_li-fc-visited: var(--theme-link-color-visited);
2658
+ --_li-fc: var(--theme-link-color-visited, var(--theme-secondary-500));
2659
+ --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
2660
+ --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
2661
2661
  }
2662
2662
  a.s-link__danger,
2663
2663
  .s-link.s-link__danger {
@@ -2802,7 +2802,7 @@ body.theme-highcontrast .s-link-preview {
2802
2802
  font-weight: bold;
2803
2803
  }
2804
2804
  .s-link-preview a.s-link-preview--title {
2805
- color: var(--theme-link-color);
2805
+ color: var(--theme-link-color, var(--theme-secondary-400));
2806
2806
  cursor: pointer;
2807
2807
  text-decoration: none;
2808
2808
  }
@@ -2810,7 +2810,7 @@ body.theme-highcontrast .s-link-preview {
2810
2810
  .s-link-preview a.s-link-preview--title:hover,
2811
2811
  .s-link-preview a.s-link-preview--title:active.s-link__visited,
2812
2812
  .s-link-preview a.s-link-preview--title:hover.s-link__visited {
2813
- color: var(--theme-link-color-hover);
2813
+ color: var(--theme-link-color-hover, var(--theme-secondary-400));
2814
2814
  }
2815
2815
  .s-link-preview a.s-link-preview--title:active,
2816
2816
  .s-link-preview a.s-link-preview--title:hover,
@@ -2827,7 +2827,7 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
2827
2827
  text-decoration: underline;
2828
2828
  }
2829
2829
  .s-link-preview a.s-link-preview--title.s-link__visited:visited {
2830
- color: var(--theme-link-color);
2830
+ color: var(--theme-link-color, var(--theme-secondary-400));
2831
2831
  }
2832
2832
  .s-link-preview .s-link-preview--url {
2833
2833
  max-width: 100%;
@@ -3542,9 +3542,9 @@ body.theme-highcontrast .s-popover .s-popover--arrow__lb {
3542
3542
  --_ps-bg: unset;
3543
3543
  --_ps-o: unset;
3544
3544
  --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
3545
- --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color));
3546
- --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover));
3547
- --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited));
3545
+ --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400))));
3546
+ --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-400))));
3547
+ --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--theme-secondary-500))));
3548
3548
  --_ps-stats-ai: flex-end;
3549
3549
  --_ps-stats-fc: var(--_ps-state-fc, var(--fc-light));
3550
3550
  --_ps-stats-fd: column;
@@ -3695,9 +3695,9 @@ body.theme-system .theme-dark__forced .s-post-summary.s-post-summary__deleted .s
3695
3695
  .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
3696
3696
  --_ps-bg: var(--yellow-200);
3697
3697
  --_ps-stats-fc: var(--black-400);
3698
- --_ps-content-title-a-fc: var(--theme-post-title-color);
3699
- --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover);
3700
- --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited);
3698
+ --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
3699
+ --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-400)));
3700
+ --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--theme-secondary-500)));
3701
3701
  }
3702
3702
  .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card a {
3703
3703
  color: var(--_ps-content-title-a-fc);
@@ -3765,7 +3765,7 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
3765
3765
  -webkit-box-orient: vertical;
3766
3766
  overflow: hidden;
3767
3767
  color: var(--_ps-content-excerpt-fc);
3768
- font-family: var(--theme-post-body-font-family);
3768
+ font-family: var(--theme-post-body-font-family, var(--theme-body-font-family));
3769
3769
  margin-top: calc(var(--su2) * -1);
3770
3770
  margin-bottom: var(--su8);
3771
3771
  }
@@ -3822,7 +3822,7 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
3822
3822
  -ms-hyphens: auto !important;
3823
3823
  hyphens: auto !important;
3824
3824
  color: var(--_ps-content-title-a-fc);
3825
- font-family: var(--theme-post-title-font-family);
3825
+ font-family: var(--theme-post-title-font-family, var(--theme-body-font-family));
3826
3826
  }
3827
3827
  .s-post-summary .s-post-summary--content-title a:visited {
3828
3828
  color: var(--_ps-content-title-a-fc-visited);
@@ -4277,7 +4277,7 @@ body.theme-highcontrast .s-prose {
4277
4277
  --_pr-lh: var(--lh-xl);
4278
4278
  }
4279
4279
  .s-prose *:not(.s-code-block) > a code {
4280
- color: var(--theme-link-color);
4280
+ color: var(--theme-link-color, var(--theme-secondary-400));
4281
4281
  }
4282
4282
  .s-prose *:not(.s-code-block) > code {
4283
4283
  padding: var(--su2) var(--su4);
@@ -5428,15 +5428,15 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5428
5428
  border-color: transparent;
5429
5429
  }
5430
5430
  .s-tag {
5431
- --_ta-bc: var(--theme-tag-border-color);
5432
- --_ta-bc-hover: var(--theme-tag-hover-border-color);
5431
+ --_ta-bc: var(--theme-tag-border-color, transparent);
5432
+ --_ta-bc-hover: var(--theme-tag-hover-border-color, transparent);
5433
5433
  --_ta-bc-selected: transparent;
5434
- --_ta-bg: var(--theme-tag-background-color);
5435
- --_ta-bg-hover: var(--theme-tag-hover-background-color);
5434
+ --_ta-bg: var(--theme-tag-background-color, var(----theme-secondary-100));
5435
+ --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
5436
5436
  --_ta-bg-selected: var(--theme-secondary-300);
5437
5437
  --_ta-br: var(--br-sm);
5438
- --_ta-fc: var(--theme-tag-color);
5439
- --_ta-fc-hover: var(--theme-tag-hover-color);
5438
+ --_ta-fc: var(--theme-tag-color, var(----theme-secondary-500));
5439
+ --_ta-fc-hover: var(--theme-tag-hover-color, var(--theme-secondary-600));
5440
5440
  --_ta-fc-selected: var(--theme-secondary-600);
5441
5441
  --_ta-fs: var(--fs-caption);
5442
5442
  --_ta-lh: 1.84615385;
@@ -5743,22 +5743,22 @@ input[type="checkbox"].s-toggle-switch[disabled] {
5743
5743
  min-width: auto;
5744
5744
  width: 100%;
5745
5745
  z-index: var(--zi-navigation-fixed);
5746
- background-color: var(--theme-topbar-background-color);
5747
- height: var(--theme-topbar-height);
5746
+ background-color: var(--theme-topbar-background-color, var(--white));
5747
+ height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
5748
5748
  display: flex;
5749
- border-top: var(--theme-topbar-accent-border);
5750
- border-bottom: var(--theme-topbar-bottom-border);
5749
+ border-top: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
5750
+ border-bottom: var(--theme-topbar-bottom-border, 1px solid var(--black-225));
5751
5751
  position: relative;
5752
5752
  align-items: center;
5753
5753
  }
5754
5754
  body.theme-highcontrast .s-topbar {
5755
- --theme-topbar-search-color: var(--theme-topbar-item-color);
5756
- --theme-topbar-search-background: var(--theme-topbar-background-color);
5757
- --theme-topbar-search-placeholder: var(--theme-topbar-item-color);
5758
- --theme-topbar-search-border: var(--theme-topbar-item-color);
5759
- --theme-topbar-search-border-focus: var(--theme-topbar-item-color);
5760
- --theme-topbar-select-color: var(--theme-topbar-item-color);
5761
- --theme-topbar-select-background: var(--theme-topbar-background-color);
5755
+ --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-500));
5756
+ --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
5757
+ --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-500));
5758
+ --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-500));
5759
+ --theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-500));
5760
+ --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-500));
5761
+ --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
5762
5762
  --theme-topbar-item-color: var(--black-600);
5763
5763
  --theme-topbar-item-color-hover: var(--black-600);
5764
5764
  --theme-topbar-item-background-hover: var(--black-300);
@@ -5783,10 +5783,10 @@ body.theme-highcontrast .s-topbar {
5783
5783
  background-color: transparent;
5784
5784
  }
5785
5785
  .s-topbar a.s-topbar--logo:hover {
5786
- background-color: var(--theme-topbar-item-background-hover);
5786
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
5787
5787
  }
5788
5788
  .s-topbar a.s-topbar--logo.is-selected {
5789
- background-color: var(--theme-topbar-item-background-hover);
5789
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
5790
5790
  }
5791
5791
  .s-topbar .s-topbar--menu-btn {
5792
5792
  display: flex;
@@ -5801,7 +5801,7 @@ body.theme-highcontrast .s-topbar {
5801
5801
  .s-topbar .s-topbar--menu-btn span:after {
5802
5802
  width: var(--su-static16);
5803
5803
  height: var(--su-static2);
5804
- background-color: var(--theme-topbar-item-color);
5804
+ background-color: var(--theme-topbar-item-color, var(--black-500));
5805
5805
  position: relative;
5806
5806
  }
5807
5807
  .s-topbar .s-topbar--menu-btn span:before,
@@ -5818,7 +5818,7 @@ body.theme-highcontrast .s-topbar {
5818
5818
  top: calc(var(--su-static6) - var(--su-static1));
5819
5819
  }
5820
5820
  .s-topbar .s-topbar--menu-btn.is-selected {
5821
- color: var(--theme-topbar-item-color-current);
5821
+ color: var(--theme-topbar-item-color-current, var(--black));
5822
5822
  background-color: var(--theme-topbar-item-background-current);
5823
5823
  }
5824
5824
  .s-topbar .s-topbar--menu-btn.is-selected span {
@@ -5833,18 +5833,18 @@ body.theme-highcontrast .s-topbar {
5833
5833
  transform: rotate(45deg);
5834
5834
  }
5835
5835
  .s-topbar .s-topbar--menu-btn:hover {
5836
- color: var(--theme-topbar-item-color-hover);
5837
- background-color: var(--theme-topbar-item-background-hover);
5836
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
5837
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
5838
5838
  }
5839
5839
  .s-topbar .s-navigation .s-navigation--item:focus-visible {
5840
- box-shadow: var(--theme-topbar-search-shadow-focus);
5840
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
5841
5841
  }
5842
5842
  .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
5843
- color: var(--theme-topbar-item-color);
5843
+ color: var(--theme-topbar-item-color, var(--black-500));
5844
5844
  }
5845
5845
  .s-topbar .s-navigation .s-navigation--item:not(.is-selected):hover {
5846
- color: var(--theme-topbar-item-color-hover);
5847
- background-color: var(--theme-topbar-item-background-hover);
5846
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
5847
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
5848
5848
  }
5849
5849
  .s-topbar__light {
5850
5850
  --theme-topbar-background-color: var(--_white-static);
@@ -5861,7 +5861,6 @@ body.theme-highcontrast .s-topbar {
5861
5861
  --theme-topbar-item-color-hover: hsl(210, 8%, 5%);
5862
5862
  --theme-topbar-item-background-hover: hsl(210, 8%, 90%);
5863
5863
  --theme-topbar-item-color-current: var(--_black-static);
5864
- --theme-topbar-item-border-current: var(--theme-primary);
5865
5864
  --scrollbar: hsla(0, 0%, 0%, 0.2);
5866
5865
  }
5867
5866
  body.theme-highcontrast .s-topbar__light {
@@ -5885,7 +5884,6 @@ body.theme-highcontrast .s-topbar__light {
5885
5884
  --theme-topbar-item-color-hover: var(--_white-static);
5886
5885
  --theme-topbar-item-background-hover: hsl(210, 8%, 25%);
5887
5886
  --theme-topbar-item-color-current: var(--_white-static);
5888
- --theme-topbar-item-border-current: var(--theme-primary);
5889
5887
  --theme-topbar-accent-border: none;
5890
5888
  --scrollbar: hsla(0, 0%, 100%, 0.2);
5891
5889
  }
@@ -5953,7 +5951,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
5953
5951
  border-color: transparent;
5954
5952
  }
5955
5953
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) {
5956
- color: var(--theme-topbar-item-color);
5954
+ color: var(--theme-topbar-item-color, var(--black-500));
5957
5955
  display: inline-flex;
5958
5956
  align-items: center;
5959
5957
  padding: 0 calc(var(--su12) - var(--su2));
@@ -5966,8 +5964,8 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
5966
5964
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected,
5967
5965
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover,
5968
5966
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus {
5969
- color: var(--theme-topbar-item-color-hover);
5970
- background-color: var(--theme-topbar-item-background-hover);
5967
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
5968
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
5971
5969
  text-decoration: none;
5972
5970
  outline: none;
5973
5971
  }
@@ -5977,7 +5975,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
5977
5975
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover .s-activity-indicator,
5978
5976
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus .s-activity-indicator {
5979
5977
  top: calc(50% - calc(var(--su16) + var(--su2)));
5980
- box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover);
5978
+ box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200));
5981
5979
  }
5982
5980
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) .svg-icon {
5983
5981
  vertical-align: text-top;
@@ -5987,7 +5985,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
5987
5985
  top: calc(50% - calc(var(--su12) + var(--su2)));
5988
5986
  right: var(--su-static2);
5989
5987
  transition: top var(--te-smooth) 0.15s;
5990
- box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-background-color);
5988
+ box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-background-color, var(--white));
5991
5989
  }
5992
5990
  .s-topbar .s-topbar--content .s-topbar--item__unset {
5993
5991
  align-self: center;
@@ -6003,13 +6001,13 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6003
6001
  flex-shrink: 0;
6004
6002
  border-color: transparent;
6005
6003
  background-color: transparent;
6006
- color: var(--theme-topbar-item-color);
6004
+ color: var(--theme-topbar-item-color, var(--black-500));
6007
6005
  }
6008
6006
  .s-topbar--notice:hover,
6009
6007
  .s-topbar--notice:focus {
6010
- border-color: var(--theme-topbar-item-background-hover);
6011
- background-color: var(--theme-topbar-item-background-hover);
6012
- color: var(--theme-topbar-item-color-hover);
6008
+ border-color: var(--theme-topbar-item-background-hover, var(--black-200));
6009
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
6010
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
6013
6011
  }
6014
6012
  .s-topbar--notice.is-unread {
6015
6013
  border-color: var(--theme-primary);
@@ -6034,29 +6032,29 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6034
6032
  flex-grow: 1;
6035
6033
  }
6036
6034
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input {
6037
- border-color: var(--theme-topbar-search-border);
6038
- background-color: var(--theme-topbar-search-background);
6035
+ border-color: var(--theme-topbar-search-border, var(--black-300));
6036
+ background-color: var(--theme-topbar-search-background, var(--white));
6039
6037
  box-shadow: var(--theme-topbar-search-shadow);
6040
- color: var(--theme-topbar-search-color);
6038
+ color: var(--theme-topbar-search-color, var(--black-500));
6041
6039
  display: block;
6042
6040
  line-height: var(--lh-sm);
6043
6041
  }
6044
6042
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:focus {
6045
- border-color: var(--theme-topbar-search-border-focus);
6046
- box-shadow: var(--theme-topbar-search-shadow-focus);
6043
+ border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
6044
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
6047
6045
  }
6048
6046
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input::placeholder {
6049
- color: var(--theme-topbar-search-placeholder);
6047
+ color: var(--theme-topbar-search-placeholder, var(--black-400));
6050
6048
  font-style: normal;
6051
6049
  }
6052
6050
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input-icon {
6053
- color: var(--theme-topbar-search-placeholder);
6051
+ color: var(--theme-topbar-search-placeholder, var(--black-400));
6054
6052
  }
6055
6053
  .s-topbar .s-topbar--searchbar .s-select {
6056
6054
  max-width: calc(var(--s-step) * 2) !important;
6057
6055
  align-self: stretch;
6058
6056
  margin-right: calc(var(--su-static1) * -1);
6059
- color: var(--theme-topbar-select-color);
6057
+ color: var(--theme-topbar-select-color, var(--black-500));
6060
6058
  }
6061
6059
  .s-topbar .s-topbar--searchbar .s-select:before,
6062
6060
  .s-topbar .s-topbar--searchbar .s-select:after {
@@ -6067,13 +6065,13 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6067
6065
  border-bottom-right-radius: 0 !important;
6068
6066
  height: 100%;
6069
6067
  line-height: var(--lh-sm);
6070
- border-color: var(--theme-topbar-search-border);
6071
- background-color: var(--theme-topbar-select-background);
6072
- color: var(--theme-topbar-select-color);
6068
+ border-color: var(--theme-topbar-search-border, var(--black-300));
6069
+ background-color: var(--theme-topbar-select-background, var(--black-200));
6070
+ color: var(--theme-topbar-select-color, var(--black-500));
6073
6071
  }
6074
6072
  .s-topbar .s-topbar--searchbar .s-select > select:focus {
6075
- border-color: var(--theme-topbar-search-border-focus);
6076
- box-shadow: var(--theme-topbar-search-shadow-focus);
6073
+ border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
6074
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
6077
6075
  z-index: var(--zi-selected);
6078
6076
  }
6079
6077
  .s-topbar .s-topbar--searchbar .s-select + .s-topbar--searchbar--input-group > .s-input {
@@ -6089,7 +6087,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6089
6087
  top: 100%;
6090
6088
  max-width: 100%;
6091
6089
  padding: var(--su8) var(--su12);
6092
- background: var(--theme-topbar-item-background-hover);
6090
+ background: var(--theme-topbar-item-background-hover, var(--black-200));
6093
6091
  }
6094
6092
  .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
6095
6093
  display: flex;
@@ -6622,7 +6620,7 @@ body.theme-system .theme-light__forced,
6622
6620
  body:not(.theme-dark) .themed,
6623
6621
  body.theme-dark .theme-light__forced .themed,
6624
6622
  body.theme-system .theme-light__forced .themed {
6625
- color: var(--theme-body-font-color);
6623
+ color: var(--theme-body-font-color, var(--black-600));
6626
6624
  --theme-primary-color-legacy-h: var(--theme-light-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
6627
6625
  --theme-primary-color-legacy-s: var(--theme-light-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
6628
6626
  --theme-primary-color-legacy-l: var(--theme-light-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
@@ -6775,7 +6773,7 @@ body.theme-dark,
6775
6773
  body:not(.theme-dark) .theme-dark__forced,
6776
6774
  body.theme-dark .themed,
6777
6775
  body:not(.theme-dark) .theme-dark__forced .themed {
6778
- color: var(--theme-body-font-color);
6776
+ color: var(--theme-body-font-color, var(--black-600));
6779
6777
  --theme-primary-color-legacy-h: var(--theme-dark-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
6780
6778
  --theme-primary-color-legacy-s: var(--theme-dark-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
6781
6779
  --theme-primary-color-legacy-l: var(--theme-dark-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
@@ -6926,7 +6924,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
6926
6924
  }
6927
6925
  body.theme-system,
6928
6926
  body.theme-system .themed {
6929
- color: var(--theme-body-font-color);
6927
+ color: var(--theme-body-font-color, var(--black-600));
6930
6928
  --theme-primary-color-legacy-h: var(--theme-dark-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
6931
6929
  --theme-primary-color-legacy-s: var(--theme-dark-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
6932
6930
  --theme-primary-color-legacy-l: var(--theme-dark-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
@@ -7384,6 +7382,27 @@ body {
7384
7382
  --_o-disabled-static: 0.5;
7385
7383
  --_black-static: hsl(0, 0%, 0%);
7386
7384
  --_white-static: hsl(0, 0%, 100%);
7385
+ }
7386
+ body,
7387
+ body.themed,
7388
+ body .themed {
7389
+ color: var(--theme-body-font-color, var(--black-600));
7390
+ }
7391
+ body:not(.theme-dark),
7392
+ body.theme-dark .theme-light__forced,
7393
+ body.theme-system .theme-light__forced,
7394
+ body.theme-dark,
7395
+ body:not(.theme-dark) .theme-dark__forced,
7396
+ body:not(.theme-dark).themed,
7397
+ body.theme-dark .theme-light__forced.themed,
7398
+ body.theme-system .theme-light__forced.themed,
7399
+ body.theme-dark.themed,
7400
+ body:not(.theme-dark) .theme-dark__forced.themed,
7401
+ body:not(.theme-dark) .themed,
7402
+ body.theme-dark .theme-light__forced .themed,
7403
+ body.theme-system .theme-light__forced .themed,
7404
+ body.theme-dark .themed,
7405
+ body:not(.theme-dark) .theme-dark__forced .themed {
7387
7406
  --bg-error: var(--red-400);
7388
7407
  --bg-danger: var(--red-400);
7389
7408
  --bg-success: var(--green-400);
@@ -7399,71 +7418,6 @@ body {
7399
7418
  --fc-danger: var(--red-400);
7400
7419
  --fc-success: var(--green-500);
7401
7420
  --fc-warning: var(--yellow-500);
7402
- --theme-body-font-color: var(--black-600);
7403
- --theme-background-color: var(--white);
7404
- --theme-link-color: var(--theme-secondary-400);
7405
- --theme-link-color-hover: var(--theme-secondary-400);
7406
- --theme-link-color-visited: var(--theme-secondary-500);
7407
- --theme-button-color: var(--theme-secondary-400);
7408
- --theme-button-background-color: transparent;
7409
- --theme-button-hover-color: var(--theme-secondary-500);
7410
- --theme-button-hover-background-color: var(--theme-secondary-200);
7411
- --theme-button-active-background-color: var(--theme-secondary-300);
7412
- --theme-button-selected-color: var(--theme-secondary-600);
7413
- --theme-button-selected-background-color: var(--theme-secondary-300);
7414
- --theme-button-primary-color: var(--white);
7415
- --theme-button-primary-background-color: var(--theme-secondary-400);
7416
- --theme-button-primary-hover-color: var(--white);
7417
- --theme-button-primary-hover-background-color: var(--theme-secondary-500);
7418
- --theme-button-primary-active-background-color: var(--theme-secondary-600);
7419
- --theme-button-primary-selected-color: var(--white);
7420
- --theme-button-primary-selected-background-color: var(--theme-secondary-500);
7421
- --theme-button-primary-number-color: var(--theme-secondary-600);
7422
- --theme-button-filled-color: var(--theme-secondary-500);
7423
- --theme-button-filled-background-color: var(--theme-secondary-200);
7424
- --theme-button-filled-border-color: var(--theme-secondary-400);
7425
- --theme-button-filled-hover-color: var(--theme-secondary-600);
7426
- --theme-button-filled-hover-background-color: var(--theme-secondary-300);
7427
- --theme-button-filled-active-background-color: var(--theme-secondary-300);
7428
- --theme-button-filled-active-border-color: var(--theme-secondary-400);
7429
- --theme-button-filled-selected-color: var(--theme-secondary-600);
7430
- --theme-button-filled-selected-background-color: var(--theme-secondary-400);
7431
- --theme-button-filled-selected-border-color: var(--theme-secondary-400);
7432
- --theme-button-outlined-border-color: var(--theme-secondary-400);
7433
- --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
7434
- --theme-tag-color: var(--theme-secondary-500);
7435
- --theme-tag-background-color: var(--theme-secondary-100);
7436
- --theme-tag-border-color: transparent;
7437
- --theme-tag-hover-color: var(--theme-secondary-600);
7438
- --theme-tag-hover-background-color: var(--theme-secondary-200);
7439
- --theme-tag-hover-border-color: transparent;
7440
- --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
7441
- --theme-topbar-background-color: var(--white);
7442
- --theme-topbar-search-color: var(--black-500);
7443
- --theme-topbar-search-background: var(--white);
7444
- --theme-topbar-search-placeholder: var(--black-400);
7445
- --theme-topbar-search-border: var(--black-300);
7446
- --theme-topbar-search-border-focus: var(--blue-400);
7447
- --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
7448
- --theme-topbar-select-color: var(--black-500);
7449
- --theme-topbar-select-background: var(--black-200);
7450
- --theme-topbar-item-color: var(--black-500);
7451
- --theme-topbar-item-color-hover: var(--black-600);
7452
- --theme-topbar-item-background-hover: var(--black-200);
7453
- --theme-topbar-item-color-current: var(--black);
7454
- --theme-topbar-item-border-current: var(--theme-primary);
7455
- --theme-topbar-accent-border: 3px solid var(--theme-primary);
7456
- --theme-topbar-bottom-border: 1px solid var(--black-225);
7457
- --theme-post-title-color: var(--theme-link-color);
7458
- --theme-post-title-color-hover: var(--theme-link-color-hover);
7459
- --theme-post-title-color-visited: var(--theme-link-color-visited);
7460
- --theme-post-title-font-family: var(--theme-body-font-family);
7461
- --theme-post-body-font-family: var(--theme-body-font-family);
7462
- }
7463
- body,
7464
- body.themed,
7465
- body .themed {
7466
- color: var(--theme-body-font-color, var(--black-600));
7467
7421
  }
7468
7422
  body:not(.theme-highcontrast):not(.theme-dark),
7469
7423
  body:not(.theme-highcontrast).theme-dark .theme-light__forced,
@@ -26200,7 +26154,7 @@ ol {
26200
26154
  /* stylelint-disable */
26201
26155
  html,
26202
26156
  body {
26203
- color: var(--theme-body-font-color);
26157
+ color: var(--theme-body-font-color, var(--black-600));
26204
26158
  font-family: var(--theme-body-font-family);
26205
26159
  font-size: var(--fs-base);
26206
26160
  line-height: var(--lh-base);
@@ -26214,7 +26168,7 @@ body {
26214
26168
  body {
26215
26169
  box-sizing: border-box;
26216
26170
  min-height: 100%;
26217
- background-color: var(--theme-background-color);
26171
+ background-color: var(--theme-background-color, var(--white));
26218
26172
  }
26219
26173
  body *,
26220
26174
  body *:before,