feature: optional selectedListItemText element in themes and luminance-based fallback to solve 4369 (#4572)

Co-authored-by: knanao <nao.7ken@gmail.com>
Co-authored-by: knanao <k@knanao.com>
This commit is contained in:
Ariane Emory
2025-11-23 02:51:07 -05:00
committed by GitHub
parent d75d90c53e
commit 7d11986a0a
8 changed files with 90 additions and 30 deletions

View File

@@ -38,7 +38,7 @@ export function DialogAlert(props: DialogAlertProps) {
dialog.clear()
}}
>
<text fg={theme.background}>ok</text>
<text fg={theme.selectedListItemText}>ok</text>
</box>
</box>
</box>

View File

@@ -53,7 +53,9 @@ export function DialogConfirm(props: DialogConfirmProps) {
dialog.clear()
}}
>
<text fg={key === store.active ? theme.background : theme.textMuted}>{Locale.titlecase(key)}</text>
<text fg={key === store.active ? theme.selectedListItemText : theme.textMuted}>
{Locale.titlecase(key)}
</text>
</box>
)}
</For>

View File

@@ -28,7 +28,7 @@ export function DialogHelp() {
</box>
<box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
<box paddingLeft={3} paddingRight={3} backgroundColor={theme.primary} onMouseUp={() => dialog.clear()}>
<text fg={theme.background}>ok</text>
<text fg={theme.selectedListItemText}>ok</text>
</box>
</box>
</box>

View File

@@ -1,5 +1,5 @@
import { InputRenderable, RGBA, ScrollBoxRenderable, TextAttributes } from "@opentui/core"
import { useTheme } from "@tui/context/theme"
import { useTheme, selectedForeground } from "@tui/context/theme"
import { entries, filter, flatMap, groupBy, pipe, take } from "remeda"
import { batch, createEffect, createMemo, For, Show, type JSX } from "solid-js"
import { createStore } from "solid-js/store"
@@ -262,32 +262,29 @@ function Option(props: {
onMouseOver?: () => void
}) {
const { theme } = useTheme()
const fg = selectedForeground(theme)
return (
<>
<Show when={props.current}>
<text
flexShrink={0}
fg={props.active ? theme.background : props.current ? theme.primary : theme.text}
marginRight={0.5}
>
<text flexShrink={0} fg={props.active ? fg : props.current ? theme.primary : theme.text} marginRight={0.5}>
</text>
</Show>
<text
flexGrow={1}
fg={props.active ? theme.background : props.current ? theme.primary : theme.text}
fg={props.active ? fg : props.current ? theme.primary : theme.text}
attributes={props.active ? TextAttributes.BOLD : undefined}
overflow="hidden"
wrapMode="none"
paddingLeft={3}
>
{Locale.truncate(props.title, 62)}
<span style={{ fg: props.active ? theme.background : theme.textMuted }}> {props.description}</span>
<span style={{ fg: props.active ? fg : theme.textMuted }}> {props.description}</span>
</text>
<Show when={props.footer}>
<box flexShrink={0}>
<text fg={props.active ? theme.background : theme.textMuted}>{props.footer}</text>
<text fg={props.active ? fg : theme.textMuted}>{props.footer}</text>
</box>
</Show>
</>