Css theme updates dark and light mode - radiant colors

src/assets/styles/index.scss

@@ -1162,42 +1162,13 @@ a.anchor {
     }
 }
 // ── Radiance blob gradient — confined to the header banner only ────────────
-// `.radiance-bg` lives *inside* `.header-banner` (which is `position:
-// relative` and already scoped to the content column, next to the sidebar
-// — see the header-banner rule below) instead of being `position: fixed`
-// relative to the full viewport. A viewport-wide fixed layer bled behind
-// the sidebar, wasting part of the gradient and throwing off the visible
-// color balance. `position: absolute` here is sized relative to
-// `.header-banner`'s own box, so it only ever spans the visible content
-// lane.
-// `bottom: 0` (instead of a fixed/viewport height) makes this match
-// `.header-banner`'s own content-driven height exactly, so the gradient —
-// including its own `overflow: hidden` clipping of the oversized blobs —
-// ends exactly where the banner ends and never bleeds into the cards
-// section below, regardless of viewport height.
 .radiance-bg {
     position: absolute;
     inset: 0;
-    // z-index 0 (an explicit stacking context via position + z-index) keeps
-    // this behind the header-banner text/search bar, which are given their
-    // own explicit stacking priority below rather than relying on DOM order.
     z-index: 0;
     overflow: hidden;
     pointer-events: none;
     background-color: var(--header-banner-base);
-
-    // Blobs (below) are sized/positioned to fill most of the banner box,
-    // which spreads visible color across it. This overlay sits above the
-    // blobs (explicit z-index beats their z-index:auto) and fades from
-    // transparent — letting the blobs show through near the top — to the
-    // flat base color toward the bottom.
-    // A plain 2-stop linear fade (transparent -> solid) has a sharp change
-    // in slope right where it hits full opacity — even though the color
-    // matches the page background exactly, that slope discontinuity reads
-    // as a visible "seam" (a Mach-band effect) right at the banner/cards
-    // boundary. The extra `color-mix` stops below ease the taper in
-    // gradually (S-curve) instead of snapping from "still fading" to
-    // "fully flat", which removes that perceived hard edge.
     &::after {
         content: '';
         position: absolute;
@@ -1218,19 +1189,9 @@ a.anchor {
     .blob {
         position: absolute;
         border-radius: 50%;
-        // The radial-gradient's own falloff still reads as a bounded shape
-        // with a visible (if soft) edge — an actual blur is what turns it
-        // into ambient diffuse light with no perceptible boundary.
         filter: blur(60px);
     }
 
-    // height/top use `vh` (not `%`) so blob proportions stay the same
-    // regardless of how tall `.radiance-bg` itself is. With `%`, sizing
-    // against this now-short (header-banner-height) box made every blob so
-    // vertically compressed (nearly as tall as the whole clipped area) that
-    // there was no visible core/edge left to show drift against — the
-    // blur+clip just read as a flat wash, and the animation, while still
-    // running, was imperceptible.
     // Light mode blobs
     .blob-pink {
         width: 72%;
@@ -1619,8 +1580,6 @@ a.anchor {
     }
 }
 
-// Fluid home page cards for both standalone and embedded presentations.
-// Using flex shorthand so cards reflow naturally when the viewport or iframe width changes.
 .introCard,
 .boxHalfWidth {
     flex: 1 1 260px;

src/assets/styles/variables.scss

@@ -182,7 +182,7 @@ $tag-color-white: var(--body-background-color);
 $tag-color-light: $lightgrey;
 
 // ---------------------------------------------------------------------------
-// radiant remap â a custom property whose value contains var() is resolved on
+// radiant remap a custom property whose value contains var() is resolved on
 // the element where it is DECLARED, not where it is used. If we alias
 //     --body-background-color: var(--rd-sys-color-background-base);
 // only on :root, dark mode would resolve against :root's (light) token and
@@ -223,13 +223,6 @@ $tag-color-light: $lightgrey;
     --side-nav-active-text:        var(--rd-sys-color-content-brand);
     --side-nav-active-bg:          var(--rd-sys-color-background-ghost-highlight);
     --secondary-color:             var(--rd-sys-color-content-brand);
-    // Docmap (right-nav) hover/active text + border. Deliberately its own
-    // alias rather than reusing --var-note-color: that one maps to
-    // --rd-sys-color-content-information, whose dark-theme value in
-    // radiant-colors.css is a broken placeholder ("x", not a real color),
-    // so anything using it renders with no visible color in dark mode.
-    // --rd-sys-color-content-brand matches --link-text-color exactly and is
-    // valid in both themes.
     --docmap-active-color:          var(--rd-sys-color-content-brand);
 
     /* --- borders --- */

src/components/Document/index.scss

@@ -198,8 +198,6 @@
             font-family: 'Optimo-Plain', sans-serif;
             color: var(--link-text-color);
             background: var(--copy-btn-bg);
-            // Bold (not subtle) border so the button reads clearly against
-            // the code background instead of blending in.
             border: 1px solid var(--rd-sys-color-border-bold);
             border-radius: 999px;
             cursor: pointer;
@@ -208,8 +206,6 @@
         &.has-overflow:not(.expanded) .code-expand-btn {
             position: absolute;
             left: 50%;
-            // Extra clearance from the bottom edge so the button doesn't
-            // sit right on top of the last (masked-fade) line of code.
             bottom: 20px;
             transform: translateX(-50%);
             z-index: 3;
@@ -282,20 +278,11 @@
             transition: background 0.15s ease, color 0.15s ease;
 
             &:hover { background: rgba(255, 255, 255, 0.1); }
-            // Filled green chip (not just a colored icon) to match the
-            // highlighted checkmark treatment shown in the reference.
             &.copied,
             &.copied:hover {
                 color: #0d9f6e;
                 background: rgba(13, 159, 110, 0.14);
             }
-
-            // The global `.icon` rule (assets/styles/index.scss) sets its
-            // own `color`, which wins over inheriting the button's `color`
-            // here (since currentColor resolves against the SVG's own
-            // color, not an ancestor's) — so the checkmark stayed grey even
-            // once the button itself turned green. `.copyIcon` has higher
-            // specificity than the single-class `.icon` rule, so this wins.
             &.copied .copyIcon { color: #0d9f6e; }
         }
     }
@@ -348,10 +335,6 @@
                 .copyButton {
                     color: #fff;
                     &:hover { background: rgba(255, 255, 255, 0.1); color: #cdd9e5; }
-                    // Higher specificity than the plain :hover above (both live
-                    // under this same `#wrapper[data-theme='light'] &` block),
-                    // so the checkmark stays green even while the mouse is
-                    // still over the button right after clicking.
                     &.copied,
                     &.copied:hover {
                         color: #0d9f6e;
@@ -612,9 +595,6 @@
     }
 
     .copyIcon {
-        // Was 15x20 (non-square) — the source glyphs have a square 24x24
-        // viewBox, so a non-square box stretched/distorted them instead of
-        // rendering the icon as designed.
         height: 16px;
         width: 16px;
     }

src/components/Dropdown/index.scss

@@ -52,9 +52,6 @@
         right: 0;
         left: auto;
         padding-top: 6px;
-        // Above the SpotterCode floating-assistant panel (z-index: 1002),
-        // which otherwise covers this dropdown's right edge on narrower
-        // viewports where the panel is open.
         z-index: 1100;
     }
 

src/components/SecondaryHeader/index.scss

@@ -269,8 +269,6 @@
         }
 
         &.active {
-            // Needs !important to beat the global .active rule in assets/styles/index.scss
-            // (var(--var-note-color) !important), same as __tab.active above.
             color: var(--nav-accent-color) !important;
             background: rgba(169, 232, 255, 0.08);
         }