AskDocs/Ask SpotterCode panel updates

gatsby-browser.js

@@ -1,3 +1,15 @@
+const originalFetch = window.fetch.bind(window);
+window.fetch = (input, init) => {
+    const url = typeof input === 'string' ? input : input?.url ?? '';
+    if (url.includes('radiant-styles/public/img/rd-icons/rd-icons-sprite/rd-icons.svg')) {
+        return Promise.resolve(new Response('<svg xmlns="http://www.w3.org/2000/svg"></svg>', {
+            status: 200,
+            headers: { 'Content-Type': 'image/svg+xml' },
+        }));
+    }
+    return originalFetch(input, init);
+};
+
 exports.onClientEntry = () => {
     // Dynamic imports so @thoughtspot/radiant-react (which reads `window` at
     // module-load time) is never evaluated during Gatsby's SSR build.

src/assets/styles/admonition.scss

@@ -91,5 +91,24 @@
         table-layout: fixed;
         position: relative;
         width: 100%;
+
+        // Asciidoctor renders this as a plain, class-less <table> (its own
+        // icon+content layout template, not a real [cols=...] table block),
+        // but Document/index.scss's generic `table` rule still matches it
+        // and adds a flat grey border-top with no radius — it extends past
+        // td.content's rounded top-right corner below it. Reset it here
+        // rather than touching the shared rule, since real content tables
+        // (with the .tableblock class) should keep that border.
+        border-top: none;
     }
+}
+
+// Inline `code` normally sits on the near-white --code-text-bg, which in
+// light mode reads as a stark, disconnected chip against a tinted
+// admonition background (e.g. the note block's light blue). Blend it into
+// the ambient tint with a translucent overlay instead of a fixed color.
+#wrapper[data-theme='light'] .documentWrapper .admonitionblock code,
+#docsModal[data-theme='light'] .documentWrapper .admonitionblock code {
+    background: rgba(0, 0, 0, 0.06);
+    border-color: rgba(0, 0, 0, 0.12);
 }

src/assets/styles/index.scss

