@stackoverflow/stacks 2.0.0-rc.1 → 2.0.0-rc.11

package/lib/components/tag/tag.less

@@ -1,13 +1,13 @@
 .s-tag {
-    --_ta-bc: var(--theme-tag-border-color);
-    --_ta-bc-hover: var(--theme-tag-hover-border-color);
+    --_ta-bc: var(--theme-tag-border-color, transparent);
+    --_ta-bc-hover: var(--theme-tag-hover-border-color, transparent);
     --_ta-bc-selected: transparent;
-    --_ta-bg: var(--theme-tag-background-color);
-    --_ta-bg-hover: var(--theme-tag-hover-background-color);
+    --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
+    --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
     --_ta-bg-selected: var(--theme-secondary-300);
     --_ta-br: var(--br-sm);
-    --_ta-fc: var(--theme-tag-color);
-    --_ta-fc-hover: var(--theme-tag-hover-color);
+    --_ta-fc: var(--theme-tag-color, var(--theme-secondary-500));
+    --_ta-fc-hover: var(--theme-tag-hover-color, var(--theme-secondary-600));
     --_ta-fc-selected: var(--theme-secondary-600);
     --_ta-fs: var(--fs-caption);
     --_ta-lh: 1.846153846;
@@ -99,41 +99,41 @@
 
     // moderator overrides other muted and required, required overrides muted
     &&__moderator {
-        --_ta-bc: var(--red-300);
-        --_ta-bg: var(--red-200);
-        --_ta-fc: var(--red-600);
-        --_ta-bc-hover: var(--red-400);
-        --_ta-bg-hover: var(--red-300);
-        --_ta-fc-hover: var(--red-600);
-        --_ta-bc-selected: var(--red-400);
-        --_ta-bg-selected: var(--red-300);
-        --_ta-fc-selected: var(--red-600);
+        --_ta-bc: transparent;
+        --_ta-bg: var(--orange-100);
+        --_ta-fc: var(--orange-500);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--orange-200);
+        --_ta-fc-hover: var(--orange-600);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--orange-300);
+        --_ta-fc-selected: var(--orange-600); // Currently APCA Lc 49 😔
     }
 
     &&__muted:not(&__moderator):not(&__required) {
         --_ta-bc: transparent;
-        --_ta-bg: var(--black-200);
-        --_ta-fc: var(--black-500);
+        --_ta-bg: var(--black-150);
+        --_ta-fc: var(--black-400);
         --_ta-bc-hover: transparent;
-        --_ta-bg-hover: var(--black-225);
-        --_ta-fc-hover: var(--black-600);
+        --_ta-bg-hover: var(--black-200);
+        --_ta-fc-hover: var(--black-500);
         --_ta-bc-selected: transparent;
-        --_ta-bg-selected: var(--black-300);
+        --_ta-bg-selected: var(--black-225);
         --_ta-fc-selected: var(--black-600);
 
         .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
     }
 
     &&__required:not(&__moderator) {
-        --_ta-bc: var(--bc-dark);
-        --_ta-bg: var(--black-200);
-        --_ta-fc: var(--black-500);
-        --_ta-bc-hover: var(--black-350);
-        --_ta-bg-hover: var(--black-225);
-        --_ta-fc-hover: var(--black-600);
-        --_ta-bc-selected: var(--black-400);
-        --_ta-bg-selected: var(--black-300);
-        --_ta-fc-selected: var(--black-600);
+        --_ta-bc: transparent;
+        --_ta-bg: var(--theme-secondary-500);
+        --_ta-fc: var(--white);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--theme-secondary-400);
+        --_ta-fc-hover: var(--white);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--theme-secondary-600);
+        --_ta-fc-selected: var(--white);
     }
     &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {

package/lib/components/tag/tag.visual.test.ts

@@ -0,0 +1,46 @@
+import { html } from "@open-wc/testing";
+import { IconClearSm } from "@stackoverflow/stacks-icons";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const children = {
+    default: `default`,
+    dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
+    sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div data-testid="${testid}" class="d-inline-block p4">${component}</div>
+`;
+
+describe("tag", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-tag",
+        variants: ["ignored", "watched", "moderator", "muted", "required"],
+        modifiers: {
+            global: ["is-selected"],
+        },
+        children,
+        template,
+    });
+
+    // Size modifiers
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-tag",
+        modifiers: {
+            primary: ["xs", "sm", "md", "lg"],
+            global: ["is-selected"],
+        },
+        children: {
+            default: `default`,
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+    });
+});

package/lib/components/toast/toast.a11y.test.ts

@@ -0,0 +1,30 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("toast > notice", () => {
+    // This is a test of notice component wrapped in a toast component
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-notice", // s-toast is a wrapper around s-notice
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        children: {
+            toast: `<span id="message">Test toast</span>`,
+        },
+        tag: "aside",
+        template: ({ component, testid }) => html`
+            <div
+                class="s-toast ps-static t0 l0"
+                role="alertdialog"
+                aria-hidden="false"
+                aria-labelledby="message"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});

