From a9d4cd82afb2df471b3a0858686456f9f5c13cee Mon Sep 17 00:00:00 2001 From: ShashiSubramanya Date: Wed, 19 Aug 2026 23:47:38 +0530 Subject: [PATCH 1/9] css theme update for radiant compliance --- modules/ROOT/pages/home.adoc | 2 - src/assets/styles/index.scss | 55 ++++- src/assets/styles/radiant-colors.css | 237 ++++++++++++++++++++++ src/assets/styles/variables.scss | 235 +++++++++++---------- src/components/Dropdown/index.scss | 6 +- src/components/Header/index.scss | 8 +- src/components/LeftSidebar/index.scss | 11 +- src/components/SecondaryHeader/index.scss | 42 ++-- src/components/SecondaryHeader/index.tsx | 1 - 9 files changed, 458 insertions(+), 139 deletions(-) create mode 100644 src/assets/styles/radiant-colors.css diff --git a/modules/ROOT/pages/home.adoc b/modules/ROOT/pages/home.adoc index 59849dca6..5be6fd6af 100644 --- a/modules/ROOT/pages/home.adoc +++ b/modules/ROOT/pages/home.adoc @@ -27,7 +27,6 @@ [.non-link] ++++
-
Get started with embedding
@@ -117,7 +116,6 @@ [.non-link] ++++
-
Integrate tools and workflows
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 6ecb6ed39..90aad1ac4 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1,3 +1,4 @@ +@import './radiant-colors.css'; @import './variables.scss'; @import './padding.scss'; @import './margin.scss'; @@ -666,6 +667,13 @@ button { padding-bottom: 10px; } } + +// Dark mode: the note block reads as border-only, no fill. +#wrapper[data-theme='dark'] .admonitionblock.note td.content, +#docsModal[data-theme='dark'] .admonitionblock.note td.content { + background: transparent; +} + .admonitionblock.important { border-left: 4px solid var(--var-important-color); td.content { @@ -683,9 +691,22 @@ button { .admonitionblock.warning { border-left: 5px solid $warning-color; td.content { - border: none !important; - border-radius: 0 !important; - box-shadow: none !important; + border: 1px solid $warning-color; + box-shadow: 0 1px 1px $warning-color; + border-radius: 5px !important; + } + td.icon { + left: 20px !important; + top: 5px !important; + } +} + +.admonitionblock.caution { + border-left: 5px solid $caution-color; + td.content { + border: 1px solid $caution-color; + box-shadow: 0 1px 1px $caution-color; + border-radius: 5px !important; } td.icon { left: 20px !important; @@ -1127,15 +1148,19 @@ a.anchor { } .header-banner { min-height: 240px; - background: var(--header-banner-background); - box-shadow: 0 2px 2px #1B3E61; + background-color: var(--header-banner-base); + background-image: var(--header-banner-background); + background-size: 160% 160%; + background-position: 20% 10%; + animation: radiance-drift 24s ease-in-out infinite alternate; + border-bottom: none; padding: 30px 0 0 40px; .header-banner-text { display: flex; flex-direction: column; - color: #fff; + color: var(--primary-color); width: 60%; h1 { font-size: $font-size-large; @@ -1151,11 +1176,29 @@ a.anchor { } } +@keyframes radiance-drift { + 0% { background-position: 10% 0%; } + 50% { background-position: 65% 40%; } + 100% { background-position: 20% 60%; } +} + +@media (prefers-reduced-motion: reduce) { + .header-banner { + animation: none; + } +} + // In-product presentation only: override banner color to match product sidebar (#232F43). // Standalone light/dark banner gradient is preserved via var(--header-banner-background) above. .embedded-mode .header-banner { background: #232F43; + animation: none; + border-bottom: none; box-shadow: none; + + .header-banner-text { + color: #fff; + } } // Fluid home page cards for both standalone and embedded presentations. diff --git a/src/assets/styles/radiant-colors.css b/src/assets/styles/radiant-colors.css new file mode 100644 index 000000000..89a38c7bc --- /dev/null +++ b/src/assets/styles/radiant-colors.css @@ -0,0 +1,237 @@ +/* + * Radiant colour tokens — ThoughtSpot + * Same values the product ships. Generated from @thoughtspot/radiant-styles. + * + * Light is the default (:root). Dark applies when data-theme="dark" is set on + * a container — same contract the docs site already uses. + * + * --rd-sys-color-* system tokens (surfaces, text, borders) + * --rd-comp-color-* component tokens (buttons, chips, toggles) + */ + + +/* Light theme (default) */ +:root { + --rd-sys-color-background-base: #ffffff; + --rd-sys-color-background-sunken: #f6f8fa; + --rd-sys-color-background-raised: #ffffff; + --rd-sys-color-background-active: #ffffff; + --rd-sys-color-background-secondary-action: #eaedf2; + --rd-sys-color-background-on-base: #f6f8fa; + --rd-sys-color-background-brand: #2770ef; + --rd-sys-color-background-overlay: rgba(31, 38, 50, 0.8); + --rd-sys-color-background-inverse: #1d232f; + --rd-sys-color-background-success: #e0f8ef; + --rd-sys-color-background-warning: #fff8e5; + --rd-sys-color-background-failure: #ffebec; + --rd-sys-color-background-information: #dee8fa; + --rd-sys-color-background-ghost-hover: rgba(192, 198, 207, 0.12); + --rd-sys-color-background-secondary-hover: #dbdfe7; + --rd-sys-color-background-ghost-highlight: rgba(113, 161, 244, 0.12); + --rd-sys-color-background-accent-green: #e0f8ef; + --rd-sys-color-background-accent-yellow: #fff8e5; + --rd-sys-color-background-accent-red: #ffebec; + --rd-sys-color-background-accent-blue: #dee8fa; + --rd-sys-color-background-accent-gray: #f6f8fa; + --rd-sys-color-background-accent-purple-subtle: #f0ebff; + --rd-sys-color-background-accent-purple-bold: #8c62f5; + --rd-sys-color-content-primary: #1d232f; + --rd-sys-color-content-secondary: #777e8b; + --rd-sys-color-content-tertiary: #c0c6cf; + --rd-sys-color-content-brand: #2770ef; + --rd-sys-color-content-inverse: #ffffff; + --rd-sys-color-content-success: #06bf7f; + --rd-sys-color-content-warning: #fcc838; + --rd-sys-color-content-failure: #e22b3d; + --rd-sys-color-content-information: #2770ef; + --rd-sys-color-content-accent-green: #06bf7f; + --rd-sys-color-content-accent-yellow: #fcc838; + --rd-sys-color-content-accent-red: #e22b3d; + --rd-sys-color-content-accent-gray: #777e8b; + --rd-sys-color-content-accent-blue: #2770ef; + --rd-sys-color-content-accent-purple: #8c62f5; + --rd-sys-color-border-bold: #c0c6cf; + --rd-sys-color-border-bold-hover: #a5acb9; + --rd-sys-color-border-subtle: #eaedf2; + --rd-sys-color-border-subtle-hover: #dbdfe7; + --rd-sys-color-border-brand: #2770ef; + --rd-sys-color-border-warning: #fcc838; + --rd-sys-color-border-failure: #e22b3d; + --rd-sys-color-border-focus: #71a1f4; + --rd-sys-color-border-gap: #ffffff; + --rd-sys-color-border-accent-green: #06bf7f; + --rd-sys-color-border-accent-yellow: #fcc838; + --rd-sys-color-border-accent-red: #e22b3d; + --rd-sys-color-border-accent-gray: #777e8b; + --rd-sys-color-border-accent-blue: #2770ef; + --rd-sys-color-border-accent-purple: #8c62f5; +} + +/* Dark theme */ +[data-theme="dark"] { + --rd-sys-color-background-sunken: #0a0a0b; + --rd-sys-color-background-base: #131416; + --rd-sys-color-background-raised: #26282c; + --rd-sys-color-background-active: #60656c; + --rd-sys-color-background-secondary-action: #2f3237; + --rd-sys-color-background-on-base: #1a1b1e; + --rd-sys-color-background-brand: #71a1f4; + --rd-sys-color-background-overlay: rgba(0, 3, 10, 0.73); + --rd-sys-color-background-inverse: #dfe0e2; + --rd-sys-color-background-success: #003b26; + --rd-sys-color-background-warning: #4f3d09; + --rd-sys-color-background-failure: #3d090e; + --rd-sys-color-background-information: #71a1f4; + --rd-sys-color-background-ghost-hover: rgba(192, 198, 207, 0.12); + --rd-sys-color-background-secondary-hover: #45494e; + --rd-sys-color-background-ghost-highlight: rgba(113, 161, 244, 0.12); + --rd-sys-color-background-accent-green: #003b26; + --rd-sys-color-background-accent-yellow: #4f3d09; + --rd-sys-color-background-accent-red: #3d090e; + --rd-sys-color-background-accent-blue: #082559; + --rd-sys-color-background-accent-gray: #26282c; + --rd-sys-color-background-accent-purple-subtle: #422e75; + --rd-sys-color-background-accent-purple-bold: #b094f8; + --rd-sys-color-content-primary: #dfe0e2; + --rd-sys-color-content-secondary: #979ba0; + --rd-sys-color-content-tertiary: #60656c; + --rd-sys-color-content-brand: #71a1f4; + --rd-sys-color-content-inverse: #131416; + --rd-sys-color-content-success: #56d3a8; + --rd-sys-color-content-warning: #fcd977; + --rd-sys-color-content-failure: #f47e89; + --rd-sys-color-content-information: #71a1f4; + --rd-sys-color-content-accent-green: #56d3a8; + --rd-sys-color-content-accent-yellow: #fcd977; + --rd-sys-color-content-accent-red: #f47e89; + --rd-sys-color-content-accent-gray: #60656c; + --rd-sys-color-content-accent-blue: #71a1f4; + --rd-sys-color-content-accent-purple: #b094f8; + --rd-sys-color-border-bold: #60656c; + --rd-sys-color-border-bold-hover: #808389; + --rd-sys-color-border-subtle: #2f3237; + --rd-sys-color-border-subtle-hover: #45494e; + --rd-sys-color-border-brand: #71a1f4; + --rd-sys-color-border-warning: #fcd977; + --rd-sys-color-border-failure: #f47e89; + --rd-sys-color-border-focus: #2770ef; + --rd-sys-color-border-gap: #131416; + --rd-sys-color-border-accent-green: #56d3a8; + --rd-sys-color-border-accent-yellow: #fcd977; + --rd-sys-color-border-accent-red: #f47e89; + --rd-sys-color-border-accent-gray: #60656c; + --rd-sys-color-border-accent-blue: #71a1f4; + --rd-sys-color-border-accent-purple: #b094f8; +} + +/* ---------- component tokens ---------- */ + +/* Light theme (default) */ +:root { + --rd-comp-color-button-bg-overlay: rgba(32, 41, 58, 0.6); + --rd-comp-color-button-primary-default: #2770ef; + --rd-comp-color-button-primary-hover: #2359b6; + --rd-comp-color-button-primary-pressed: #163772; + --rd-comp-color-button-primary-on-color-default: #ffffff; + --rd-comp-color-button-primary-on-color-hover: #dee8fa; + --rd-comp-color-button-primary-on-color-pressed: #cedcf5; + --rd-comp-color-button-secondary-default: #eaedf2; + --rd-comp-color-button-secondary-hover: #dbdfe7; + --rd-comp-color-button-secondary-pressed: #c0c6cf; + --rd-comp-color-button-tertiary-hover: rgba(192, 198, 207, 0.12); + --rd-comp-color-button-tertiary-pressed: rgba(113, 161, 244, 0.12); + --rd-comp-color-chip-loading-default: #f6f8fa; + --rd-comp-color-chip-attribute-default: #dee8fa; + --rd-comp-color-chip-attribute-hover: #cedcf5; + --rd-comp-color-chip-attribute-pressed: #abc7f9; + --rd-comp-color-chip-attribute-icon: #2770ef; + --rd-comp-color-chip-attribute-active-border: #cedcf5; + --rd-comp-color-chip-measure-default: #e0f8ef; + --rd-comp-color-chip-measure-hover: #c7f2e3; + --rd-comp-color-chip-measure-pressed: #9be5cb; + --rd-comp-color-chip-measure-icon: #06bf7f; + --rd-comp-color-chip-measure-active-border: #c7f2e3; + --rd-comp-color-chip-filter-default: #eaedf2; + --rd-comp-color-chip-filter-hover: #dbdfe7; + --rd-comp-color-chip-filter-pressed: #c0c6cf; + --rd-comp-color-chip-filter-icon: #777e8b; + --rd-comp-color-chip-filter-active-border: #dbdfe7; + --rd-comp-color-chip-date-default: #f0ebff; + --rd-comp-color-chip-date-hover: #e3d9fc; + --rd-comp-color-chip-date-pressed: #d1c0fb; + --rd-comp-color-chip-date-icon: #8c62f5; + --rd-comp-color-chip-date-active-border: #e3d9fc; + --rd-comp-color-chip-input-default: #ffffff; + --rd-comp-color-chip-input-hover: #f6f8fa; + --rd-comp-color-chip-input-pressed: #eaedf2; + --rd-comp-color-chip-input-selected-default: #4a515e; + --rd-comp-color-chip-input-selected-hover: #323946; + --rd-comp-color-chip-input-selected-pressed: #1d232f; + --rd-comp-color-chip-error-default: #ffebec; + --rd-comp-color-chip-error-hover: #fcd4d7; + --rd-comp-color-chip-error-active-border: #dbdfe7; + --rd-comp-color-progress-track-active: #f0ebff; + --rd-comp-color-progress-track-empty: #eaedf2; + --rd-comp-color-progress-indicator-default: #8c62f5; + --rd-comp-color-segmented-control-content-active: #2770ef; + --rd-comp-color-toggle-track-off: #c0c6cf; + --rd-comp-color-toggle-track-on: #cedcf5; + --rd-comp-color-toggle-thumb-off: #ffffff; + --rd-comp-color-toggle-thumb-on: #2770ef; + --rd-comp-color-toggle-thumb-outline-off: #dbdfe7; +} + +/* Dark theme */ +[data-theme="dark"] { + --rd-comp-color-button-bg-overlay: rgba(32, 41, 58, 0.6); + --rd-comp-color-button-primary-default: #71a1f4; + --rd-comp-color-button-primary-hover: #abc7f9; + --rd-comp-color-button-primary-pressed: #cedcf5; + --rd-comp-color-button-primary-on-color-default: #ffffff; + --rd-comp-color-button-primary-on-color-hover: #dee8fa; + --rd-comp-color-button-primary-on-color-pressed: #cedcf5; + --rd-comp-color-button-secondary-default: #26282c; + --rd-comp-color-button-secondary-hover: #2f3237; + --rd-comp-color-button-secondary-pressed: #60656c; + --rd-comp-color-button-tertiary-hover: rgba(192, 198, 207, 0.12); + --rd-comp-color-button-tertiary-pressed: rgba(113, 161, 244, 0.12); + --rd-comp-color-chip-loading-default: #1a1b1e; + --rd-comp-color-chip-attribute-default: #082559; + --rd-comp-color-chip-attribute-hover: #163772; + --rd-comp-color-chip-attribute-pressed: #2359b6; + --rd-comp-color-chip-attribute-icon: #71a1f4; + --rd-comp-color-chip-attribute-active-border: #163772; + --rd-comp-color-chip-measure-default: #003b26; + --rd-comp-color-chip-measure-hover: #025b3c; + --rd-comp-color-chip-measure-pressed: #049160; + --rd-comp-color-chip-measure-icon: #56d3a8; + --rd-comp-color-chip-measure-active-border: #025b3c; + --rd-comp-color-chip-filter-default: #26282c; + --rd-comp-color-chip-filter-hover: #2f3237; + --rd-comp-color-chip-filter-pressed: #45494e; + --rd-comp-color-chip-filter-icon: #808389; + --rd-comp-color-chip-filter-active-border: #2f3237; + --rd-comp-color-chip-date-default: #210f4f; + --rd-comp-color-chip-date-hover: #422e75; + --rd-comp-color-chip-date-pressed: #6847ba; + --rd-comp-color-chip-date-icon: #b094f8; + --rd-comp-color-chip-date-active-border: #422e75; + --rd-comp-color-chip-input-default: #0a0a0b; + --rd-comp-color-chip-input-hover: #1a1b1e; + --rd-comp-color-chip-input-pressed: #26282c; + --rd-comp-color-chip-input-selected-default: #afb2b6; + --rd-comp-color-chip-input-selected-hover: #c7c9cc; + --rd-comp-color-chip-input-selected-pressed: #dfe0e2; + --rd-comp-color-chip-error-default: #3d090e; + --rd-comp-color-chip-error-hover: #721f27; + --rd-comp-color-chip-error-active-border: #2f3237; + --rd-comp-color-progress-track-active: #210f4f; + --rd-comp-color-progress-track-empty: #1d232f; + --rd-comp-color-progress-indicator-default: #b094f8; + --rd-comp-color-segmented-control-content-active: #dfe0e2; + --rd-comp-color-toggle-track-off: #45494e; + --rd-comp-color-toggle-track-on: #163772; + --rd-comp-color-toggle-thumb-off: #afb2b6; + --rd-comp-color-toggle-thumb-on: #71a1f4; + --rd-comp-color-toggle-thumb-outline-off: #afb2b6; +} diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index cb6346fc1..aa66d7c63 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -175,8 +175,92 @@ $tag-color-yellow: #ffbc00; $tag-color-white: var(--body-background-color); $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. +// --------------------------------------------------------------------------- + +@mixin ts-docs-radiant-aliases { + /* --- surfaces --- */ + --body-background-color: var(--rd-sys-color-background-base); + --left-nav-color: var(--rd-sys-color-background-raised); + --panel-bg-color: var(--rd-sys-color-background-on-base); + --block-background: var(--rd-sys-color-background-on-base); + --admonition-background: var(--rd-sys-color-background-on-base); + --table-header-color: var(--rd-sys-color-background-on-base); + --code-text-bg: var(--rd-sys-color-background-sunken); + --code-block-light: var(--rd-sys-color-background-sunken); + --was-helpful-bg: var(--rd-sys-color-background-sunken); + --back-button-background: var(--rd-sys-color-background-secondary-action); + --copy-btn-bg: var(--rd-sys-color-background-secondary-action); + --copy-btn-hover: var(--rd-sys-color-background-secondary-hover); + --announcement-block-color: var(--rd-sys-color-background-secondary-action); + + /* --- text / icons --- */ + --primary-color: var(--rd-sys-color-content-primary); + --sidebar-title: var(--rd-sys-color-content-primary); + --side-nav-text: var(--rd-sys-color-content-primary); + --back-button-color: var(--rd-sys-color-content-primary); + --announcement-text-color: var(--rd-sys-color-content-primary); + --breadcrums-font-color: var(--rd-sys-color-content-secondary); + --icon-color: var(--rd-sys-color-content-secondary); + --var-docmap-nested-color: var(--rd-sys-color-content-secondary); + --header-primary-color: var(--rd-sys-color-content-inverse); + + /* --- links / active states --- */ + --link-text-color: var(--rd-sys-color-content-brand); + --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); + + /* --- borders --- */ + --border-color: var(--rd-sys-color-border-subtle); + --border-color-tr: var(--rd-sys-color-border-subtle); + --was-helpful-border: var(--rd-sys-color-border-subtle); + --docmap-border-color: var(--rd-sys-color-border-bold); + --search-border-color: var(--rd-sys-color-border-bold); + --sidebar-connector-color: var(--rd-sys-color-border-bold); + --important-border-color: var(--rd-sys-color-border-bold); + --border-color-home-search: var(--rd-sys-color-border-bold-hover); + --scrollbar-color: var(--rd-sys-color-border-bold-hover); + --docmap-scrollbar-color: var(--rd-sys-color-content-brand); + + /* --- admonitions / status --- */ + --note-block-color: var(--rd-sys-color-background-information); + --note-border-color: var(--rd-sys-color-border-brand); + --var-note-color: var(--rd-sys-color-content-information); + --var-important-color: var(--rd-sys-color-content-failure); + --important-block-color: var(--rd-sys-color-background-on-base); + + /* --- release-notes pills --- */ + --rel-notes-tag-bg-color: var(--rd-sys-color-background-information); + --rel-notes-tag-text: var(--rd-sys-color-content-information); + --rel-notes-pill-border: var(--rd-sys-color-border-brand); + + /* --- elevation --- + $box-shadow-search-box is already byte-identical to radiant's + shadow-menu token, so these are a straight swap. */ + --box-shadow: 0 0 4px rgba(25, 35, 49, 0.10), 0 2px 4px rgba(25, 35, 49, 0.04); + --box-shadow-hover: 0 0 4px rgba(25, 35, 49, 0.08), 0 12px 24px rgba(25, 35, 49, 0.12); +} + +// Dark-mode elevation is NOT the same shadow at higher opacity â radiant uses a +// separate ramp, so this one group does need a per-theme override. +@mixin ts-docs-radiant-elevation-dark { + --box-shadow: 0 0 4px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.20); + --box-shadow-hover: 0 0 6px rgba(0, 0, 0, 0.16), 0 14px 28px rgba(0, 0, 0, 0.32); +} + :root { - /* Brand tokens */ + @include ts-docs-radiant-aliases; + + /* ---- NOT remapped: marketing/brand chrome. These are deliberate brand + colours, not product-surface colours â radiant has no token for them and + shouldn't. Left exactly as-is. ---- */ --ts-black: #000000; --ts-grey: #f1f4f8; --ts-blue: #0568fa; @@ -186,48 +270,32 @@ $tag-color-light: $lightgrey; --ts-purple: #dcadff; --ts-yellow: #fcde18; - --body-background-color: #fff; - --primary-color: #1d232f; - --header-primary-color: #fff; --header-color: #08062B; --header-border-color: #08072C; --header-link-color: rgba(255, 255, 255, 0.85); --nav-bar-color: #08062B; - --left-nav-color: #fff; - --header-banner-background: linear-gradient(180deg, #08062B, #122246, #122246); - --panel-bg-color: #f1f4f8; --secondary-header-bg: #08062B; --secondary-header-border: #323946; --secondary-header-text: #f1f4f8; --secondary-header-active: #0568fa; - --rel-notes-tag-bg-color: #dce5f9; - --rel-notes-tag-text: #0568fa; - --rel-notes-pill-border: #aac2f8; - --breadcrums-font-color: #5f6368; - --docmap-border-color: #d9d9d9; - --border-color-home-search: #a5acb9; - --announcement-block-color: #e1e1e1; - --announcement-text-color: #1d232f; - --admonition-background: #f1f4f8; + --nav-accent-color: #A9E8FF; + --header-background-color: #012676; + --header-banner-background: + radial-gradient(46% 34% at 6% -8%, rgba(45, 220, 177, 0.26), transparent), + radial-gradient(44% 32% at 28% 0%, rgba(255, 93, 142, 0.24), transparent), + radial-gradient(40% 30% at 48% 4%, rgba(138, 93, 255, 0.16), transparent), + radial-gradient(46% 34% at 98% -4%, rgba(39, 140, 255, 0.32), transparent), + radial-gradient(60% 42% at 50% -10%, rgba(244, 126, 137, 0.14), transparent), + linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.85) 55%, #fff 85%); + --header-banner-base: #fff; + --left-nav-color: #f6f8fa; + + /* ---- NOT remapped: code-syntax palette. Syntax highlighting is its own + design problem (contrast pairs tuned per-language); forcing it onto + product tokens degrades readability. Light/dark syntax sets kept as-is. ---- */ --code-block-color: #0d1117; - --code-block-light: #f6f8fa; --code-text-color: #e6edf3; - --code-text-bg: #f6f8fa; - --side-nav-text: #374151; - --sidebar-title: #393939; - --side-nav-active-bg: rgba(5, 104, 250, 0.08); - --side-nav-active-text: #0568fa; --text-color-code-lang: #fff; - --icon-color: #6b7280; - --back-button-color: #1d232f; - --back-button-background: #eaedf2; - --block-background: #f1f4f8; - --search-border-color: #cccdcd; - --border-color: #eaedf2; - --table-header-color: #fff; - --border-color-tr: #e5e7eb; - --scrollbar-color: #a5acb9; - --docmap-scrollbar-color: #0568fa; --color-jet-70: #d14; --highlight-purple: #9334e6; --highlight-green: #188038; @@ -235,75 +303,47 @@ $tag-color-light: $lightgrey; --highlight-lightblue: #0086b3; --highlight-darkblue: #000080; --highlight-blue: #458; - --highlight-orange: ; --highlight-yellow: #e1b514; + --highlight-orange: ; /* NOTE: empty value in original file â likely a bug */ --highlight-darkred: #900; --highlight-lilac: #d7aefb; --highlight-violet: #990073; - --secondary-color: #393939; - --link-text-color: #0568fa; - --header-background-color: #012676; - --var-note-color: #0568fa; - --note-block-color: #eef7ff; - --note-border-color: #7492d5; - --var-important-color: #e22b3d; - --important-border-color: #cccdcd; - --important-block-color: #f1f4f8; - --var-docmap-nested-color: #6b7280; - --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); - --box-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --sidebar-connector-color: #d1d5db; - --copy-btn-bg: #f3f4f6; - --copy-btn-hover: #e5e7eb; - --was-helpful-bg: #f9fafb; - --was-helpful-border: #e5e7eb; } #wrapper[data-theme='dark'], #docsModal[data-theme='dark'] { + // Same aliases, re-declared so they resolve against the DARK tokens. + @include ts-docs-radiant-aliases; + @include ts-docs-radiant-elevation-dark; - --body-background-color: #161b22; - --header-color: #0d1117; - --header-border-color: #cccdcd; - --header-link-color: rgba(255, 255, 255, 0.85); - --nav-bar-color: #0d1117; - --left-nav-color: #161b22; - --panel-bg-color: #0d1117; - --secondary-header-bg: #0d1117; - --secondary-header-border: #393939; + /* brand chrome â dark variants previously hardcoded here */ + --header-color: #26282c; + --header-border-color: #34363C; + --nav-bar-color: #26282C; + --secondary-header-bg: #26282C; + --secondary-header-border: #34363C; --secondary-header-text: #c9d1d9; --secondary-header-active: #0086b3; - --primary-color: #cccdcd; - --header-primary-color: #cccdcd; - --header-banner-background: linear-gradient(180deg, #0d1117, #1B3E61); - --breadcrums-font-color: #8b949e; - --docmap-border-color: #30363d; - --rel-notes-tag-bg-color: #232F43; - --rel-notes-tag-text: #fff; - --rel-notes-pill-border: #74daff; - --announcement-block-color: #3c4356; - --announcement-text-color: #e6edf3; - --admonition-background: #161b22; - --code-block-color:#1e2430; - --code-block-light: #21262d; - --code-text-bg: #21262d; + --nav-accent-color: #71a1f4; + --header-banner-background: + radial-gradient(58% 36% at 22% -4%, rgba(45, 220, 177, 0.027), transparent), + radial-gradient(66% 38% at 38% -2%, rgba(255, 93, 142, 0.06), transparent), + radial-gradient(72% 42% at 62% 2%, rgba(138, 93, 255, 0.067), transparent), + radial-gradient(70% 44% at 84% 4%, rgba(39, 140, 255, 0.08), transparent), + radial-gradient(68% 46% at 50% -6%, rgba(244, 126, 137, 0.13), transparent), + linear-gradient(to bottom, rgba(31, 32, 36, 0.08) 0%, rgba(31, 32, 36, 0.24) 38%, rgba(31, 32, 36, 0.62) 70%, #1F2024 100%); + --header-banner-base: #1F2024; + --header-background-color: #26282C; + + /* main content surface reads darker/blacker than the raised header/left-nav in the product */ + --body-background-color: #1F2024; + + --table-header-color: #26282C; + + /* code-syntax dark set â unchanged */ + --code-block-color: #1e2430; --code-text-color: #e6edf3; - --sidebar-title: #5f6368; - --side-nav-text: #c9d1d9; - --side-nav-active-bg: rgba(116, 218, 255, 0.12); - --side-nav-active-text: #74daff; --text-color-code-lang: #8b949e; - --icon-color: #8b949e; - --back-button-color: #e6edf3; - --table-header-color: #21262d; - --back-button-background: #21262d; - --block-background: #161b22; - --border-color: #30363d; - --search-border-color: #30363d; - --border-color-home-search: #a5acb9; - --border-color-tr: #21262d; - --scrollbar-color: #30363d; --color-jet-70: #ffa657; --highlight-purple: #d2a8ff; --highlight-green: #3fb950; @@ -314,25 +354,6 @@ $tag-color-light: $lightgrey; --highlight-darkred: #ffa198; --highlight-lilac: #b083f0; --highlight-violet: #f8bbd0; - --secondary-color: #74daff; - --link-text-color: #74daff; - --header-background-color: #012676; - --var-note-color: #74daff; - --note-block-color: #1e2430; - --note-border-color: #74daff; - --var-important-color: #e22b3d; - --important-border-color: #30363d; - --important-block-color: #1e2430; - --var-docmap-nested-color: #8b949e; - --sidebar-connector-color: #30363d; - --copy-btn-bg: #21262d; - --copy-btn-hover: #30363d; - --was-helpful-bg: #161b22; - --was-helpful-border: #30363d; - - --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); - --box-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.4), - 0 2px 4px -1px rgba(0, 0, 0, 0.3); .header-banner { box-shadow: none; diff --git a/src/components/Dropdown/index.scss b/src/components/Dropdown/index.scss index 7add63496..22c244b20 100644 --- a/src/components/Dropdown/index.scss +++ b/src/components/Dropdown/index.scss @@ -28,7 +28,7 @@ &:hover { background: rgba(255, 255, 255, 0.1); - color: #A9E8FF; + color: var(--nav-accent-color); } } @@ -107,13 +107,13 @@ &:hover { background: rgba(169, 232, 255, 0.08); - color: #A9E8FF; + color: var(--nav-accent-color); .version-item-sub { color: rgba(169, 232, 255, 0.5); } } &.active { - .version-item-label { color: #A9E8FF; } + .version-item-label { color: var(--nav-accent-color); } } } diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss index c8d800792..db8e8df9a 100644 --- a/src/components/Header/index.scss +++ b/src/components/Header/index.scss @@ -73,7 +73,7 @@ header { &:hover { background: rgba(255, 255, 255, 0.1); - color: #A9E8FF; + color: var(--nav-accent-color); } } @@ -187,10 +187,10 @@ header { &:hover { background: rgba(169, 232, 255, 0.08); - color: #A9E8FF; + color: var(--nav-accent-color); - .dropdown-item-name { color: #A9E8FF; } - .dropdown-item-icon { color: #A9E8FF; } + .dropdown-item-name { color: var(--nav-accent-color); } + .dropdown-item-icon { color: var(--nav-accent-color); } .external-link-icon { color: rgba(169, 232, 255, 0.5); } } diff --git a/src/components/LeftSidebar/index.scss b/src/components/LeftSidebar/index.scss index 769db1547..06cc0a7fd 100644 --- a/src/components/LeftSidebar/index.scss +++ b/src/components/LeftSidebar/index.scss @@ -84,12 +84,17 @@ } &:focus { - border-color: var(--secondary-color); - box-shadow: 0 0 0 2px rgba(5, 104, 250, 0.12); + outline: none; } } } +#wrapper[data-theme='dark'] .searchInputLeftNav input, +#docsModal[data-theme='dark'] .searchInputLeftNav input { + border-color: #34363C; + background: #26282C; +} + .leftNav-askdocs-wrapper { margin-top: 12px; padding-right: 16px; @@ -383,7 +388,7 @@ // Selected nav link normally uses --var-note-color (shared with NOTE: admonition // styling elsewhere) — override just here so mobile nav selection doesn't touch that. .aside .active { - color: #a9e8ff !important; + color: var(--nav-accent-color) !important; } .menuContainer { diff --git a/src/components/SecondaryHeader/index.scss b/src/components/SecondaryHeader/index.scss index 8adedf60b..021e1e22c 100644 --- a/src/components/SecondaryHeader/index.scss +++ b/src/components/SecondaryHeader/index.scss @@ -3,7 +3,7 @@ .secondary-header { background: var(--secondary-header-bg); border-bottom: 0.5px solid var(--secondary-header-border); - box-shadow: 0 1px 1px #1B3E61; + box-shadow: 0 1px 1px #34363C; border-top: 0.5px solid var(--secondary-header-border); position: sticky; top: $header-height; @@ -48,19 +48,35 @@ white-space: nowrap; font-family: 'Optimo-Plain'; transition: color 0.15s ease; - border-radius: 8px; - border-bottom: 1px solid transparent; - margin-bottom: -1px; + border-radius: 0; + margin-right: 8px; letter-spacing: 0.01em; + &::after { + content: ''; + position: absolute; + left: $padding-sm; + right: 20px; + bottom: 0; + height: 2px; + background: transparent; + } + &:hover { - color: #A9E8FF; - background-color: #122246; + color: var(--nav-accent-color); + + &::after { + background: var(--nav-accent-color); + } } &.active { - color: #A9E8FF !important; + color: var(--nav-accent-color) !important; font-weight: 400; + + &::after { + background: var(--nav-accent-color); + } } } @@ -93,7 +109,7 @@ &:hover { background: rgba(255, 255, 255, 0.1); - color: #A9E8FF; + color: var(--nav-accent-color); } } @@ -128,7 +144,7 @@ &:hover { background: rgba(169, 232, 255, 0.08); - color: #A9E8FF; + color: var(--nav-accent-color); } } @@ -164,7 +180,7 @@ flex-shrink: 0; &:hover { - color: #A9E8FF; + color: var(--nav-accent-color); background: rgba(169, 232, 255, 0.06); } } @@ -196,7 +212,7 @@ white-space: nowrap; &:hover { - color: #A9E8FF; + color: var(--nav-accent-color); background: rgba(169, 232, 255, 0.06); } } @@ -247,13 +263,13 @@ &:hover { background: rgba(169, 232, 255, 0.08); - color: #A9E8FF; + color: var(--nav-accent-color); } &.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: #A9E8FF !important; + color: var(--nav-accent-color) !important; background: rgba(169, 232, 255, 0.08); } } diff --git a/src/components/SecondaryHeader/index.tsx b/src/components/SecondaryHeader/index.tsx index e649b3946..d21f55a97 100644 --- a/src/components/SecondaryHeader/index.tsx +++ b/src/components/SecondaryHeader/index.tsx @@ -263,7 +263,6 @@ const SecondaryHeader = (props: {
-
); From d2be0b7fd3deea00338878d786e3fd9f10dea025 Mon Sep 17 00:00:00 2001 From: ShashiSubramanya Date: Fri, 21 Aug 2026 09:59:10 +0530 Subject: [PATCH 2/9] css fixes for home page hero section --- src/assets/styles/variables.scss | 8 ++++---- src/components/SecondaryHeader/index.scss | 6 ++++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index aa66d7c63..49dd1b9b5 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -284,7 +284,7 @@ $tag-color-light: $lightgrey; radial-gradient(46% 34% at 6% -8%, rgba(45, 220, 177, 0.26), transparent), radial-gradient(44% 32% at 28% 0%, rgba(255, 93, 142, 0.24), transparent), radial-gradient(40% 30% at 48% 4%, rgba(138, 93, 255, 0.16), transparent), - radial-gradient(46% 34% at 98% -4%, rgba(39, 140, 255, 0.32), transparent), + radial-gradient(58% 44% at 92% 0%, rgba(39, 140, 255, 0.4), transparent), radial-gradient(60% 42% at 50% -10%, rgba(244, 126, 137, 0.14), transparent), linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.85) 55%, #fff 85%); --header-banner-base: #fff; @@ -327,9 +327,9 @@ $tag-color-light: $lightgrey; --nav-accent-color: #71a1f4; --header-banner-background: radial-gradient(58% 36% at 22% -4%, rgba(45, 220, 177, 0.027), transparent), - radial-gradient(66% 38% at 38% -2%, rgba(255, 93, 142, 0.06), transparent), - radial-gradient(72% 42% at 62% 2%, rgba(138, 93, 255, 0.067), transparent), - radial-gradient(70% 44% at 84% 4%, rgba(39, 140, 255, 0.08), transparent), + radial-gradient(48% 34% at 10% 0%, rgba(255, 93, 142, 0.09), transparent), + radial-gradient(48% 36% at 14% -4%, rgba(138, 93, 255, 0.22), transparent), + radial-gradient(70% 44% at 84% 4%, rgba(39, 140, 255, 0.2), transparent), radial-gradient(68% 46% at 50% -6%, rgba(244, 126, 137, 0.13), transparent), linear-gradient(to bottom, rgba(31, 32, 36, 0.08) 0%, rgba(31, 32, 36, 0.24) 38%, rgba(31, 32, 36, 0.62) 70%, #1F2024 100%); --header-banner-base: #1F2024; diff --git a/src/components/SecondaryHeader/index.scss b/src/components/SecondaryHeader/index.scss index 021e1e22c..569e1e3b7 100644 --- a/src/components/SecondaryHeader/index.scss +++ b/src/components/SecondaryHeader/index.scss @@ -3,7 +3,7 @@ .secondary-header { background: var(--secondary-header-bg); border-bottom: 0.5px solid var(--secondary-header-border); - box-shadow: 0 1px 1px #34363C; + box-shadow: 0 1px 0 #34363C; border-top: 0.5px solid var(--secondary-header-border); position: sticky; top: $header-height; @@ -21,7 +21,8 @@ &__tabs { display: flex; - align-items: center; + align-items: stretch; + height: 100%; gap: 0; list-style: none; margin: 0; @@ -38,6 +39,7 @@ position: relative; display: inline-flex; align-items: center; + height: 100%; padding: 12px 20px 12px $padding-sm; font-size: 14px; font-weight: 300; From 45cadd971c0b619f15b18f0f34e4d59f4e9fea7b Mon Sep 17 00:00:00 2001 From: ShashiSubramanya Date: Fri, 21 Aug 2026 15:21:05 +0530 Subject: [PATCH 3/9] css updates for buttons, copy page drop-down --- src/assets/styles/index.scss | 1 + src/assets/styles/variables.scss | 11 ++--- src/components/CopyPageDropdown/index.scss | 18 ++++++-- src/components/Document/index.scss | 48 +++++++++++++++++----- src/components/SecondaryHeader/index.scss | 2 +- 5 files changed, 60 insertions(+), 20 deletions(-) diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 90aad1ac4..e0da410bd 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1269,6 +1269,7 @@ a.anchor { width: 100%; border-spacing: 0; border-collapse: collapse; + border: none; /* reset borders applied by the generic table rule */ diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 49dd1b9b5..3ebcdbe5e 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -147,7 +147,7 @@ $rem-base: 18; $body-font-size-desktop: 1.125em; /* 18px */ $body-font-size-print: 0.9375em; /* 15px */ $body-line-height: 1.15; -$body-font-family: 'Roboto', sans-serif; +$body-font-family: Optimo-Plain, Roboto, sans-serif; $body-font-weight-bold: 500; $monospace-font-family: 'Roboto Mono', monospace; $monospace-font-weight-bold: 500; @@ -187,11 +187,12 @@ $tag-color-light: $lightgrey; @mixin ts-docs-radiant-aliases { /* --- surfaces --- */ --body-background-color: var(--rd-sys-color-background-base); + --table-header-bg: #f6f8fa; + --copy-page-menu-bg: #f6f8fa; --left-nav-color: var(--rd-sys-color-background-raised); --panel-bg-color: var(--rd-sys-color-background-on-base); --block-background: var(--rd-sys-color-background-on-base); --admonition-background: var(--rd-sys-color-background-on-base); - --table-header-color: var(--rd-sys-color-background-on-base); --code-text-bg: var(--rd-sys-color-background-sunken); --code-block-light: var(--rd-sys-color-background-sunken); --was-helpful-bg: var(--rd-sys-color-background-sunken); @@ -337,11 +338,11 @@ $tag-color-light: $lightgrey; /* main content surface reads darker/blacker than the raised header/left-nav in the product */ --body-background-color: #1F2024; - - --table-header-color: #26282C; + --table-header-bg: #26282C; + --copy-page-menu-bg: #26282C; /* code-syntax dark set â unchanged */ - --code-block-color: #1e2430; + --code-block-color: #26282C; --code-text-color: #e6edf3; --text-color-code-lang: #8b949e; --color-jet-70: #ffa657; diff --git a/src/components/CopyPageDropdown/index.scss b/src/components/CopyPageDropdown/index.scss index cda100ace..498bbe207 100644 --- a/src/components/CopyPageDropdown/index.scss +++ b/src/components/CopyPageDropdown/index.scss @@ -54,20 +54,32 @@ } } + #wrapper[data-theme='dark'] &__trigger, + #docsModal[data-theme='dark'] &__trigger { + background: #26282C; + border-color: #26282C; + } + &__menu { position: absolute; top: calc(100% + 6px); right: 0; - background: var(--body-background-color); + background: var(--copy-page-menu-bg); border: 1px solid var(--border-color, #d1d5db); border-radius: 8px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - min-width: 240px; + box-shadow: var(--box-shadow-hover); + min-width: 16rem; padding: 6px; z-index: 50; animation: cpDropFadeIn 0.12s ease; } + #wrapper[data-theme='light'] &__menu, + #docsModal[data-theme='light'] &__menu { + border-color: #cccdcd; + box-shadow: none; + } + &__item { display: flex; align-items: flex-start; diff --git a/src/components/Document/index.scss b/src/components/Document/index.scss index 47c9a64c9..5261b7f3b 100644 --- a/src/components/Document/index.scss +++ b/src/components/Document/index.scss @@ -203,9 +203,9 @@ display: inline-flex; align-items: center; padding: 4px 10px; - font-size: 12px; + font-size: 13px; font-weight: 500; - color: #2770ef; + color: var(--nav-accent-color); background: transparent; border: none; border-radius: 5px; @@ -227,7 +227,7 @@ font-weight: 500; color: #fff; background: transparent; - border: 1px solid rgba(255, 255, 255, 0.15); + border: none; border-radius: 5px; cursor: pointer; white-space: nowrap; @@ -235,7 +235,7 @@ transition: background 0.15s ease, color 0.15s ease; &:hover { background: rgba(255, 255, 255, 0.1); } - &.copied { color: #0d9f6e; border-color: #0d9f6e; } + &.copied { color: #0d9f6e; } } } @@ -285,7 +285,6 @@ .lang { color: #fff; } .copyButton { - border-color: rgba(255, 255, 255, 0.15); color: #fff; &:hover { background: rgba(255, 255, 255, 0.1); color: #cdd9e5; } } @@ -297,18 +296,41 @@ } } + /* Dark mode: header matches the pre body color, subtle grey borders throughout */ + #wrapper[data-theme='dark'] & { + .code-block-wrapper { + border-color: #34363C; + + .code-block-header { + background: #26282C; + border-bottom: 1px solid #34363C; + } + } + pre { + border-color: #34363C; + } + } + #preview-in-playground { - background: var(--secondary-color); + background: var(--rd-comp-color-button-primary-default); color: $white; font-size: $font-size-normal; font-weight: $font-weight-normal; border: 0; padding: $preview-padding; - border: 0; border-radius: $preview-border-radius; margin-bottom: $preview-margin-bottom; display: inline-block; height: $preview-height; + transition: background 0.15s ease; + + &:hover { + background: var(--rd-comp-color-button-primary-hover); + } + + &:active { + background: var(--rd-comp-color-button-primary-pressed); + } } .paragraph #preview-in-playground { padding: 4px 16px !important; @@ -317,29 +339,33 @@ table { border-spacing: 0; border-collapse: separate; + border-top: 1px solid var(--border-color); + border-left: none; + border-right: none; + border-bottom: none; width: 100%; overflow: auto; th { border-bottom: 1px solid var(--border-color); - font-size: 13.5px; + font-size: 13px; text-align: left; padding: 20px $padding-sm 20px $padding-sm; - background-color: var(--table-header-color); + background-color: var(--table-header-bg); position: sticky; top: 0; z-index: 2; } td { - font-size: 13.5px; + font-size: 13px; border-bottom: 1px solid var(--border-color-tr); padding: 5px $padding-md $padding-sm $padding-sm; font-weight: $font-weight-normal; vertical-align: top; p { - font-size: 13.5px; + font-size: 13px; margin: 3px 0; } } diff --git a/src/components/SecondaryHeader/index.scss b/src/components/SecondaryHeader/index.scss index 569e1e3b7..91dd62a77 100644 --- a/src/components/SecondaryHeader/index.scss +++ b/src/components/SecondaryHeader/index.scss @@ -3,7 +3,7 @@ .secondary-header { background: var(--secondary-header-bg); border-bottom: 0.5px solid var(--secondary-header-border); - box-shadow: 0 1px 0 #34363C; + box-shadow: 0 0 1px 0 var(--secondary-header-border); border-top: 0.5px solid var(--secondary-header-border); position: sticky; top: $header-height; From a649357b8624a5be4edb466dc4d5e135799be4b4 Mon Sep 17 00:00:00 2001 From: ShashiSubramanya Date: Fri, 21 Aug 2026 16:40:13 +0530 Subject: [PATCH 4/9] try it out button and table fixes --- modules/ROOT/pages/rest-api-v2-reference.adoc | 52 +++++++++---------- src/components/Document/index.scss | 7 +++ 2 files changed, 33 insertions(+), 26 deletions(-) diff --git a/modules/ROOT/pages/rest-api-v2-reference.adoc b/modules/ROOT/pages/rest-api-v2-reference.adoc index b55eed3cf..937b39372 100644 --- a/modules/ROOT/pages/rest-api-v2-reference.adoc +++ b/modules/ROOT/pages/rest-api-v2-reference.adoc @@ -16,7 +16,7 @@ Access to ThoughtSpot data is controlled based on xref:api-user-management.adoc# [div boxAuto] -- -[width="100%" cols="8,5,3"] +[width="100%" cols="6,6,3"] [options='header'] |===== |API endpoint| Release version | Playground link @@ -123,7 +123,7 @@ ThoughtSpot Software: __Not available__ a| +++ Date: Fri, 21 Aug 2026 16:41:32 +0530 Subject: [PATCH 5/9] href edits --- modules/ROOT/pages/developer-playground.adoc | 4 ++-- modules/ROOT/pages/spotter-agent-instructions.adoc | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/ROOT/pages/developer-playground.adoc b/modules/ROOT/pages/developer-playground.adoc index 7d80036f4..a4525ba0c 100644 --- a/modules/ROOT/pages/developer-playground.adoc +++ b/modules/ROOT/pages/developer-playground.adoc @@ -136,7 +136,7 @@ To explore the features available for embedding Natural Language Search: . Go to *Playground* > *Natural Language Search*. . Select a data source. -. +++Try out+++ the following customization settings and click *Run* to preview the result. +. +++Try out+++ the following customization settings and click *Run* to preview the result. [width="100%"] |==== @@ -194,7 +194,7 @@ To explore the Spotter embedding features: . Go to *Playground* > *Spotter*. . Select a data source. -. +++Try out+++ the following customization settings and click *Run* to preview the result. +. +++Try out+++ the following customization settings and click *Run* to preview the result. [width="100%"] |==== diff --git a/modules/ROOT/pages/spotter-agent-instructions.adoc b/modules/ROOT/pages/spotter-agent-instructions.adoc index 4a6f9008d..530177958 100644 --- a/modules/ROOT/pages/spotter-agent-instructions.adoc +++ b/modules/ROOT/pages/spotter-agent-instructions.adoc @@ -14,11 +14,11 @@ Unlike xref:spotter-nl-instructions.adoc[data model instructions], which operate [width="100%", cols="1"] |===== -a|`PUT /api/rest/2.0/ai/agent/instructions/set` [.version-badge.new]#New# + +a|`PUT /api/rest/2.0/ai/agent/instructions/set` + xref:spotter-agent-instructions.adoc#_set_agent_instructions[Sets behavioral instructions] for the Spotter agent. + __Available on ThoughtSpot Cloud instances from 26.7.0.cl onwards.__ -a|`GET /api/rest/2.0/ai/agent/instructions/get` [.version-badge.new]#New# + +a|`GET /api/rest/2.0/ai/agent/instructions/get` + xref:spotter-agent-instructions.adoc#_get_agent_instructions[Retrieves the behavioral instructions] currently configured for the Spotter agent. + __Available on ThoughtSpot Cloud instances from 26.7.0.cl onwards.__ |===== @@ -128,5 +128,5 @@ If no instructions are configured, ThoughtSpot returns an empty value for the `i * For information about adding instructions at the data model level, see xref:spotter-nl-instructions.adoc[Data model instruction APIs]. * For information about Spotter agent conversation workflows, see xref:spotter-agent-apis.adoc[AI APIs (Spotter Agent and Spotter 3)]. -* Visit the +++REST API v2.0 Playground+++ to test the set agent instructions endpoint. -* Visit the +++REST API v2.0 Playground+++ to test the get agent instructions endpoint. +* Visit the +++REST API v2.0 Playground+++ to test the set agent instructions endpoint. +* Visit the +++REST API v2.0 Playground+++ to test the get agent instructions endpoint. From d59415c8f5627ebed003f1880ae5ac08fe94ab97 Mon Sep 17 00:00:00 2001 From: ShashiSubramanya Date: Fri, 21 Aug 2026 17:17:47 +0530 Subject: [PATCH 6/9] code block scroll issue fix --- src/components/Document/helper.tsx | 26 +++++++++++++++++++ src/components/Document/index.scss | 41 ++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) diff --git a/src/components/Document/helper.tsx b/src/components/Document/helper.tsx index 100bcd703..5afa31b3c 100644 --- a/src/components/Document/helper.tsx +++ b/src/components/Document/helper.tsx @@ -150,6 +150,32 @@ export const customizeDocContent = () => { document.querySelectorAll('pre code').forEach((block) => { hljs.highlightBlock(block as HTMLElement); }); + + /* + * Expand/collapse for code blocks taller than the collapsed max-height. + * Avoids trapping mouse-wheel scroll inside a nested scrollbar: collapsed + * blocks clip + fade instead of scrolling internally; "Show more" reveals + * the full block (no scroll) so page scroll takes over normally. + */ + document.querySelectorAll('.code-block-wrapper').forEach((wrapper) => { + if (wrapper.querySelector('.code-expand-btn')) return; + + const pre = wrapper.querySelector('pre'); + if (!pre) return; + + if (pre.scrollHeight <= pre.clientHeight + 2) return; + + wrapper.classList.add('has-overflow'); + + const expandBtn = document.createElement('button'); + expandBtn.classList.add('code-expand-btn'); + expandBtn.textContent = 'Show more'; + expandBtn.addEventListener('click', () => { + const isExpanded = wrapper.classList.toggle('expanded'); + expandBtn.textContent = isExpanded ? 'Show less' : 'Show more'; + }); + wrapper.appendChild(expandBtn); + }); }; const isInViewport = (el: HTMLElement) => { diff --git a/src/components/Document/index.scss b/src/components/Document/index.scss index 9f1d31539..18a707247 100644 --- a/src/components/Document/index.scss +++ b/src/components/Document/index.scss @@ -169,10 +169,51 @@ /* ── Code block wrapper — holds header bar + pre ─────────────────── */ .code-block-wrapper { + position: relative; margin: 16px 0; border-radius: 8px; border: 1px solid #323946; overflow: hidden; + background: var(--code-block-color); + + /* Collapsed + overflowing: fade the clipped edge instead of an inner scrollbar, + so mouse-wheel scroll always falls through to the page, never gets trapped. */ + &.has-overflow:not(.expanded) pre { + overflow: hidden; + mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%); + -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%); + } + + &.expanded pre { + max-height: none; + overflow: visible; + } + + .code-expand-btn { + display: block; + margin: 0 auto; + padding: 5px 16px; + font-size: 12px; + font-weight: 500; + font-family: 'Optimo-Plain', sans-serif; + color: var(--primary-color); + background: var(--copy-btn-bg); + border: 1px solid var(--border-color); + border-radius: 999px; + cursor: pointer; + } + + &.has-overflow:not(.expanded) .code-expand-btn { + position: absolute; + left: 50%; + bottom: 14px; + transform: translateX(-50%); + z-index: 3; + } + + &.expanded .code-expand-btn { + margin: 10px auto; + } } /* ── Code block header bar ────────────────────────────────────────── */ From 4c1165b9b6e2bf79ee4c0d45df2ebff8f96fc8cd Mon Sep 17 00:00:00 2001 From: ShashiSubramanya Date: Tue, 25 Aug 2026 15:40:59 +0530 Subject: [PATCH 7/9] variables and other edits for dark/light theme, UI bug fixes, etc --- modules/ROOT/pages/api-user-management.adoc | 25 +- modules/ROOT/pages/home.adoc | 11 + src/assets/styles/index.scss | 268 ++++++++++++++++-- src/assets/styles/radiant-colors.css | 2 +- src/assets/styles/variables.scss | 44 ++- src/components/DevDocTemplate/index.tsx | 1 + .../DevDocTemplate/playGround/RESTAPI.tsx | 18 +- src/components/Docmap/index.scss | 12 +- src/components/Document/helper.tsx | 38 ++- src/components/Document/index.scss | 53 +++- src/components/Dropdown/index.scss | 5 +- src/components/Footer/index.scss | 2 +- src/components/Header/index.scss | 8 +- src/components/LeftSidebar/index.scss | 2 + 14 files changed, 389 insertions(+), 100 deletions(-) diff --git a/modules/ROOT/pages/api-user-management.adoc b/modules/ROOT/pages/api-user-management.adoc index c5624f897..6dd56d3d0 100644 --- a/modules/ROOT/pages/api-user-management.adoc +++ b/modules/ROOT/pages/api-user-management.adoc @@ -121,7 +121,6 @@ To create a user: * +++POST /api/rest/2.0/users/create+++ (Rest API v2) * xref:user-api.adoc#create-user[POST /tspublic/v1/user] (Rest API v1) - To update user details: * +++POST /api/rest/2.0/users/{user_identifier}/update+++ (Rest API v2) @@ -135,39 +134,23 @@ If you rename an SSO user through the REST API and that user then logs in throug * If Just-in-Time (JIT) provisioning is enabled, ThoughtSpot creates a new duplicate account. The duplicate account does not inherit the original user's content, groups, or permissions. * If JIT provisioning is disabled, the user cannot log in. +==== -To safely update the username of an SSO user: +To update the username of an SSO user: . Update the username in your IdP. . Before the user logs in again, update the username in ThoughtSpot to match the new value using the REST API or Admin UI. Both updates must be complete before the user's next SSO login. -The order of the two steps can be reversed — you may update ThoughtSpot first and the IdP second — provided the user does not log in during the interval between the two changes. +The order of the two steps can be reversed. You may update ThoughtSpot first and the IdP second, provided the user does not log in during the interval between the two changes. For SSO users, ThoughtSpot derives email address and display name directly from the IdP. Update these attributes in your IdP only. ThoughtSpot automatically reflects the new values when the user next logs in through SSO. Do not use the REST API or the Admin UI to update the email address or display name of an SSO user. +==== [NOTE] ==== -Updating the username of an SSO user, `account_type` set to `SAML_USER` or `OIDC_USER`, requires changes in both the IdP and ThoughtSpot. - -If you rename an SSO user through the REST API and that user then logs in through the IdP: - -* If Just-in-Time (JIT) provisioning is enabled, ThoughtSpot creates a new duplicate account. The duplicate account does not inherit the original user's content, groups, or permissions. -* If JIT provisioning is disabled, the user cannot log in. - -To safely update the username of an SSO user: - -. Update the username in your IdP. -. Before the user logs in again, update the username in ThoughtSpot to match the new value using the REST API or Admin UI. - -Both updates must be complete before the user's next SSO login. -The order of the two steps can be reversed — you may update ThoughtSpot first and the IdP second — provided the user does not log in during the interval between the two changes. - -For SSO users, ThoughtSpot derives email address and display name directly from the IdP. Update these attributes in your IdP only. -ThoughtSpot automatically reflects the new values when the user next logs in through SSO. -Do not use the REST API or the Admin UI to update the email address or display name of an SSO user. For users who authenticate directly with ThoughtSpot (not through an external IdP), you can update username, email address, and display name using the REST API or Admin UI. diff --git a/modules/ROOT/pages/home.adoc b/modules/ROOT/pages/home.adoc index 5be6fd6af..f0f150e82 100644 --- a/modules/ROOT/pages/home.adoc +++ b/modules/ROOT/pages/home.adoc @@ -8,6 +8,17 @@ ++++
+
+
+
+
+
+
+
+
+
+
+

