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| +++
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.
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 6ecb6ed39..e0da410bd 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.
@@ -1226,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/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..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;
@@ -175,8 +175,93 @@ $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);
+ --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);
+ --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 +271,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(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-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 +304,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(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;
+
+ /* main content surface reads darker/blacker than the raised header/left-nav in the product */
+ --body-background-color: #1F2024;
+ --table-header-bg: #26282C;
+ --copy-page-menu-bg: #26282C;
+
+ /* code-syntax dark set â unchanged */
+ --code-block-color: #26282C;
--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 +355,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/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/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 47c9a64c9..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 ────────────────────────────────────────── */
@@ -203,9 +244,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 +268,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 +276,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 +326,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 +337,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 +380,40 @@
table {
border-spacing: 0;
border-collapse: separate;
+ border-top: 1px solid var(--border-color);
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+ table-layout: fixed;
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;
+ code {
+ overflow-wrap: break-word;
+ word-break: break-word;
+ white-space: normal;
+ }
+
p {
- font-size: 13.5px;
+ font-size: 13px;
margin: 3px 0;
}
}
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..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 1px #1B3E61;
+ box-shadow: 0 0 1px 0 var(--secondary-header-border);
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;
@@ -48,19 +50,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 +111,7 @@
&:hover {
background: rgba(255, 255, 255, 0.1);
- color: #A9E8FF;
+ color: var(--nav-accent-color);
}
}
@@ -128,7 +146,7 @@
&:hover {
background: rgba(169, 232, 255, 0.08);
- color: #A9E8FF;
+ color: var(--nav-accent-color);
}
}
@@ -164,7 +182,7 @@
flex-shrink: 0;
&:hover {
- color: #A9E8FF;
+ color: var(--nav-accent-color);
background: rgba(169, 232, 255, 0.06);
}
}
@@ -196,7 +214,7 @@
white-space: nowrap;
&:hover {
- color: #A9E8FF;
+ color: var(--nav-accent-color);
background: rgba(169, 232, 255, 0.06);
}
}
@@ -247,13 +265,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: {
-