@@ -655,9 +655,10 @@ button {
 .admonitionblock.note {
     border-left: 4px solid var(--var-note-color);
     td.content {
-        border: 1px solid var(--var-note-color);
+        border: 0.5px solid var(--note-border-color);
+        border-left: none;
         box-shadow: var(--box-shadow);
-        border-radius: 10px !important;;
+        border-radius: 0 5px 5px 0 !important;
         background: var(--note-block-color);
 
     }
@@ -680,8 +681,9 @@ button {
     border-left: 4px solid var(--var-important-color);
     td.content {
         border: 1px solid var(--important-border-color);
+        border-left: none;
         box-shadow: var(--box-shadow);
-        border-radius: 5px !important;
+        border-radius: 0 5px 5px 0 !important;
         background: var(--important-block-color);
     }
     td.icon {
@@ -694,8 +696,9 @@ button {
     border-left: 5px solid $warning-color;
     td.content {
         border: 1px solid $warning-color;
+        border-left: none;
         box-shadow: var(--box-shadow);
-        border-radius: 5px !important;
+        border-radius: 0 5px 5px 0 !important;
     }
     td.icon {
         left: 20px !important;
@@ -707,8 +710,9 @@ button {
     border-left: 5px solid $caution-color;
     td.content {
         border: 1px solid $caution-color;
+        border-left: none;
         box-shadow: var(--box-shadow);
-        border-radius: 5px !important;
+        border-radius: 0 5px 5px 0 !important;
     }
     td.icon {
         left: 20px !important;
@@ -1800,7 +1804,7 @@ a.anchor {
     /* optional .cl-label role on a paragraph in the left cell */
     .cl-label p {
         display: inline-block;
-        border: 1px solid var(--rel-notes-pill-border);
+        border: 0.5px solid var(--rel-notes-pill-border);
         background-color: var(--rd-comp-color-button-primary-on-color-hover);
         color: var(--rel-notes-tag-text);
         font-size: 14px;

src/assets/styles/variables.scss

@@ -183,11 +183,7 @@ $tag-color-light: $lightgrey;
 
 // ---------------------------------------------------------------------------
 // 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
-// silently stop working. So the SAME alias block must be emitted on every
-// element that carries data-theme. Hence one mixin, included twice.
+// the element where it is DECLARED, not where it is used.
 // ---------------------------------------------------------------------------
 
 @mixin ts-docs-radiant-aliases {
@@ -334,7 +330,7 @@ $tag-color-light: $lightgrey;
     --body-background-color: #1F2024;
     --table-header-bg: #26282C;
     --copy-page-menu-bg: #26282C;
-    --rel-notes-tag-bg-color: #A0C4FF;
+    --rel-notes-tag-bg-color: var(--note-block-color);
     --rel-notes-tag-text: #71a1f4;
     --rel-notes-pill-border: #278CFF;
     /* dark-mode-only admonition background — light mode keeps its existing

src/components/Document/index.scss

@@ -23,30 +23,36 @@
     padding: 8px 14px;
     font-size: 13px;
     font-weight: 500;
-    color: #1d232f !important;
-    background: #fff;
+    color: var(--primary-color) !important;
+    background: var(--panel-bg-color);
     border-radius: 100px;
     text-decoration: none;
     white-space: nowrap;
     pointer-events: all;
-    box-shadow:
-        0 4px 16px 0 rgba(25, 35, 49, 0.14),
-        0 1px 4px 0 rgba(25, 35, 49, 0.06);
+    box-shadow: var(--box-shadow-hover);
     transition: box-shadow 0.15s ease;
     font-family: 'Optimo-Plain', sans-serif;
     border: 1px solid transparent;
     isolation: isolate;
 
-    // Sparkle icon
+    // Sparkle icon — shape supplied as a mask so its color follows
+    // --rd-sys-color-content-brand, the same token the FloatingAssistant
+    // widget's own sparkle icon (IconColor.BLUE) resolves its fill from,
+    // keeping the two in sync in both themes.
     &::before {
         content: '';
         display: inline-block;
         width: 16px;
         height: 16px;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27' fill='%232770EF' stroke='none'%3E%3Cpath fill='%232770EF' stroke='none' d='M8.25809 7.21109C8.83155 5.59342 11.1191 5.59349 11.6927 7.21109L13.4163 12.0753C13.4919 12.2885 13.6602 12.4568 13.8733 12.5324L18.7376 14.256C20.3555 14.8294 20.3555 17.1172 18.7376 17.6906L13.8733 19.4142C13.6601 19.4898 13.4918 19.658 13.4163 19.8712L11.6927 24.7355C11.1191 26.353 8.83157 26.3531 8.25809 24.7355L6.53445 19.8712C6.4589 19.658 6.29064 19.4898 6.07742 19.4142L1.21316 17.6906C-0.404397 17.1171 -0.404379 14.8295 1.21316 14.256L6.07742 12.5324C6.29058 12.4568 6.45883 12.2885 6.53445 12.0753L8.25809 7.21109ZM20.2805 0.49136C20.6395 -0.163697 21.6064 -0.163877 21.9651 0.49136L22.0315 0.642727L22.888 3.05972L25.3059 3.91616C26.1625 4.21966 26.1622 5.43079 25.3059 5.73452L22.888 6.59097L22.0315 9.00894C21.7279 9.86544 20.5167 9.86552 20.2132 9.00894L19.3567 6.59097L16.9397 5.73452C16.0831 5.43098 16.0831 4.21969 16.9397 3.91616L19.3567 3.05972L20.2132 0.642727L20.2805 0.49136Z'/%3E%3C/svg%3E");
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
+        background-color: var(--rd-sys-color-content-brand, #2770EF);
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27'%3E%3Cpath d='M8.25809 7.21109C8.83155 5.59342 11.1191 5.59349 11.6927 7.21109L13.4163 12.0753C13.4919 12.2885 13.6602 12.4568 13.8733 12.5324L18.7376 14.256C20.3555 14.8294 20.3555 17.1172 18.7376 17.6906L13.8733 19.4142C13.6601 19.4898 13.4918 19.658 13.4163 19.8712L11.6927 24.7355C11.1191 26.353 8.83157 26.3531 8.25809 24.7355L6.53445 19.8712C6.4589 19.658 6.29064 19.4898 6.07742 19.4142L1.21316 17.6906C-0.404397 17.1171 -0.404379 14.8295 1.21316 14.256L6.07742 12.5324C6.29058 12.4568 6.45883 12.2885 6.53445 12.0753L8.25809 7.21109ZM20.2805 0.49136C20.6395 -0.163697 21.6064 -0.163877 21.9651 0.49136L22.0315 0.642727L22.888 3.05972L25.3059 3.91616C26.1625 4.21966 26.1622 5.43079 25.3059 5.73452L22.888 6.59097L22.0315 9.00894C21.7279 9.86544 20.5167 9.86552 20.2132 9.00894L19.3567 6.59097L16.9397 5.73452C16.0831 5.43098 16.0831 4.21969 16.9397 3.91616L19.3567 3.05972L20.2132 0.642727L20.2805 0.49136Z'/%3E%3C/svg%3E");
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27'%3E%3Cpath d='M8.25809 7.21109C8.83155 5.59342 11.1191 5.59349 11.6927 7.21109L13.4163 12.0753C13.4919 12.2885 13.6602 12.4568 13.8733 12.5324L18.7376 14.256C20.3555 14.8294 20.3555 17.1172 18.7376 17.6906L13.8733 19.4142C13.6601 19.4898 13.4918 19.658 13.4163 19.8712L11.6927 24.7355C11.1191 26.353 8.83157 26.3531 8.25809 24.7355L6.53445 19.8712C6.4589 19.658 6.29064 19.4898 6.07742 19.4142L1.21316 17.6906C-0.404397 17.1171 -0.404379 14.8295 1.21316 14.256L6.07742 12.5324C6.29058 12.4568 6.45883 12.2885 6.53445 12.0753L8.25809 7.21109ZM20.2805 0.49136C20.6395 -0.163697 21.6064 -0.163877 21.9651 0.49136L22.0315 0.642727L22.888 3.05972L25.3059 3.91616C26.1625 4.21966 26.1622 5.43079 25.3059 5.73452L22.888 6.59097L22.0315 9.00894C21.7279 9.86544 20.5167 9.86552 20.2132 9.00894L19.3567 6.59097L16.9397 5.73452C16.0831 5.43098 16.0831 4.21969 16.9397 3.91616L19.3567 3.05972L20.2132 0.642727L20.2805 0.49136Z'/%3E%3C/svg%3E");
+        -webkit-mask-size: contain;
+        mask-size: contain;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
         flex-shrink: 0;
         position: relative;
         z-index: 1;
@@ -81,11 +87,9 @@
     }
 
     &:hover {
-        color: #1d232f !important;
+        color: var(--primary-color) !important;
         text-decoration: none;
-        box-shadow:
-            0 4px 16px 0 rgba(25, 35, 49, 0.14),
-            0 1px 4px 0 rgba(25, 35, 49, 0.06);
+        box-shadow: var(--box-shadow-hover);
 
         &::after {
             opacity: 1;
@@ -94,6 +98,11 @@
     }
 }
 
+#wrapper[data-theme='dark'] .selection-cta-button,
+#docsModal[data-theme='dark'] .selection-cta-button {
+    background: #26282C;
+}
+
 .documentWrapper {
     width: calc(98%);
     color: var(--primary-color);
@@ -246,9 +255,9 @@
             display: inline-flex;
             align-items: center;
             padding: 4px 10px;
-            font-size: 13px;
+            font-size: 14px;
             font-weight: 500;
-            color: var(--nav-accent-color);
+            color: #71a1f4;
             background: transparent;
             border: none;
             border-radius: 5px;
@@ -669,11 +678,7 @@ pre {
     }
 }
 
-// Walkthroughs landing page only — zeroed out entirely (rather than mirrored
-// like other pages) so .radiance-bg's own negative inset has a clean 0
-// baseline to bleed from on all three edges. Compound selector (higher
-// specificity than .doc-wrapper-detail alone) so it doesn't need source
-// order and doesn't affect any other page using .doc-wrapper-detail.
+// Walkthroughs landing page only
 .doc-wrapper-detail.doc-walkthroughs {
     padding: 0;
     @media (max-width: $mobile-resolution-max) {

src/components/Document/index.tsx

@@ -39,6 +39,13 @@ const Document = (props: {
             if (target.closest('.selection-cta-button')) return;
             if (target.closest('.floating-assistant__panel, .floating-assistant__chip-ring')) return;
 
+            // Only offer "Ask SpotterCode" for selections inside the main article
+            // body — not the left nav, header, footer, or right-side doc map/TOC.
+            if (!target.closest('.documentView')) {
+                setSelectionPos(null);
+                return;
+            }
+
             // If mouse didn't move (plain click, not a drag-select), don't re-show
             const moved = Math.abs(e.clientX - mouseDownX) > 3 || Math.abs(e.clientY - mouseDownY) > 3;
             if (!moved) return;