package/lib/components/toast/toast.visual.test.ts

@@ -11,16 +11,20 @@ describe("toast > notice", () => {
         modifiers: {
             primary: ["important"],
         },
-        attributes: {
-            ariaHidden: "false",
-        },
         children: {
-            toast: "Test toast",
+            toast: `<span id="message">Test toast</span>`,
         },
         tag: "aside",
         template: ({ component, testid }) => html`
-            <div data-testid="${testid}" class="s-toast" aria-hidden="false">
-                ${component}
+            <div class="d-inline-block p8" data-testid="${testid}">
+                <div
+                    class="s-toast ps-static t0 l0"
+                    role="alertdialog"
+                    aria-hidden="false"
+                    aria-labelledby="message"
+                >
+                    ${component}
+                </div>
             </div>
         `,
     });

package/lib/components/toggle-switch/toggle-switch.less

@@ -21,15 +21,11 @@
                     &.s-toggle-switch--label-off {
                         --_ts-multiple-bg: var(--black-400);
                         --_ts-multiple-fc: var(--white);
-
-                        .dark-mode({ --_ts-multiple-bg: var(--black-350); });
                     }
 
                     &:not(.s-toggle-switch--label-off) {
                         --_ts-multiple-bg: var(--green-400);
-                        --_ts-multiple-fc: var(--_white-static);
-
-                        .highcontrast-mode({ --_ts-multiple-fc: var(--white); });
+                        --_ts-multiple-fc: var(--white);
                     }
                 }
 
@@ -102,6 +98,7 @@
         background-repeat: no-repeat;
         border-radius: 1000px;
         cursor: pointer;
+        flex-shrink: 0;
         height: var(--su-static24);
         margin: 0; // guard against production adding 5px of margin to these
         transition: background-position 0.2s ease;

package/lib/components/topbar/topbar.less

@@ -8,26 +8,26 @@
     min-width: auto;
     width: 100%;
     z-index: var(--zi-navigation-fixed);
-    background-color: var(--theme-topbar-background-color);
-    height: var(--theme-topbar-height);
+    background-color: var(--theme-topbar-background-color, var(--white));
+    height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
     display: flex;
-    border-top: var(--theme-topbar-accent-border);
-    border-bottom: var(--theme-topbar-bottom-border);
+    border-top: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
+    border-bottom: var(--theme-topbar-bottom-border, 1px solid var(--black-225));
     position: relative;
     align-items: center;
 
     // Redefine the variables for extra contrast in high-contrast mode
     .highcontrast-mode({
         // Search input
-        --theme-topbar-search-color: var(--theme-topbar-item-color);
-        --theme-topbar-search-background: var(--theme-topbar-background-color);
-        --theme-topbar-search-placeholder: var(--theme-topbar-item-color);
-        --theme-topbar-search-border: var(--theme-topbar-item-color);
-        --theme-topbar-search-border-focus: var(--theme-topbar-item-color);
+        --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-400));
+        --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
+        --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-400));
+        --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-400));
+        --theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-400));
 
         // Search switcher
-        --theme-topbar-select-color: var(--theme-topbar-item-color);
-        --theme-topbar-select-background: var(--theme-topbar-background-color);
+        --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-400));
+        --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
 
         // Topbar items
         --theme-topbar-item-color: var(--black-600);
