adjust hue accessors

Author: jlongster

packages/tui/src/component/prompt/index.tsx

@@ -1576,7 +1576,7 @@ export function Prompt(props: PromptProps) {
             <Match when={move.progress()}>
               {(progress) => (
                 <box paddingLeft={3}>
-                  <Spinner color={themeV2.hue().accent[300]}>
+                  <Spinner color={themeV2.hue.accent(500)}>
                     {progress()}
                     <span style={{ fg: themeV2.text.subdued() }}>{".".repeat(move.creatingDots())}</span>
                   </Spinner>
@@ -1585,7 +1585,7 @@ export function Prompt(props: PromptProps) {
             </Match>
             <Match when={move.pendingNew()}>
               <box paddingLeft={3}>
-                <text fg={themeV2.hue().accent[300]}>(new working copy)</text>
+                <text fg={themeV2.hue.accent(500)}>(new working copy)</text>
               </box>
             </Match>
             <Match when={true}>
@@ -1607,7 +1607,7 @@ export function Prompt(props: PromptProps) {
                 <text
                   fg={
                     editorContextLabelState() === "pending"
-                      ? themeV2.hue().accent[500]
+                      ? themeV2.hue.accent(500)
                       : themeV2.text.subdued()
                   }
                 >

packages/tui/src/context/local.tsx

@@ -84,7 +84,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         current: undefined as string | undefined,
       })
       const colors = createMemo(() => [
-        themeV2.hue().accent[500],
+        themeV2.hue.accent(500),
         theme.accent,
         theme.success,
         theme.warning,

packages/tui/src/routes/session/form.tsx

@@ -754,7 +754,7 @@ export function FormPrompt(props: { form: FormWithLocation }) {
     <box
       backgroundColor={themeV2.background()}
       border={["left"]}
-      borderColor={themeV2.hue().accent[300]}
+      borderColor={themeV2.hue.accent(500)}
       customBorderChars={SplitBorder.customBorderChars}
     >
       <box gap={1} paddingLeft={1} paddingRight={3} paddingTop={1} paddingBottom={1}>

packages/tui/src/routes/session/index.tsx

@@ -1601,7 +1601,7 @@ function UserMessage(props: { message: SessionMessageUser }) {
                     <text fg={themeV2.text()}>
                       <span
                         style={{
-                          bg: themeV2.hue().accent[500],
+                          bg: themeV2.hue.accent(500),
                           fg: themeV2.background(),
                           bold: true,
                         }}

packages/tui/src/theme/v2/component.ts

@@ -7,13 +7,26 @@ import type {
   ResolvedActionState,
   ResolvedFormfieldState,
   ResolvedThemeView,
+  HueStep,
 } from "./index"
 
 export function createComponentTheme(current: Accessor<ResolvedThemeView>) {
   const textAction = actions((variant, state) => current().text.action[variant][state])
   const backgroundAction = actions((variant, state) => current().background.action[variant][state])
   const textFormfield = formfield((state) => current().text.formfield[state])
   const backgroundFormfield = formfield((state) => current().background.formfield[state])
+  const hue = {
+    gray: (step: HueStep) => current().hue.gray[step],
+    red: (step: HueStep) => current().hue.red[step],
+    orange: (step: HueStep) => current().hue.orange[step],
+    yellow: (step: HueStep) => current().hue.yellow[step],
+    green: (step: HueStep) => current().hue.green[step],
+    cyan: (step: HueStep) => current().hue.cyan[step],
+    blue: (step: HueStep) => current().hue.blue[step],
+    purple: (step: HueStep) => current().hue.purple[step],
+    accent: (step: HueStep) => current().hue.accent[step],
+    neutral: (step: HueStep) => current().hue.neutral[step],
+  }
   const text = Object.assign(() => current().text.default, {
     subdued: () => current().text.subdued,
     action: textAction,
@@ -62,7 +75,7 @@ export function createComponentTheme(current: Accessor<ResolvedThemeView>) {
   }
 
   return {
-    hue: () => current().hue,
+    hue,
     text,
     background,
     border: () => current().border.default,

packages/tui/test/theme/v2/component.test.ts

@@ -15,6 +15,8 @@ test("provides reactive property, variant, state, and context accessors", () =>
   })
 
   expect(theme.text()).toBe(resolved().text.default)
+  expect(theme.hue.accent(500)).toBe(resolved().hue.accent[500])
+  expect(theme.hue.gray(200)).toBe(resolved().hue.gray[200])
   expect(theme.text.subdued()).toBe(resolved().text.subdued)
   expect(theme.text.action()).toBe(resolved().text.action.primary.default)
   expect(theme.text.action.primary("pressed")).toBe(resolved().text.action.primary.pressed)