ThoughtSpot Embedded Documentation

Learn how to use developer tools, APIs, and SDKs to embed ThoughtSpot content in your app.

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index e0da410bd..58d37e658 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1146,18 +1146,139 @@ a.anchor { mask-position: -136px -68px; } } +// ── 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; + inset: 0; + z-index: 1; + background: linear-gradient( + to bottom, + transparent 0%, + transparent 40%, + color-mix(in srgb, var(--header-banner-base) 20%, transparent) 55%, + color-mix(in srgb, var(--header-banner-base) 45%, transparent) 68%, + color-mix(in srgb, var(--header-banner-base) 75%, transparent) 82%, + var(--header-banner-base) 96%, + var(--header-banner-base) 100% + ); + } + + .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%; + height: 85vh; + left: -14%; + top: -18vh; + // Toned down from 0.44 — read as too vivid/rose against the reference. + background: radial-gradient(ellipse at center, rgba(255, 93, 142, 0.32) 0%, transparent 68%); + animation: drift-a 6s ease-in-out infinite alternate; + } + + .blob-purple { + width: 55%; + height: 70vh; + left: 4%; + top: 35vh; + background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.46) 0%, transparent 66%); + animation: drift-b 7s ease-in-out infinite alternate; + } + + .blob-blue { + width: 70%; + height: 80vh; + right: -14%; + top: -15vh; + background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.42) 0%, transparent 68%); + animation: drift-c 5s ease-in-out infinite alternate; + } + + .blob-wash-pink { + width: 90%; + height: 100vh; + left: -5%; + top: 0; + background: radial-gradient(ellipse at 35% 50%, rgba(255, 170, 210, 0.09) 0%, transparent 70%); + } + + .blob-wash-blue { + width: 90%; + height: 100vh; + right: -5%; + top: 0; + background: radial-gradient(ellipse at 65% 50%, rgba(160, 196, 255, 0.12) 0%, transparent 70%); + } + + // Dark-only blobs — hidden in light mode + .blob-orange, + .blob-yellow, + .blob-purple-r, + .blob-teal { + display: none; + } +} + .header-banner { + position: relative; min-height: 240px; - background-color: var(--header-banner-base); - background-image: var(--header-banner-background); - background-size: 160% 160%; - background-position: 20% 10%; - animation: radiance-drift 24s ease-in-out infinite alternate; border-bottom: none; padding: 30px 0 0 40px; - .header-banner-text { + position: relative; + z-index: 1; display: flex; flex-direction: column; color: var(--primary-color); @@ -1174,30 +1295,135 @@ a.anchor { letter-spacing: -0.064px; } } + + #homePageSearchBar { + position: relative; + z-index: 1; + } } -@keyframes radiance-drift { - 0% { background-position: 10% 0%; } - 50% { background-position: 65% 40%; } - 100% { background-position: 20% 60%; } +#wrapper[data-theme='dark'] .radiance-bg, +#docsModal[data-theme='dark'] .radiance-bg { + // Light-only blobs — hidden in dark mode + .blob-pink, + .blob-purple { + display: none; + } + + .blob-orange { + display: block; + width: 65%; + height: 80vh; + // Shifted in from the corner (-10%) toward center-left so the warm + // glow reads as centered on the left half, not hugging the edge. + left: -2%; + top: 8vh; + // Toned down slightly (0.28 -> 0.22) so it stays a subtle accent + // and doesn't compete with the purple emphasis at center. + background: radial-gradient(ellipse at center, rgba(255, 180, 90, 0.22) 0%, transparent 68%); + animation: drift-a 6s ease-in-out infinite alternate; + } + + .blob-yellow { + display: block; + width: 48%; + height: 58vh; + left: 8%; + top: -8vh; + background: radial-gradient(ellipse at center, rgba(255, 232, 150, 0.08) 0%, transparent 65%); + animation: drift-d 8s ease-in-out infinite alternate; + } + + // Same size as light — different position + animation delay + .blob-blue { + width: 55%; + height: 65vh; + // Pulled back in (right: -4% -> 6%) so its center sits closer to + // purple-r's — with two separate radial falloffs, centers too far + // apart leave a dim/desaturated "valley" between them instead of a + // smooth hand-off (that's what didn't match the reference). The + // wider falloff (62% -> 70%) also softens/extends its own tail so + // it carries color further into the middle. + right: 6%; + top: -10vh; + background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.34) 0%, transparent 70%); + animation-delay: -3s; + } + + .blob-purple-r { + display: block; + // Widened further (62% -> 68%) and pulled toward true center + // (right: 14% -> 26%) so purple is the highlighted center-of-banner + // tone, with strengthened opacity (0.52 -> 0.58) to make it read as + // the focal glow while everything else stays subtle around it. + width: 68%; + height: 68vh; + // Pulled in a bit further (26% -> 18%) to close the gap toward blue + // — see blob-blue above. + right: 18%; + top: 6vh; + background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.58) 0%, transparent 72%); + animation: drift-b 7s ease-in-out infinite alternate; + } + + .blob-teal { + display: block; + width: 40%; + height: 50vh; + right: 14%; + top: 8vh; + background: radial-gradient(ellipse at center, rgba(45, 220, 177, 0.18) 0%, transparent 65%); + animation: drift-d 9s ease-in-out infinite alternate; + } +} + +// Mostly-horizontal drift: large vertical swings pushed blobs down into the +// `::after` fade-to-flat zone for part of each cycle, dimming the glow right +// when it should stay visible. Horizontal movement stays large enough to +// read clearly as motion, without carrying the glow out of the visible band; +// the smaller scale swing (vs. an earlier, more dramatic pass) keeps the +// pulse subtle rather than a noticeable "breathing" effect. +@keyframes drift-a { + from { transform: translate(0px, 0px) scale(1.00); } + to { transform: translate(200px, -60px) scale(1.15); } +} + +@keyframes drift-b { + from { transform: translate(0px, 0px) scale(1.00); } + to { transform: translate(-160px, 70px) scale(1.18); } +} + +@keyframes drift-c { + from { transform: translate(0px, 0px) scale(1.00); } + to { transform: translate(-180px, -50px) scale(1.14); } +} + +@keyframes drift-d { + from { transform: translate(0px, 0px) scale(1.00); } + to { transform: translate(140px, 60px) scale(1.16); } } @media (prefers-reduced-motion: reduce) { - .header-banner { + .radiance-bg .blob { animation: none; } } -// In-product presentation only: override banner color to match product sidebar (#232F43). -// Standalone light/dark banner gradient is preserved via var(--header-banner-background) above. -.embedded-mode .header-banner { - background: #232F43; - animation: none; - border-bottom: none; - box-shadow: none; +// In-product presentation only: override banner color to match product sidebar (#232F43), +// and suppress the page-wide gradient entirely. +.embedded-mode { + .radiance-bg { + display: none; + } - .header-banner-text { - color: #fff; + .header-banner { + background: #232F43; + border-bottom: none; + box-shadow: none; + + .header-banner-text { + color: #fff; + } } } @@ -1315,7 +1541,7 @@ a.anchor { .cl-label p { display: inline-block; border: 1px solid var(--rel-notes-pill-border); - background-color: var(--rel-notes-tag-bg-color); + background-color: var(--rd-comp-color-button-primary-on-color-hover); color: var(--rel-notes-tag-text); font-size: 14px; font-weight: 300; diff --git a/src/assets/styles/radiant-colors.css b/src/assets/styles/radiant-colors.css index 89a38c7bc..d6e7d7eb4 100644 --- a/src/assets/styles/radiant-colors.css +++ b/src/assets/styles/radiant-colors.css @@ -100,7 +100,7 @@ --rd-sys-color-content-success: #56d3a8; --rd-sys-color-content-warning: #fcd977; --rd-sys-color-content-failure: #f47e89; - --rd-sys-color-content-information: #71a1f4; + --rd-sys-color-content-information: x; --rd-sys-color-content-accent-green: #56d3a8; --rd-sys-color-content-accent-yellow: #fcd977; --rd-sys-color-content-accent-red: #f47e89; diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 3ebcdbe5e..1cb2da990 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -36,7 +36,13 @@ $highlight-fadedgreen: #dfd; $highlight-yellow: #e18114; $highlight-cyan: #78d9ec; -$header-zIndex: 10; +// `header` is `position: absolute` + this z-index, which makes it its own +// stacking context — so no descendant (e.g. the version/Resources dropdown +// menus) can ever paint above content outside `header`, no matter how high +// a z-index that descendant sets locally. Must stay above the SpotterCode +// floating-assistant panel/chip (FloatingAssistant/index.scss, z-index up +// to 1002) so header's dropdowns aren't trapped behind it. +$header-zIndex: 1200; $header-logo-width: 273px; $header-link-margin: 45px; $font-weight-normal: 300; @@ -217,6 +223,14 @@ $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 --- */ --border-color: var(--rd-sys-color-border-subtle); @@ -238,9 +252,9 @@ $tag-color-light: $lightgrey; --important-block-color: var(--rd-sys-color-background-on-base); /* --- release-notes pills --- */ - --rel-notes-tag-bg-color: var(--rd-sys-color-background-information); + --rel-notes-tag-bg-color: var(--rd-comp-color-button-primary-on-color-hover); --rel-notes-tag-text: var(--rd-sys-color-content-information); - --rel-notes-pill-border: var(--rd-sys-color-border-brand); + --rel-notes-pill-border: var(--rd-sys-color-content-information); /* --- elevation --- $box-shadow-search-box is already byte-identical to radiant's @@ -281,19 +295,8 @@ $tag-color-light: $lightgrey; --secondary-header-active: #0568fa; --nav-accent-color: #A9E8FF; --header-background-color: #012676; - --header-banner-background: - radial-gradient(46% 34% at 6% -8%, rgba(45, 220, 177, 0.26), transparent), - radial-gradient(44% 32% at 28% 0%, rgba(255, 93, 142, 0.24), transparent), - radial-gradient(40% 30% at 48% 4%, rgba(138, 93, 255, 0.16), transparent), - radial-gradient(58% 44% at 92% 0%, rgba(39, 140, 255, 0.4), transparent), - radial-gradient(60% 42% at 50% -10%, rgba(244, 126, 137, 0.14), transparent), - linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.85) 55%, #fff 85%); --header-banner-base: #fff; --left-nav-color: #f6f8fa; - - /* ---- NOT remapped: code-syntax palette. Syntax highlighting is its own - design problem (contrast pairs tuned per-language); forcing it onto - product tokens degrades readability. Light/dark syntax sets kept as-is. ---- */ --code-block-color: #0d1117; --code-text-color: #e6edf3; --text-color-code-lang: #fff; @@ -305,7 +308,7 @@ $tag-color-light: $lightgrey; --highlight-darkblue: #000080; --highlight-blue: #458; --highlight-yellow: #e1b514; - --highlight-orange: ; /* NOTE: empty value in original file â likely a bug */ + --highlight-orange: $warning-color; --highlight-darkred: #900; --highlight-lilac: #d7aefb; --highlight-violet: #990073; @@ -326,13 +329,6 @@ $tag-color-light: $lightgrey; --secondary-header-text: #c9d1d9; --secondary-header-active: #0086b3; --nav-accent-color: #71a1f4; - --header-banner-background: - radial-gradient(58% 36% at 22% -4%, rgba(45, 220, 177, 0.027), transparent), - radial-gradient(48% 34% at 10% 0%, rgba(255, 93, 142, 0.09), transparent), - radial-gradient(48% 36% at 14% -4%, rgba(138, 93, 255, 0.22), transparent), - radial-gradient(70% 44% at 84% 4%, rgba(39, 140, 255, 0.2), transparent), - radial-gradient(68% 46% at 50% -6%, rgba(244, 126, 137, 0.13), transparent), - linear-gradient(to bottom, rgba(31, 32, 36, 0.08) 0%, rgba(31, 32, 36, 0.24) 38%, rgba(31, 32, 36, 0.62) 70%, #1F2024 100%); --header-banner-base: #1F2024; --header-background-color: #26282C; @@ -340,7 +336,9 @@ $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-text: #71a1f4; + --rel-notes-pill-border: #278CFF; /* code-syntax dark set â unchanged */ --code-block-color: #26282C; --code-text-color: #e6edf3; diff --git a/src/components/DevDocTemplate/index.tsx b/src/components/DevDocTemplate/index.tsx index d6961ab96..1798b2b1c 100644 --- a/src/components/DevDocTemplate/index.tsx +++ b/src/components/DevDocTemplate/index.tsx @@ -595,6 +595,7 @@ const isVersionedIframe = VERSION_DROPDOWN.some( backLink={backLink} isPublisSiteOpen={isPublicSiteOpen} params={params} + isDarkMode={isDarkMode} /> ); diff --git a/src/components/DevDocTemplate/playGround/RESTAPI.tsx b/src/components/DevDocTemplate/playGround/RESTAPI.tsx index 2d5d7b94a..45944fd01 100644 --- a/src/components/DevDocTemplate/playGround/RESTAPI.tsx +++ b/src/components/DevDocTemplate/playGround/RESTAPI.tsx @@ -23,7 +23,7 @@ const EXTERNAL_PLAYGROUND_EVENTS = { }; const RenderPlayGround: FC = (props) => { - const { location, backLink, isPublisSiteOpen = false } = props; + const { location, backLink, isPublisSiteOpen = false, isDarkMode = false } = props; const isBrowser = () => typeof window !== 'undefined'; @@ -60,11 +60,24 @@ const RenderPlayGround: FC = (props) => { }; const baseUrl = isPublisSiteOpen ? DEFAULT_HOST : getParentURL(); - const playgroundUrl = + const playgroundBaseUrl = clusterType === CLUSTER_TYPES.PROD ? playgroundUrlTemplate({ version: DOC_VERSION_PROD }) : playgroundUrlTemplate({ version: DOC_VERSION_DEV }); + // Same convention VersionIframe uses to propagate theme into a nested + // iframe: an `isDarkMode` query param. Standalone site: `isDarkMode` + // already reflects the user's toggle/OS preference. In-product help: + // `isDarkMode` already reflects the cluster's theme (DevDocTemplate + // forces it from the embedding product rather than letting the user + // toggle it) — so this needs no extra logic, just forwarding the same + // value versioned URLs already use. + const playgroundUrl = (() => { + const url = new URL(playgroundBaseUrl); + url.searchParams.set('isDarkMode', String(isDarkMode)); + return url.toString(); + })(); + useEffect(() => { async function fetchData() { try { @@ -226,4 +239,5 @@ type RenderPlayGroundProps = { backLink: string; isPublisSiteOpen: boolean; params: Object; + isDarkMode?: boolean; }; diff --git a/src/components/Docmap/index.scss b/src/components/Docmap/index.scss index d28015f90..0b1158921 100644 --- a/src/components/Docmap/index.scss +++ b/src/components/Docmap/index.scss @@ -36,7 +36,7 @@ } > a:hover { - color: var(--var-note-color); + color: var(--docmap-active-color); } &.activeTag { @@ -47,11 +47,11 @@ top: 0; bottom: 10px; width: 1px; - background: var(--var-note-color); + background: var(--docmap-active-color); } > a { - color: var(--var-note-color) !important; + color: var(--docmap-active-color) !important; font-weight: 500; } } @@ -72,7 +72,7 @@ } &.activeTag > a { - color: var(--var-note-color) !important; + color: var(--docmap-active-color) !important; font-weight: 500; } @@ -91,7 +91,7 @@ } &.activeTag > a { - color: var(--var-note-color) !important; + color: var(--docmap-active-color) !important; font-weight: 500; opacity: 1; } @@ -115,7 +115,7 @@ } .activeTag { - color: var(--var-note-color) !important; + color: var(--docmap-active-color) !important; } @media screen and (min-width: $tablet-resolution-min) and (max-width: $tablet-resolution-max) { diff --git a/src/components/Document/helper.tsx b/src/components/Document/helper.tsx index 5afa31b3c..e6d2eda8d 100644 --- a/src/components/Document/helper.tsx +++ b/src/components/Document/helper.tsx @@ -1,6 +1,7 @@ import React from 'react'; import hljs from 'highlight.js'; -import { FiCopy } from '@react-icons/all-files/fi/FiCopy'; +import { MdContentCopy } from '@react-icons/all-files/md/MdContentCopy'; +import { MdCheck } from '@react-icons/all-files/md/MdCheck'; import t from '../../utils/lang-utils'; import { getHTMLFromComponent } from '../../utils/react-utils'; import selectors from '../../constants/selectorsContant'; @@ -31,19 +32,28 @@ export const enableCopyToClipboard = ( document.body.removeChild(ta); } - /* Tooltip appended inside the button so it floats via absolute positioning */ - if (element.querySelector('.tooltip')) return; - const divElement = document.createElement('div'); - divElement.classList.add('tooltip'); - const spanElement = document.createElement('span'); - spanElement.classList.add('tooltiptext'); - spanElement.innerText = t('CODE_COPY_BTN_AFTER_CLICK_TEXT'); - divElement.appendChild(spanElement); - element.appendChild(divElement); + /* Swap the icon for a checkmark and reverting after a delay. The + "Copied" text is no longer shown as an always-visible popup — + it's only surfaced via `aria-label`/`title`, which browsers only + display on hover. `.copyIcon` is the itself, so replace it + wholesale via outerHTML rather than innerHTML, which would nest a + new svg inside the existing one instead of swapping it. */ + const iconEl = element.querySelector('.copyIcon'); + if (iconEl) { + iconEl.outerHTML = getHTMLFromComponent(, 'copyIcon'); + } + element.classList.add('copied'); + element.setAttribute('aria-label', t('CODE_COPY_BTN_AFTER_CLICK_TEXT')); + element.setAttribute('title', t('CODE_COPY_BTN_AFTER_CLICK_TEXT')); + setTimeout(() => { - if (element.contains(divElement)) { - element.removeChild(divElement); + const icon = element.querySelector('.copyIcon'); + if (icon) { + icon.outerHTML = getHTMLFromComponent(, 'copyIcon'); } + element.classList.remove('copied'); + element.setAttribute('aria-label', t('CODE_COPY_BTN_HOVER_TEXT')); + element.setAttribute('title', t('CODE_COPY_BTN_HOVER_TEXT')); }, 1500); }); }; @@ -99,7 +109,7 @@ export const customizeDocContent = () => { buttonElement.setAttribute('title', t('CODE_COPY_BTN_HOVER_TEXT')); const imageElement = document.createElement('span'); - imageElement.innerHTML = getHTMLFromComponent(, 'copyIcon'); + imageElement.innerHTML = getHTMLFromComponent(, 'copyIcon'); buttonElement.appendChild(imageElement); enableCopyToClipboard(buttonElement, copySource); @@ -140,7 +150,7 @@ export const customizeDocContent = () => { enableCopyToClipboard(buttonElement, contentWrapper); const imageElement = document.createElement('span'); - imageElement.innerHTML = getHTMLFromComponent(, 'copyIcon'); + imageElement.innerHTML = getHTMLFromComponent(, 'copyIcon'); buttonElement.appendChild(imageElement); cellElement.appendChild(buttonElement); }); diff --git a/src/components/Document/index.scss b/src/components/Document/index.scss index 18a707247..edc62205e 100644 --- a/src/components/Document/index.scss +++ b/src/components/Document/index.scss @@ -193,12 +193,14 @@ display: block; margin: 0 auto; padding: 5px 16px; - font-size: 12px; + font-size: 12.5px; font-weight: 500; font-family: 'Optimo-Plain', sans-serif; - color: var(--primary-color); + color: var(--link-text-color); background: var(--copy-btn-bg); - border: 1px solid var(--border-color); + // 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; } @@ -206,13 +208,17 @@ &.has-overflow:not(.expanded) .code-expand-btn { position: absolute; left: 50%; - bottom: 14px; + // 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; } &.expanded .code-expand-btn { - margin: 10px auto; + // More breathing room above than below, so it doesn't crowd + // the last line of code once expanded. + margin: 16px auto 10px; } } @@ -276,7 +282,21 @@ transition: background 0.15s ease, color 0.15s ease; &:hover { background: rgba(255, 255, 255, 0.1); } - &.copied { color: #0d9f6e; } + // 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; } } } @@ -328,6 +348,17 @@ .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; + background: rgba(13, 159, 110, 0.14); + } + + &.copied .copyIcon { color: #0d9f6e; } } } } @@ -436,6 +467,9 @@ gap: 4px; font-size: 12px; color: var(--secondary-color); + + &.copied { color: #0d9f6e; } + &.copied .copyIcon { color: #0d9f6e; } } &:hover .tableCopyButton, @@ -578,8 +612,11 @@ } .copyIcon { - height: 15px; - width: 20px; + // 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; } a, diff --git a/src/components/Dropdown/index.scss b/src/components/Dropdown/index.scss index 22c244b20..0014187f9 100644 --- a/src/components/Dropdown/index.scss +++ b/src/components/Dropdown/index.scss @@ -52,7 +52,10 @@ right: 0; left: auto; padding-top: 6px; - z-index: 200; + // 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; } .dropdown:hover .dropdownContent { diff --git a/src/components/Footer/index.scss b/src/components/Footer/index.scss index 12b701637..004cefec4 100644 --- a/src/components/Footer/index.scss +++ b/src/components/Footer/index.scss @@ -6,7 +6,7 @@ footer { .footerWrapper { text-align: center; - color: #777e8b; + color: $darkgrey; font-size: 12px; font-weight: 300; margin-top: 50px; diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss index db8e8df9a..6193b8d78 100644 --- a/src/components/Header/index.scss +++ b/src/components/Header/index.scss @@ -113,7 +113,9 @@ header { top: 100%; right: 0; padding-top: 6px; - z-index: 200; + // Above the SpotterCode floating-assistant panel (z-index: 1002), + // which otherwise covers this dropdown's right edge when open. + z-index: 1100; transition: opacity 0.15s ease, visibility 0.15s ease; } @@ -151,7 +153,9 @@ header { position: absolute; top: calc(100% + 6px); right: 0; - z-index: 200; + // Above the SpotterCode floating-assistant panel (z-index: 1002), + // which otherwise covers this dropdown's right edge when open. + z-index: 1100; background: var(--nav-bar-color, #232F43); border: 1px solid #458; box-shadow: 0 8px 24px rgba(68, 85, 136, 0.35); diff --git a/src/components/LeftSidebar/index.scss b/src/components/LeftSidebar/index.scss index 06cc0a7fd..c8999e4eb 100644 --- a/src/components/LeftSidebar/index.scss +++ b/src/components/LeftSidebar/index.scss @@ -134,6 +134,8 @@ } .aside { + position: relative; + z-index: $z-index-left-nav; padding: 0 0 0 10px; width: 100%; border-right: 1px solid var(--border-color); From eb7a09759f5423f75213794885d4318a67a60cfb Mon Sep 17 00:00:00 2001 From: ShashiSubramanya Date: Wed, 26 Aug 2026 10:51:09 +0530 Subject: [PATCH 8/9] comments cleanup --- src/assets/styles/index.scss | 65 ----------------------- src/assets/styles/variables.scss | 9 +--- src/components/Document/index.scss | 20 ------- src/components/Dropdown/index.scss | 3 -- src/components/SecondaryHeader/index.scss | 2 - 5 files changed, 1 insertion(+), 98 deletions(-) diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 58d37e658..f1c6d6292 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1147,42 +1147,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; @@ -1203,19 +1174,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%; @@ -1314,12 +1275,8 @@ a.anchor { display: block; width: 65%; height: 80vh; - // Shifted in from the corner (-10%) toward center-left so the warm - // glow reads as centered on the left half, not hugging the edge. left: -2%; top: 8vh; - // Toned down slightly (0.28 -> 0.22) so it stays a subtle accent - // and doesn't compete with the purple emphasis at center. background: radial-gradient(ellipse at center, rgba(255, 180, 90, 0.22) 0%, transparent 68%); animation: drift-a 6s ease-in-out infinite alternate; } @@ -1338,12 +1295,6 @@ a.anchor { .blob-blue { width: 55%; height: 65vh; - // Pulled back in (right: -4% -> 6%) so its center sits closer to - // purple-r's — with two separate radial falloffs, centers too far - // apart leave a dim/desaturated "valley" between them instead of a - // smooth hand-off (that's what didn't match the reference). The - // wider falloff (62% -> 70%) also softens/extends its own tail so - // it carries color further into the middle. right: 6%; top: -10vh; background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.34) 0%, transparent 70%); @@ -1352,14 +1303,8 @@ a.anchor { .blob-purple-r { display: block; - // Widened further (62% -> 68%) and pulled toward true center - // (right: 14% -> 26%) so purple is the highlighted center-of-banner - // tone, with strengthened opacity (0.52 -> 0.58) to make it read as - // the focal glow while everything else stays subtle around it. width: 68%; height: 68vh; - // Pulled in a bit further (26% -> 18%) to close the gap toward blue - // — see blob-blue above. right: 18%; top: 6vh; background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.58) 0%, transparent 72%); @@ -1377,12 +1322,6 @@ a.anchor { } } -// Mostly-horizontal drift: large vertical swings pushed blobs down into the -// `::after` fade-to-flat zone for part of each cycle, dimming the glow right -// when it should stay visible. Horizontal movement stays large enough to -// read clearly as motion, without carrying the glow out of the visible band; -// the smaller scale swing (vs. an earlier, more dramatic pass) keeps the -// pulse subtle rather than a noticeable "breathing" effect. @keyframes drift-a { from { transform: translate(0px, 0px) scale(1.00); } to { transform: translate(200px, -60px) scale(1.15); } @@ -1409,8 +1348,6 @@ a.anchor { } } -// In-product presentation only: override banner color to match product sidebar (#232F43), -// and suppress the page-wide gradient entirely. .embedded-mode { .radiance-bg { display: none; @@ -1427,8 +1364,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; diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 1cb2da990..811a8edf5 100644 --- a/src/assets/styles/variables.scss +++ b/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 --- */ diff --git a/src/components/Document/index.scss b/src/components/Document/index.scss index edc62205e..3b6b476e6 100644 --- a/src/components/Document/index.scss +++ b/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; } diff --git a/src/components/Dropdown/index.scss b/src/components/Dropdown/index.scss index 0014187f9..cf352788a 100644 --- a/src/components/Dropdown/index.scss +++ b/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; } diff --git a/src/components/SecondaryHeader/index.scss b/src/components/SecondaryHeader/index.scss index 91dd62a77..74c6bd424 100644 --- a/src/components/SecondaryHeader/index.scss +++ b/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); } From 3a3e3218be686d641dff4f7739058f4716245e56 Mon Sep 17 00:00:00 2001 From: ShashiSubramanya Date: Wed, 26 Aug 2026 18:56:30 +0530 Subject: [PATCH 9/9] admonition block updates --- src/assets/styles/index.scss | 351 ++++++++++++++++++++++++++++++- src/assets/styles/variables.scss | 11 +- 2 files changed, 352 insertions(+), 10 deletions(-) diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index f1c6d6292..db32fd151 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -656,7 +656,7 @@ button { border-left: 4px solid var(--var-note-color); td.content { border: 1px solid var(--note-border-color); - box-shadow: 0 1px 1px var(--note-border-color); + box-shadow: var(--box-shadow); border-radius: 5px !important;; background: var(--note-block-color); @@ -668,17 +668,19 @@ button { } } -// Dark mode: the note block reads as border-only, no fill. -#wrapper[data-theme='dark'] .admonitionblock.note td.content, -#docsModal[data-theme='dark'] .admonitionblock.note td.content { - background: transparent; +// Dark mode: all admonition types share one flat background, overriding +// each type's light-mode background variable (--note-block-color, +// --important-block-color, --admonition-background). +#wrapper[data-theme='dark'] .admonitionblock td.content, +#docsModal[data-theme='dark'] .admonitionblock td.content { + background: var(--admonition-background-dark); } .admonitionblock.important { border-left: 4px solid var(--var-important-color); td.content { border: 1px solid var(--important-border-color); - box-shadow: 0 1px 1px var(--important-border-color); + box-shadow: var(--box-shadow); border-radius: 5px !important; background: var(--important-block-color); } @@ -692,7 +694,7 @@ button { border-left: 5px solid $warning-color; td.content { border: 1px solid $warning-color; - box-shadow: 0 1px 1px $warning-color; + box-shadow: var(--box-shadow); border-radius: 5px !important; } td.icon { @@ -705,7 +707,7 @@ button { border-left: 5px solid $caution-color; td.content { border: 1px solid $caution-color; - box-shadow: 0 1px 1px $caution-color; + box-shadow: var(--box-shadow); border-radius: 5px !important; } td.icon { @@ -719,7 +721,7 @@ button { td.content { border: 0 !important; border-radius: 0.5 !important; - box-shadow: none !important; + box-shadow: var(--box-shadow); } td.icon { left: 20px !important; @@ -1263,6 +1265,139 @@ a.anchor { } } +// Walkthroughs landing page — one wrapper around the hero text AND the card +// grid, with the gradient wash as a position:absolute layer sized to that +// whole wrapper instead of its own fixed-height box. A boxed hero (even a +// generously tall one) still has a hard bottom edge where overflow:hidden +// clips the blur/falloff mid-fade — visible as a seam or, with a taller box, +// a softer rounded silhouette. Sizing the layer to the full page instead +// means the blobs have all the room they need to fade out completely on +// their own before any edge is reached, so nothing is left to clip. +// It also means the gradient no longer reserves its own vertical space, so +// the hero text and the card grid below sit at normal content spacing +// instead of being pushed apart by an artificial min-height. +.walkthroughs-page { + position: relative; + padding-top: 48px; + margin-top: 0; + + @media (max-width: $mobile-resolution-max) { + padding-top: 32px; + } + + .radiance-bg { + position: absolute; + // Bleeds under this page's 60px/60px left-right content padding AND + // .doc-wrapper-detail's shared 20px top padding, so the wash + // reaches the header on all three edges instead of leaving a plain + // gap — matching the home page, which has no such padding to begin + // with. Bottom stays 0: the card grid below should keep its normal + // padding untouched. + inset: -20px -60px 0 -60px; + + @media (max-width: $mobile-resolution-max) { + // .doc-wrapper-detail's padding (including its 20px top) drops + // to 0 at this breakpoint, so there's no padding left to bleed + // under — inset:0 here, not the desktop offsets above. + inset: 0; + } + + // home's ::after mask (above) uses %-based stops, which are relative + // to its OWN box — since that box now spans the whole page, a % + // stop would stretch the fade-out proportionally with page length, + // tinting the cards. It also only masks down to its own 100% stop; + // giving it a shorter *height* instead (tried first) left the + // segment between that height and .radiance-bg's real (page-length) + // bottom completely unmasked, so the raw blobs showed through at + // full strength there with a hard cutoff at the very end — visible + // in a screenshot as full-strength color straight through the card + // row. Fixed px stops sidestep both: the fade still completes at a + // constant depth, and every pixel past 190px keeps resolving to the + // final (fully opaque, page-matching) stop, all the way to the + // page's actual bottom edge. + &::after { + background: linear-gradient( + to bottom, + transparent 0px, + transparent 76px, + color-mix(in srgb, var(--header-banner-base) 20%, transparent) 104px, + color-mix(in srgb, var(--header-banner-base) 45%, transparent) 129px, + color-mix(in srgb, var(--header-banner-base) 75%, transparent) 156px, + var(--header-banner-base) 182px, + var(--header-banner-base) 100% + ); + } + + // pink/purple/blue are home's values (tuned for its taller banner — + // h1 + search bar — where their cores sit ~200px down). This page's + // hero is just a heading + one line of text, and the gap to the + // cards is intentionally kept tight, so the visible band above is + // only ~190px (the mask height above) — home's positions would put + // each blob's core below that band, in the now-flattened tail, so + // only their pale outer edges would show. Pulling all three up + // brings their cores (peak color) back inside the visible band — + // but that also means this page actually shows each blob's full- + // strength core, where home (by design) never does. Same alpha as + // home would read far more saturated here, so it's toned down to + // land at a similar visual intensity to home/the reference. + .blob-pink { + top: -31vh; + background: radial-gradient(ellipse at center, rgba(255, 93, 142, 0.16) 0%, transparent 68%); + } + + .blob-blue { + top: -29vh; + background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.20) 0%, transparent 68%); + } + + .blob-purple { + top: -24vh; + background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.22) 0%, transparent 66%); + } + + .blob-wash-pink { + background: radial-gradient(ellipse at 35% 50%, rgba(255, 170, 210, 0.06) 0%, transparent 70%); + } + + .blob-wash-blue { + background: radial-gradient(ellipse at 65% 50%, rgba(160, 196, 255, 0.08) 0%, transparent 70%); + } + } + + // Guarantees the card grid paints above the gradient layer regardless + // of stacking order — harmless once the fade completes well above it, + // but avoids relying on that timing. + .document-body-wrapper { + position: relative; + z-index: 1; + } +} + +// Total gap from the top of the page to the first card row is now just +// this padding-bottom + .tutorial-cards-row's own margin-top (24px, +// index.scss) — no more artificial min-height holding them apart, which is +// what made the gap so large before. +.walkthroughs-hero-text { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + color: var(--primary-color); + padding: 0 24px 20px; + + h1 { + font-size: $font-size-large; + font-weight: 400; + margin: 0; + } + + p { + margin: 12px 0 0; + } +} + #wrapper[data-theme='dark'] .radiance-bg, #docsModal[data-theme='dark'] .radiance-bg { // Light-only blobs — hidden in dark mode @@ -1322,6 +1457,48 @@ a.anchor { } } +// Same fix as the light-mode blobs in .walkthroughs-page above, for dark +// mode's distinct orange/yellow/purple-r/teal set — their positions above +// are tuned for home's taller banner, putting every core below this page's +// much shorter (~190px) visible band. +#wrapper[data-theme='dark'] .walkthroughs-page .radiance-bg, +#docsModal[data-theme='dark'] .walkthroughs-page .radiance-bg { + // Same reasoning as the light-mode alpha overrides above: home never + // shows these blobs' full-strength cores, this page does (that's the + // point of the repositioning), so the same alpha reads more saturated + // here than on home/the reference. + .blob-orange { + top: -29vh; + background: radial-gradient(ellipse at center, rgba(255, 180, 90, 0.11) 0%, transparent 68%); + } + + .blob-yellow { + top: -18vh; + background: radial-gradient(ellipse at center, rgba(255, 232, 150, 0.05) 0%, transparent 65%); + } + + .blob-blue { + top: -21vh; + background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.16) 0%, transparent 70%); + } + + .blob-purple-r { + top: -23vh; + background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.24) 0%, transparent 72%); + } + + .blob-teal { + top: -14vh; + background: radial-gradient(ellipse at center, rgba(45, 220, 177, 0.09) 0%, transparent 65%); + } +} + +// Mostly-horizontal drift: large vertical swings pushed blobs down into the +// `::after` fade-to-flat zone for part of each cycle, dimming the glow right +// when it should stay visible. Horizontal movement stays large enough to +// read clearly as motion, without carrying the glow out of the visible band; +// the smaller scale swing (vs. an earlier, more dramatic pass) keeps the +// pulse subtle rather than a noticeable "breathing" effect. @keyframes drift-a { from { transform: translate(0px, 0px) scale(1.00); } to { transform: translate(200px, -60px) scale(1.15); } @@ -1362,6 +1539,14 @@ a.anchor { color: #fff; } } + + .walkthroughs-page { + background: #232F43; + + .walkthroughs-hero-text { + color: #fff; + } + } } .introCard, @@ -1376,6 +1561,140 @@ a.anchor { width: auto; } +// Tutorials overview cards — same boxDiv look, but sized to fill the +// grid column edge-to-edge (no width cap) so the three cards in a row +// read as evenly sized tiles rather than centered fixed-width boxes. +.tutorialCard { + flex: 1 1 280px; + width: 100%; + margin: 10px; + padding: 24px; + + h5 { + overflow-wrap: break-word; + word-wrap: break-word; + } + + p { + overflow-wrap: break-word; + word-wrap: break-word; + } +} + +// Small uppercase label above the card title, e.g. "Tutorial". +.tutorialCardLabel { + font-size: 13px; + font-weight: 800; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--breadcrums-font-color); + margin: 0 0 8px; +} + +// "Start" call-to-action link at the bottom of the card. +.tutorialCardCta { + font-size: 13px; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +// Center the tutorial-card rows as a group and tighten the gap between cards — +// .row/.col-md-4/.col-md-6 (grid.scss) add 15px of column padding on top of +// .tutorialCard's own margin, which otherwise leaves ~50px between cards. +.tutorial-cards-row { + justify-content: center; + + // Breathing room between the intro paragraph and the first card row — + // only the first row needs it; the row-to-row gap is already handled by .pb-10. + &:first-of-type { + margin-top: 24px; + } + + .col-md-4, + .col-md-6 { + padding: 0 8px; + } + + // .row (grid.scss) pulls the row in by -15px on each side to offset a + // Bootstrap-style container gutter that doesn't exist on this page. + // Override it here via the compound selector (higher specificity than + // the plain .row rule, so it wins regardless of stylesheet order). + // The surrounding container padding is symmetric (.doc-wrapper-detail. + // doc-walkthroughs + .walkthroughs-body-wrapper), so both margins match. + &.row { + margin-left: 0; + margin-right: 0; + } +} + +// Prev/Next footer buttons on tutorial content pages — prev sits on the left, +// next (or the final "Done") is pushed to the right via margin-left: auto so +// it stays right-aligned even when prev is absent (first page of a tutorial). +// (The SpotterCode floating assistant hides itself on tutorials pages — see +// isTutorialsPath in FloatingAssistant/index.tsx — so no space needs reserving +// here for it.) +.tutorial-pagination { + display: flex; + align-items: center; + margin-top: 32px; + padding-top: 20px; + border-top: 1px solid var(--border-color); + + // `.documentWrapper a, .documentWrapper a:active { color: var(--link-text-color); }` + // (Document/index.scss) has specificity 0,1,1 — a single `&__btn` class (0,1,0) + // loses to it in the resting state, so the text color only ever showed correctly + // under `:hover` (0,2,0). Compounding with the `a` element + parent class here + // raises these to 0,2,1 / 0,3,1 so they always win. + a.tutorial-pagination__btn { + display: inline-flex; + align-items: center; + padding: 8px 18px; + border: 1px solid var(--border-color); + border-radius: 6px; + font-size: 14px; + font-weight: $font-weight-bold; + color: var(--rd-comp-color-button-primary-default); + text-decoration: none; + background: var(--body-background-color); + box-shadow: var(--box-shadow); + transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; + + &:hover { + border-color: var(--rd-comp-color-button-primary-hover); + color: var(--rd-comp-color-button-primary-hover); + box-shadow: var(--box-shadow-hover); + } + + &:active { + border-color: var(--rd-comp-color-button-primary-pressed); + color: var(--rd-comp-color-button-primary-pressed); + } + } + + &__next { + margin-left: auto; + } + + a.tutorial-pagination__done { + background: var(--rd-comp-color-button-primary-default); + border-color: var(--rd-comp-color-button-primary-default); + color: #fff; + + &:hover { + background: var(--rd-comp-color-button-primary-hover); + border-color: var(--rd-comp-color-button-primary-hover); + color: #fff; + } + + &:active { + background: var(--rd-comp-color-button-primary-pressed); + border-color: var(--rd-comp-color-button-primary-pressed); + color: #fff; + } + } +} + .cardHeading { font-size: $font-size-h2; color: var(--primary-color) #1d232f; @@ -1389,6 +1708,20 @@ a.anchor { .document-body-wrapper { padding: 5px 30px 20px 30px; } + +// Walkthroughs landing page only — extra breathing room on both sides. +// Scoped via the class added directly on this page's markup +// (guided-walkthroughs.adoc), so it can't affect .document-body-wrapper on +// any other page (e.g. home.adoc uses the same base class). +.document-body-wrapper.walkthroughs-body-wrapper { + padding-left: 60px; + padding-right: 60px; + margin-top: 60px; + @media (max-width: $mobile-resolution-max) { + padding-left: 10px; + padding-right: 10px; + } +} .searchInputBanner { padding: 20px 0; .searchIcon { diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 811a8edf5..7cab3f66f 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -240,7 +240,12 @@ $tag-color-light: $lightgrey; /* --- admonitions / status --- */ --note-block-color: var(--rd-sys-color-background-information); --note-border-color: var(--rd-sys-color-border-brand); - --var-note-color: var(--rd-sys-color-content-information); + // --rd-sys-color-content-information is broken in dark mode (see + // --docmap-active-color note above: its dark value in radiant-colors.css + // is the placeholder "x", not a real color), which made the NOTE block's + // left border disappear in dark mode. --rd-sys-color-content-brand is + // byte-identical to it in light mode and valid in both themes. + --var-note-color: var(--rd-sys-color-content-brand); --var-important-color: var(--rd-sys-color-content-failure); --important-block-color: var(--rd-sys-color-background-on-base); @@ -332,6 +337,10 @@ $tag-color-light: $lightgrey; --rel-notes-tag-bg-color: #A0C4FF; --rel-notes-tag-text: #71a1f4; --rel-notes-pill-border: #278CFF; + /* dark-mode-only admonition background — light mode keeps its existing + per-type values (--note-block-color, --important-block-color, + --admonition-background) unchanged */ + --admonition-background-dark: #26282C; /* code-syntax dark set â unchanged */ --code-block-color: #26282C; --code-text-color: #e6edf3;