@@ -57,11 +57,11 @@
     }
 
     a.s-topbar--logo:hover {
-        background-color: var(--theme-topbar-item-background-hover);
+        background-color: var(--theme-topbar-item-background-hover, var(--black-200));
     }
 
     a.s-topbar--logo.is-selected {
-        background-color: var(--theme-topbar-item-background-hover);
+        background-color: var(--theme-topbar-item-background-hover, var(--black-200));
     }
 
     .s-topbar--menu-btn {
@@ -80,7 +80,7 @@
             &:after {
                 width: var(--su-static16);
                 height: var(--su-static2);
-                background-color: var(--theme-topbar-item-color);
+                background-color: var(--theme-topbar-item-color, var(--black-400));
                 position: relative;
             }
 
@@ -102,7 +102,7 @@
 
         // Transforming hamburger into x
         &.is-selected {
-            color: var(--theme-topbar-item-color-current);
+            color: var(--theme-topbar-item-color-current, var(--black));
             background-color: var(--theme-topbar-item-background-current);
 
             span {
@@ -119,22 +119,38 @@
         }
 
         &:hover {
-            color: var(--theme-topbar-item-color-hover);
-            background-color: var(--theme-topbar-item-background-hover);
+            color: var(--theme-topbar-item-color-hover, var(--black-600));
+            background-color: var(--theme-topbar-item-background-hover, var(--black-200));
         }
     }
 
     .s-navigation {
         .s-navigation--item:focus-visible {
-            box-shadow: var(--theme-topbar-search-shadow-focus);
+            box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
         }
         .s-navigation--item:not(.is-selected) {
-            color: var(--theme-topbar-item-color);
+            color: var(--theme-topbar-item-color, var(--black-400));
         }
 
         .s-navigation--item:not(.is-selected):hover {
-            color: var(--theme-topbar-item-color-hover);
-            background-color: var(--theme-topbar-item-background-hover);
+            color: var(--theme-topbar-item-color-hover, var(--black-600));
+            background-color: var(--theme-topbar-item-background-hover, var(--black-200));
+        }
+    }
+    .s-popover .s-navigation {
+        .s-navigation--item {
+            &:focus-visible {
+                box-shadow: var(0 0 0 var(--su-static4) var(--focus-ring));
+            }
+
+            &:not(.is-selected) {
+                &:hover {
+                    color: var(--black-600);
+                    background-color: var(--black-200);
+                }
+
+                color: var(--black-500);
+            }
         }
     }
 }
@@ -166,7 +182,7 @@
     --theme-topbar-item-color-hover: .set-black()[600];
     --theme-topbar-item-background-hover: .set-black()[200];
     --theme-topbar-item-color-current: var(--_black-static);
-    --theme-topbar-item-border-current: var(--theme-primary);
+    // --theme-topbar-item-border-current: var(--theme-primary); // As of Stacks v2, this is unused
 
     // TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
     // redefine the variables for extra contrast in high-contrast mode
@@ -218,7 +234,7 @@
     --theme-topbar-item-color-hover: var(--_white-static);
     --theme-topbar-item-background-hover: .set-black()[500];
     --theme-topbar-item-color-current: var(--_white-static);
-    --theme-topbar-item-border-current: var(--theme-primary);
+    // --theme-topbar-item-border-current: var(--theme-primary); // As of Stacks v2, this is unused
 
     // Themed border accent
     --theme-topbar-accent-border: none;
@@ -267,7 +283,7 @@
     margin-left: auto; // Push this section as far to the right as possible
 
     .s-topbar--item:not(.s-topbar--item__unset) {
-        color: var(--theme-topbar-item-color);
+        color: var(--theme-topbar-item-color, var(--black-400));
         display: inline-flex;
         align-items: center;
         padding: 0 calc(var(--su12) - var(--su2));
@@ -280,14 +296,14 @@
         &.is-selected,
         &.is-selected:hover,
         &.is-selected:focus {
-            color: var(--theme-topbar-item-color-hover);
-            background-color: var(--theme-topbar-item-background-hover);
+            color: var(--theme-topbar-item-color-hover, var(--black-600));
+            background-color: var(--theme-topbar-item-background-hover, var(--black-200));
             text-decoration: none;
             outline: none;
 
             .s-activity-indicator {
                 top: calc(50% - calc(var(--su16) + var(--su2))); // 50% - 18px
-                box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover);
+                box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200));
             }
         }
 
@@ -300,7 +316,7 @@
             top: calc(50% - calc(var(--su12) + var(--su2))); // 50% - 14px
             right: var(--su-static2);
             transition: top var(--te-smooth) 0.15s;
-            box-shadow: 0 0 0 var(--su-static2)  var(--theme-topbar-background-color);
+            box-shadow: 0 0 0 var(--su-static2)  var(--theme-topbar-background-color, var(--white));
         }
     }
 
@@ -325,11 +341,11 @@
     margin-right: var(--su8);
     flex-shrink: 0;
 
