procedure-cli 0.1.5 → 0.1.7

package/src/steps/powerline.tsx

@@ -5,6 +5,7 @@ import { GutterLine } from "../components/gutter-line.js";
 import { setupPowerline } from "../lib/powerline.js";
 import { initGit } from "../lib/git.js";
 import type { WizardAnswers } from "../lib/types.js";
+import { C } from "../theme.js";
 
 interface Props {
   answers: WizardAnswers;
@@ -79,7 +80,7 @@ export default function Powerline({ answers, onComplete }: Props) {
       <>
         {wantPowerline && (
           <GutterLine>
-            <Text dimColor>Powerline: yes</Text>
+            <Text color={C.overlay1}>Powerline: yes</Text>
           </GutterLine>
         )}
         <GutterLine>
@@ -112,7 +113,7 @@ export default function Powerline({ answers, onComplete }: Props) {
   if (phase === "error") {
     return (
       <GutterLine>
-        <Text color="red">Setup error: {errorMsg}</Text>
+        <Text color={C.red}>Setup error: {errorMsg}</Text>
       </GutterLine>
     );
   }
@@ -121,26 +122,26 @@ export default function Powerline({ answers, onComplete }: Props) {
     <>
       {wantPowerline && (
         <GutterLine>
-          <Text color="green">Powerline configured.</Text>
+          <Text color={C.green}>Powerline configured.</Text>
         </GutterLine>
       )}
       {wantGit && setupResult.gitCommitted && (
         <GutterLine>
-          <Text color="green">Git repository initialized.</Text>
+          <Text color={C.green}>Git repository initialized.</Text>
         </GutterLine>
       )}
       {wantGit && !setupResult.gitCommitted && setupResult.gitWarning && (
         <GutterLine>
-          <Text color="yellow">{"⚠ Git: "}{setupResult.gitWarning}</Text>
+          <Text color={C.peach}>{"⚠ Git: "}{setupResult.gitWarning}</Text>
         </GutterLine>
       )}
       {!wantPowerline && !wantGit && (
         <GutterLine>
-          <Text dimColor>No extras setup.</Text>
+          <Text color={C.overlay1}>No extras setup.</Text>
         </GutterLine>
       )}
       <GutterLine>
-        <Text color="green" bold>
+        <Text color={C.green} bold>
           Setup complete!
         </Text>
       </GutterLine>

package/src/steps/product-context.tsx

@@ -4,6 +4,7 @@ import { TextInput } from "@inkjs/ui";
 import { GutterLine } from "../components/gutter-line.js";
 import { GutteredMultiSelect } from "../components/guttered-select.js";
 import type { WizardAnswers } from "../lib/types.js";
+import { C } from "../theme.js";
 
 interface Props {
   initialValues?: Partial<WizardAnswers>;
@@ -122,7 +123,7 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
   // Build completed fields display
   const completedFields = PHASE_ORDER.slice(0, phaseIndex).map((key) => (
     <GutterLine key={key}>
-      <Text dimColor>
+      <Text color={C.overlay1}>
         {key === "problem" && `Problem: ${answers[key]}`}
         {key === "users" && `Users: ${answers[key]}`}
         {key === "techStack" && `Tech stack: ${answers[key]}`}
@@ -199,7 +200,7 @@ export default function ProductContext({ initialValues, onComplete }: Props) {
 
       {error && (
         <GutterLine>
-          <Text color="red">{error}</Text>
+          <Text color={C.red}>{error}</Text>
         </GutterLine>
       )}
     </>

package/src/steps/project-info.tsx

@@ -4,6 +4,7 @@ import { TextInput } from "@inkjs/ui";
 import { GutterLine } from "../components/gutter-line.js";
 import { GutteredSelect } from "../components/guttered-select.js";
 import type { WizardAnswers } from "../lib/types.js";
+import { C } from "../theme.js";
 
 interface Props {
   onComplete: (answers: Partial<WizardAnswers>) => void;
@@ -74,7 +75,7 @@ export default function ProjectInfo({ onComplete }: Props) {
   // Render completed fields
   const completed = STEP_ORDER.slice(0, stepIndex).map((key) => (
     <GutterLine key={key}>
-      <Text dimColor>
+      <Text color={C.overlay1}>
         {key === "projectName" && `Project name: ${answers[key]}`}
         {key === "description" && `Description: ${answers[key]}`}
         {key === "packageManager" && `Package manager: ${answers[key]}`}
@@ -127,7 +128,7 @@ export default function ProjectInfo({ onComplete }: Props) {
 
       {error && (
         <GutterLine>
-          <Text color="red">{error}</Text>
+          <Text color={C.red}>{error}</Text>
         </GutterLine>
       )}
     </>

package/src/steps/stack-style.tsx

@@ -3,6 +3,7 @@ import { Text } from "ink";
 import { GutterLine } from "../components/gutter-line.js";
 import { GutteredSelect, GutteredMultiSelect } from "../components/guttered-select.js";
 import type { WizardAnswers } from "../lib/types.js";
+import { C } from "../theme.js";
 
 interface Props {
   onComplete: (answers: Partial<WizardAnswers>) => void;
@@ -153,7 +154,7 @@ export default function StackStyle({ onComplete }: Props) {
     return (
       <>
         <GutterLine>
-          <Text dimColor>Languages: {selectedLanguages.join(", ")}</Text>
+          <Text color={C.overlay1}>Languages: {selectedLanguages.join(", ")}</Text>
         </GutterLine>
         <GutterLine>
           <Text bold>Frameworks:</Text>
@@ -176,10 +177,10 @@ export default function StackStyle({ onComplete }: Props) {
   return (
     <>
       <GutterLine>
-        <Text dimColor>Languages: {selectedLanguages.join(", ")}</Text>
+        <Text color={C.overlay1}>Languages: {selectedLanguages.join(", ")}</Text>
       </GutterLine>
       <GutterLine>
-        <Text dimColor>Frameworks: {selectedFrameworks.join(", ")}</Text>
+        <Text color={C.overlay1}>Frameworks: {selectedFrameworks.join(", ")}</Text>
       </GutterLine>
       <GutterLine>
         <Text bold>Code style conventions:</Text>

package/src/theme.ts

@@ -0,0 +1,15 @@
+/**
+ * Catppuccin Mocha palette — https://catppuccin.com/palette
+ * Use these constants for all terminal colors. Never use named terminal
+ * colors (cyan, green, red…) — hex values render consistently across terminals.
+ */
+export const C = {
+  mauve:    '#cba6f7',  // active step, current focus
+  green:    '#a6e3a1',  // completed steps, success
+  sapphire: '#74c7ec',  // section headers, accent
+  teal:     '#94e2d5',  // secondary accent (custom option)
+  red:      '#f38ba8',  // errors
+  peach:    '#fab387',  // warnings
+  overlay1: '#7f849c',  // gutter lines, dim text, hints
+  overlay0: '#6c7086',  // pending steps, very dim
+} as const;