Briklab Docs

Color Examples ​

Real-world examples and common patterns for using Color in your applications.

CLI Output Styling ​

Create beautifully styled command-line output:

ts
import { Color } from "@briklab/lib/color";

function displayStatus(status: "running" | "success" | "error"): void {
  const colors = {
    running: new Color({ r: 255, g: 193, b: 7 }, "boundary"),
    success: new Color({ r: 76, g: 175, b: 80 }, "boundary"),
    error: new Color({ r: 244, g: 67, b: 54 }, "boundary")
  };

  const message = {
    running: "Processing...",
    success: "Complete!",
    error: "Failed!"
  };

  const color = colors[status];
  const output = color.wrapAnsi(message[status], { bold: true });
  console.log(output);
}

displayStatus("success"); // Green "Complete!"
displayStatus("error");   // Red "Failed!"

Log Level Coloring ​

Color logs by severity level:

ts
import { Color } from "@briklab/lib/color";

class Logger {
  private colors = {
    debug: new Color({ r: 158, g: 158, b: 158 }, "boundary"),
    info: new Color({ r: 66, g: 133, b: 244 }, "boundary"),
    warn: new Color({ r: 255, g: 152, b: 0 }, "boundary"),
    error: new Color({ r: 244, g: 67, b: 54 }, "boundary")
  };

  debug(msg: string): void {
    const colored = this.colors.debug.wrapAnsi(msg);
    console.log(`[DEBUG] ${colored}`);
  }

  info(msg: string): void {
    const colored = this.colors.info.wrapAnsi(msg);
    console.log(`[INFO] ${colored}`);
  }

  warn(msg: string): void {
    const colored = this.colors.warn.wrapAnsi(msg, { bold: true });
    console.log(`[WARN] ${colored}`);
  }

  error(msg: string): void {
    const colored = this.colors.error.wrapAnsi(msg, { bold: true, underline: true });
    console.log(`[ERROR] ${colored}`);
  }
}

const logger = new Logger();
logger.info("Starting application");
logger.warn("Low memory warning");
logger.error("Connection failed");

Live Demo - Styled Output ​

Console
No logs yet.

Progress Bar Coloring ​

Color a progress bar by completion:

ts
import { Color } from "@briklab/lib/color";

class ProgressDisplay {
  showProgress(percent: number): void {
    let color: Color;

    if (percent < 33) {
      color = new Color({ r: 244, g: 67, b: 54 }, "boundary"); // Red
    } else if (percent < 66) {
      color = new Color({ r: 255, g: 152, b: 0 }, "boundary"); // Orange
    } else {
      color = new Color({ r: 76, g: 175, b: 80 }, "boundary"); // Green
    }

    const bar = "█".repeat(Math.floor(percent / 5));
    const empty = "░".repeat(20 - Math.floor(percent / 5));
    const colored = color.wrapAnsi(`[${bar}${empty}] ${percent}%`);
    console.log(colored);
  }
}

const progress = new ProgressDisplay();
progress.showProgress(25);  // Red
progress.showProgress(50);  // Orange
progress.showProgress(100); // Green

Table Output with Colors ​

Create colored tables for display:

ts
import { Color } from "@briklab/lib/color";

class Table {
  private headerColor = new Color({ r: 100, g: 200, b: 255 }, "boundary");
  private rowColor = new Color({ r: 200, g: 200, b: 200 }, "boundary");

  printRow(name: string, value: string, isHeader = false): void {
    const color = isHeader ? this.headerColor : this.rowColor;
    const styled = color.wrapAnsi(`${name}: ${value}`);
    console.log(styled);
  }

  display(): void {
    this.printRow("Name", "Status", true);
    this.printRow("Server", "Running");
    this.printRow("Database", "Connected");
    this.printRow("Cache", "Available");
  }
}

const table = new Table();
table.display();

Next Steps ​