This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new d6fd05fa0f85 [fix](website) Restore Ask AI control contrast (#4481)
d6fd05fa0f85 is described below
commit d6fd05fa0f856087e6e8d5b452801f90c4a096b6
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Fri Oct 23 14:17:53 2026 +0100
[fix](website) Restore Ask AI control contrast (#4481)
## Summary
The Ask AI attachment button appears as a solid dark circle, and
Fast/Thinking labels can disappear after toggling. The theme bridge
overrides every action-icon background and mistakes neutral black text
and icons for brand colors.
Replace DOM recoloring with `Kapa.updateConfig`, passing the current
`--brand-primary` as `data-project-color`. Kapa then recalculates its
palette and contrasting text. The existing modal positioning and
scrolling styles remain unchanged.
## Validation
- `node --check static/js/custom-script.js`
- `git diff --check`
- Browser checks with the current Kapa widget and repository theme
tokens at 1440 × 1100 and 390 × 844 across all eight brand themes,
including repeated Fast/Thinking toggles and text/icon contrast checks.
- Verified attachment file chooser, keyboard toggling,
Escape/close/reopen, saved-theme initialization, and preservation of
draft input and selected mode during theme changes.
- Used a temporary browser fixture; the full Docusaurus build was not
run.
## Versions
- [ ] dev
- [ ] 4.x
- [ ] 3.x
- [ ] 2.1 or older (not covered by version/language sync gate)
## Languages
- [ ] Chinese
- [ ] English
This shared site script applies to all versions and locales. No
documentation counterparts require changes.
## Docs Checklist
- [x] Checked by AI
- [x] Test Cases Built
- [x] Updated required version and language counterparts, or explained
why not
- [x] If only one language changed, confirmed whether source/translation
counterparts need sync
Co-authored-by: morningman <[email protected]>
---
static/js/custom-script.js | 56 +++++++++-------------------------------------
1 file changed, 10 insertions(+), 46 deletions(-)
diff --git a/static/js/custom-script.js b/static/js/custom-script.js
index fbc6d2c50747..ec3756e910b5 100644
--- a/static/js/custom-script.js
+++ b/static/js/custom-script.js
@@ -183,16 +183,6 @@
// `align-items: center` once content exceeds the viewport.
(function centerKapaModal() {
var STYLE_ID = 'doris-kapa-center-modal';
- var BRAND_COLORS = [
- 'rgb(17, 166, 121)',
- 'rgb(123, 44, 191)',
- 'rgb(44, 44, 52)',
- 'rgb(18, 18, 18)',
- 'rgb(0, 102, 255)',
- 'rgb(114, 85, 165)',
- 'rgb(0, 0, 0)',
- 'rgb(55, 120, 176)',
- ];
// Top padding clears the sticky NavbarNext + 16px gap so the modal header
// is never tucked under the navbar when content fills the screen.
var CSS_TEXT =
@@ -221,37 +211,17 @@
'@media(max-width:768px){' +
'.mantine-Modal-inner{padding-top:176px !important;}' +
'.mantine-Modal-content{max-height:calc(100vh - 176px - 2rem)
!important;}' +
- '}' +
- // Mantine writes Kapa's configured project color into component-level
- // custom properties. Point those back to the site tokens so an
- // already-mounted widget also follows runtime theme changes.
- '[style*="--ai-bg"]{' +
- '--ai-bg:var(--brand-primary) !important;' +
- '--ai-hover:var(--brand-primary-deep) !important;' +
'}';
- function syncBrandColors(shadowRoot) {
- shadowRoot.querySelectorAll('*').forEach(function (element) {
- var style = window.getComputedStyle(element);
- if (
- BRAND_COLORS.indexOf(style.color) !== -1 &&
- element.style.getPropertyValue('color') !==
'var(--brand-primary)'
- ) {
- element.style.setProperty('color', 'var(--brand-primary)',
'important');
- }
- if (
- BRAND_COLORS.indexOf(style.backgroundColor) !== -1 &&
- element.style.getPropertyValue('background-color') !==
'var(--brand-primary)'
- ) {
- element.style.setProperty('background-color',
'var(--brand-primary)', 'important');
- }
- if (
- BRAND_COLORS.indexOf(style.borderColor) !== -1 &&
- element.style.getPropertyValue('border-color') !==
'var(--brand-primary)'
- ) {
- element.style.setProperty('border-color',
'var(--brand-primary)', 'important');
- }
- });
+ function syncProjectColor() {
+ if (!window.Kapa || typeof window.Kapa.updateConfig !== 'function')
return;
+ var projectColor = window.getComputedStyle(document.documentElement)
+ .getPropertyValue('--brand-primary').trim();
+ if (!projectColor) return;
+ // Let Kapa recalculate its palette and contrasting text when the brand
+ // changes. Recoloring matching DOM colors also catches neutral black
+ // text/icons, and overriding every --ai-bg fills the attachment
button.
+ window.Kapa.updateConfig({ 'data-project-color': projectColor });
}
function inject() {
@@ -263,13 +233,7 @@
style.textContent = CSS_TEXT;
host.shadowRoot.appendChild(style);
}
- if (!host.__dorisBrandObserver) {
- host.__dorisBrandObserver = new MutationObserver(function () {
- syncBrandColors(host.shadowRoot);
- });
- host.__dorisBrandObserver.observe(host.shadowRoot, { childList:
true, subtree: true });
- }
- syncBrandColors(host.shadowRoot);
+ syncProjectColor();
return true;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
