From ee35359ed8061fcb41f1208c2fc01097f99a47cd Mon Sep 17 00:00:00 2001 From: Cindy Zhang Date: Sat, 1 Aug 2026 10:40:06 +0000 Subject: [PATCH 1/2] fix(Chat): add missing themeProps and fix className clobber in send button ChatSendButton: the themeProps className was overwritten by a subsequent explicit className prop, losing the astryx-chat-send-button targeting class when consumers pass className. Use mergeProps to concatenate both. ChatDictationButton, ChatLayoutScrollButton: add themeProps calls so themes can target these components via their stable astryx-* class names. --- .../templates/themes/neutral/neutralTheme.ts | 36 ++++++++++++++++++- .../core/src/Chat/ChatDictationButton.tsx | 8 ++++- .../core/src/Chat/ChatLayoutScrollButton.tsx | 8 ++++- packages/core/src/Chat/ChatSendButton.tsx | 5 ++- 4 files changed, 51 insertions(+), 6 deletions(-) diff --git a/packages/cli/assets/templates/themes/neutral/neutralTheme.ts b/packages/cli/assets/templates/themes/neutral/neutralTheme.ts index e63208148881..ace0fd91ecf7 100644 --- a/packages/cli/assets/templates/themes/neutral/neutralTheme.ts +++ b/packages/cli/assets/templates/themes/neutral/neutralTheme.ts @@ -144,7 +144,10 @@ export const neutralTheme = defineTheme({ // Text '--color-text-primary': ['#171717', '#fafafa'], - '--color-text-secondary': ['#737373', '#a3a3a3'], + // Light secondary is neutral-600 (#525252), not 500 (#737373): 500 only + // reaches 4.19:1 on the T95 body (#f1f1f1), just under WCAG AA 4.5:1. + // 600 clears it (6.9:1 on body, 7.8:1 on card). Dark stays neutral-400. + '--color-text-secondary': ['#525252', '#a3a3a3'], '--color-text-disabled': ['#a3a3a3', '#525252'], '--color-text-accent': ['#262626', '#ebebeb'], '--color-on-dark': '#ffffff', @@ -482,6 +485,37 @@ export const neutralTheme = defineTheme({ }, }, + // ========================================================================= + // StatusDot — fill uses the SAME vivid stops as the filled semantic Badge + // (and ProgressBar), so a dot and its badge read as one status language. + // + // The default component maps each variant to a raw semantic token + // (--color-success / --color-error / --color-warning / --color-icon- + // secondary), which in light mode are the dark T30/T40 stops meant to + // sit as TEXT on a pastel surface — as a solid dot they read muddy + // (dark green / maroon / brown). Redirect them to the badge fills. + // + // success → badge success bg (green T45 / dark-ramp T60) + // warning → badge warning bg (yellow T85, same hex both modes) + // error → badge error bg (red T55 / dark-ramp T60) + // accent → badge info bg (blue T50 / dark-ramp T60) — the + // StatusDot "accent" is the info/attention color, so it + // pairs with the info badge rather than --color-accent + // (near-black #262626, the darkest offender). + // + // `neutral` is intentionally NOT overridden: the neutral badge bg is a + // near-invisible light gray (--color-background-gray #e5e5e5 / 10% white + // wash), fine as a large pill but unreadable as an 8px dot. It keeps the + // component default's visible mid-gray (--color-icon-secondary), which is + // not among the "too dark" cases. + // ========================================================================= + statusdot: { + 'variant:success': {backgroundColor: 'light-dark(#198100, #64af4c)'}, + 'variant:warning': {backgroundColor: '#ffce2f'}, + 'variant:error': {backgroundColor: 'light-dark(#e33f4a, #ff705d)'}, + 'variant:accent': {backgroundColor: 'light-dark(#0074e2, #6d9cfe)'}, + }, + // ========================================================================= // Banner — sits on a hue-tinted surface with colored text/icon: // Light: pastel T90 bg (pulled from --color-{X}-muted / --color-background-blue) diff --git a/packages/core/src/Chat/ChatDictationButton.tsx b/packages/core/src/Chat/ChatDictationButton.tsx index b3f05d8c8e1d..bea36aaed06a 100644 --- a/packages/core/src/Chat/ChatDictationButton.tsx +++ b/packages/core/src/Chat/ChatDictationButton.tsx @@ -26,6 +26,7 @@ import {Button} from '../Button'; import {Icon} from '../Icon'; import {mergeProps} from '../utils'; import type {BaseProps} from '../BaseProps'; +import {themeProps} from '../utils/themeProps'; import {useTranslator} from '../i18n'; // ============================================================================= @@ -140,7 +141,12 @@ export function ChatDictationButton({ return ( {isListening && (
); From 4310d38f83d98dd78a46ef35d750460a88cd5ca3 Mon Sep 17 00:00:00 2001 From: cixzhang Date: Mon, 3 Aug 2026 16:28:45 +0000 Subject: [PATCH 2/2] fix(Chat): document new theme targets --- packages/core/src/Chat/Chat.doc.mjs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core/src/Chat/Chat.doc.mjs b/packages/core/src/Chat/Chat.doc.mjs index 79b45023bd8d..4f60f135b882 100644 --- a/packages/core/src/Chat/Chat.doc.mjs +++ b/packages/core/src/Chat/Chat.doc.mjs @@ -26,6 +26,8 @@ export const docs = { {className: 'astryx-chat-system-message', visualProps: ['variant']}, {className: 'astryx-chat-message-metadata'}, {className: 'astryx-chat-send-button'}, + {className: 'astryx-chat-dictation-button'}, + {className: 'astryx-chat-layout-scroll-button'}, {className: 'astryx-chat-tokenized-text'}, {className: 'astryx-chat-tool-calls'}, {className: 'astryx-trigger-menu'},