-    .topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color));
+    .topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color, var(--black-400)));
 
     &:hover,
     &:focus {
-        .topbar-notice-styles(var(--theme-topbar-item-background-hover), var(--theme-topbar-item-background-hover), var(--theme-topbar-item-color-hover));
+        .topbar-notice-styles(var(--theme-topbar-item-background-hover, var(--black-200)), var(--theme-topbar-item-background-hover, var(--black-200)), var(--theme-topbar-item-color-hover, var(--black-600)));
     }
 
     &.is-unread {
@@ -358,26 +374,26 @@
         flex-grow: 1;
 
         .s-input {
-            border-color: var(--theme-topbar-search-border);
-            background-color: var(--theme-topbar-search-background);
+            border-color: var(--theme-topbar-search-border, var(--black-300));
+            background-color: var(--theme-topbar-search-background, var(--white));
             box-shadow: var(--theme-topbar-search-shadow);
-            color: var(--theme-topbar-search-color);
+            color: var(--theme-topbar-search-color, var(--black-500));
             display: block;
             line-height: @inputLineHeights;
 
             &:focus {
-                border-color: var(--theme-topbar-search-border-focus);
-                box-shadow: var(--theme-topbar-search-shadow-focus);
+                border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
+                box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
             }
 
             &::placeholder {
-                color: var(--theme-topbar-search-placeholder);
+                color: var(--theme-topbar-search-placeholder, var(--black-400));
                 font-style: normal;
             }
         }
 
         .s-input-icon {
-            color: var(--theme-topbar-search-placeholder);
+            color: var(--theme-topbar-search-placeholder, var(--black-400));
         }
     }
 
@@ -386,7 +402,7 @@
 
         align-self: stretch;
         margin-right: calc(var(--su-static1) * -1); //-1px
-        color: var(--theme-topbar-select-color);
+        color: var(--theme-topbar-select-color, var(--black-500));
 
         &:before,
         &:after {
@@ -399,13 +415,13 @@
         height: 100%;
         line-height: @inputLineHeights;
 
-        border-color: var(--theme-topbar-search-border);
-        background-color: var(--theme-topbar-select-background);
-        color: var(--theme-topbar-select-color);
+        border-color: var(--theme-topbar-search-border, var(--black-300));
+        background-color: var(--theme-topbar-select-background, var(--black-200));
+        color: var(--theme-topbar-select-color, var(--black-500));
 
         &:focus {
-            border-color: var(--theme-topbar-search-border-focus);
-            box-shadow: var(--theme-topbar-search-shadow-focus);
+            border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
+            box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
             z-index: var(--zi-selected);
         }
     }
@@ -423,7 +439,7 @@
         top: 100%;
         max-width: 100%;
         padding: var(--su8) var(--su12);
-        background: var(--theme-topbar-item-background-hover);
+        background: var(--theme-topbar-item-background-hover, var(--black-200));
 
         &.s-topbar--searchbar__open {
             display: flex;

package/lib/components/uploader/uploader.less

@@ -10,6 +10,15 @@
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         --_up-bg-bc-hc: var(--black-400);
+        &.has-error {
+            --_up-bg-bc-hc-state: var(--red-500);
+        }
+        &.has-success {
+            --_up-bg-bc-hc-state: var(--green-400);
+        }
+        &.has-warning {
+            --_up-bg-bc-hc-state: var(--yellow-500);
+        }
     });
 
     // STATES
@@ -22,30 +31,27 @@
     }
 
     &.has-error {
-        --_up-bg: var(--red-200);
-        --_up-bg-focus: var(--red-300);
-        --_up-bg-bc: var(--red-400);
-        --_up-bg-bc-hc-state: var(--red-400);
+        --_up-bg: var(--red-100);
+        --_up-bg-focus: var(--red-200);
+        --_up-bg-bc: var(--red-300);
         --_up-focus-ring-color: var(--focus-ring-error);
-        --_up-link-fc: var(--red-600);
+        --_up-link-fc: var(--red-500);
     }
 
     &.has-success {
         --_up-bg: var(--green-100);
         --_up-bg-focus: var(--green-200);
-        --_up-bg-bc: var(--green-400);
-        --_up-bg-bc-hc-state: var(--green-400);
+        --_up-bg-bc: var(--green-300);
         --_up-focus-ring-color: var(--focus-ring-success);
-        --_up-link-fc: var(--green-600);
+        --_up-link-fc: var(--green-400);
     }
 
     &.has-warning {
-        --_up-bg: var(--yellow-200);
-        --_up-bg-focus: var(--yellow-300);
-        --_up-bg-bc: var(--yellow-400);
-        --_up-bg-bc-hc-state: var(--yellow-400);
+        --_up-bg: var(--yellow-100);
+        --_up-bg-focus: var(--yellow-200);
+        --_up-bg-bc: var(--yellow-300);
         --_up-focus-ring-color: var(--focus-ring-warning);
-        --_up-link-fc: var(--yellow-600);
+        --_up-link-fc: var(--yellow-500);
     }
 
     &.is-active {

package/lib/components/user-card/user-card.less

@@ -21,7 +21,7 @@
     }
 
     &&__highlighted {
-        --_uc-bg: var(--theme-secondary-200);
+        --_uc-bg: var(--theme-secondary-100);
         --_uc-bar: var(--br-md);
         --_uc-time-fc: var(--black-500);
         --_uc-type-fc: var(--black-500);
@@ -106,8 +106,8 @@
     }
 
     & &--type {
-        a {
-            color: inherit;
+        a:not(.s-link) {
+            color: inherit !important;
         }
 
         color: var(--_uc-type-fc);

package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap

@@ -290,23 +290,23 @@ body .themed {
     --black-200: hsl(210, 8%, 90%);
     --black-225: hsl(210, 8%, 85%);
     --black-250: hsl(210, 8%, 80%);
-    --black-300: hsl(213, 9%, 75%);
-    --black-350: hsl(212, 8%, 68%);
-    --black-400: hsl(210, 8%, 45%);
+    --black-300: hsl(210, 9%, 75%);
+    --black-350: hsl(210, 8%, 68%);
+    --black-400: hsl(210, 8%, 42%);
     --black-500: hsl(210, 8%, 25%);
     --black-600: hsl(210, 8%, 5%);
-    --black: hsl(0, 8%, 5%);
+    --black: hsl(0, 0%, 0%);
     --orange-100: hsl(23, 85%, 97%);
     --orange-200: hsl(27, 85%, 87%);
     --orange-300: hsl(27, 85%, 72%);
-    --orange-400: hsl(27, 90%, 55%);
-    --orange-500: hsl(27, 88%, 43%);
+    --orange-400: hsl(27, 80%, 52%);
+    --orange-500: hsl(27, 80%, 43%);
     --orange-600: hsl(27, 80%, 29%);
     --blue-100: hsl(210, 80%, 96%);
     --blue-200: hsl(210, 80%, 91%);
     --blue-300: hsl(210, 78%, 76%);
-    --blue-400: hsl(210, 70%, 48%);
-    --blue-500: hsl(210, 75%, 36%);
+    --blue-400: hsl(210, 77%, 46%);
+    --blue-500: hsl(210, 77%, 36%);
     --blue-600: hsl(210, 80%, 23%);
     --green-100: hsl(148, 35%, 95%);
     --green-200: hsl(148, 35%, 88%);
@@ -314,7 +314,7 @@ body .themed {
     --green-400: hsl(148, 70%, 31%);
     --green-500: hsl(148, 75%, 22%);
     --green-600: hsl(148, 75%, 15%);
-    --red-100: hsl(0, 78%, 96%);
+    --red-100: hsl(0, 72%, 96%);
     --red-200: hsl(0, 70%, 93%);
     --red-300: hsl(0, 65%, 76%);
     --red-400: hsl(0, 60%, 49%);
@@ -326,6 +326,12 @@ body .themed {
     --yellow-400: hsl(43, 85%, 50%);
     --yellow-500: hsl(43, 85%, 33%);
     --yellow-600: hsl(43, 84%, 18%);
+    --purple-100: hsl(237, 80%, 96%);
+    --purple-200: hsl(237, 77%, 92%);
+    --purple-300: hsl(237, 60%, 83%);
+    --purple-400: hsl(237, 55%, 57%);
+    --purple-500: hsl(237, 50%, 45%);
+    --purple-600: hsl(237, 50%, 32%);
     --gold-100: hsl(46, 100%, 91%);
     --gold-200: hsl(46, 100%, 74%);
     --gold-300: hsl(45, 100%, 42%);
@@ -355,7 +361,7 @@ body .themed {
     --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
     --highlight-addition: var(--green-500);
     --highlight-attribute: hsl(206, 98.5%, 29%);
-    --highlight-bg: var(--black-100);
+    --highlight-bg: hsl(0, 0%, 96.5%);
     --highlight-color: var(--black-600);
     --highlight-comment: hsl(210, 8%, 43.5%);
     --highlight-deletion: var(--red-500);
@@ -395,6 +401,7 @@ body .themed {
     --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
     --theme-secondary-custom: var(--theme-secondary-custom-400);
     --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+    color: var(--theme-body-font-color, var(--black-600));
 }
 "
 `;