Skip to main content

Style Builder

The style builder provides a fluent, chainable API for creating complex text styles. It's the most powerful way to style text in Logluxe.

Basic Usage​

log.paint(text)​

Start a style chain with paint(), add styles, then call print():

log.paint('Hello World')
  .red()
  .bold()
  .print();
Output
Hello World
🎮 Try Style Builder

Method Chaining​

Chain multiple styles together in any order:

log.paint('CRITICAL ERROR')
  .white()        // Text color
  .bgRed()        // Background color
  .bold()         // Bold text
  .underline()    // Underlined
  .print();       // Output to console
Output
CRITICAL ERROR

Available Styles​

Text Colors​

log.paint('text').black().print();
log.paint('text').red().print();
log.paint('text').green().print();
log.paint('text').yellow().print();
log.paint('text').blue().print();
log.paint('text').magenta().print();
log.paint('text').cyan().print();
log.paint('text').white().print();
log.paint('text').gray().print();
Text Colors

black | red | green | yellow | blue | magenta | cyan | white | gray

Bright Text Colors​

log.paint('text').brightRed().print();
log.paint('text').brightGreen().print();
log.paint('text').brightYellow().print();
log.paint('text').brightBlue().print();
log.paint('text').brightMagenta().print();
log.paint('text').brightCyan().print();
Bright Colors

brightRed | brightGreen | brightYellow | brightBlue | brightMagenta | brightCyan

Background Colors​

log.paint('text').bgBlack().print();
log.paint('text').bgRed().print();
log.paint('text').bgGreen().print();
log.paint('text').bgYellow().print();
log.paint('text').bgBlue().print();
log.paint('text').bgMagenta().print();
log.paint('text').bgCyan().print();
Background Colors
bgBlackbgRedbgGreenbgYellowbgBluebgMagentabgCyan

Text Styles​

log.paint('Bold text').bold().print();
log.paint('Dim text').dim().print();
log.paint('Italic text').italic().print();
log.paint('Underlined').underline().print();
log.paint('Inverted').inverse().print();
log.paint('Strikethrough').strikethrough().print();
Text Styles
Bold text
Dim text
Italic text
Underlined
Inverted
Strikethrough

Combining Styles​

Multiple Styles​

// Error badge
log.paint(' ERROR ')
  .white()
  .bgRed()
  .bold()
  .print();

// Success message
log.paint('✓ All tests passed')
  .green()
  .bold()
  .print();

// Warning with underline
log.paint('Deprecated: Use newMethod()')
  .yellow()
  .italic()
  .underline()
  .print();

// Muted debug info
log.paint('Debug: Variable = 42')
  .gray()
  .dim()
  .print();
Combined Styles
ERROR
✓ All tests passed
Deprecated: Use newMethod()
Debug: Variable = 42
🎮 Try Combined Styles

Style Combinations Reference​

Use CaseCombinationExample
Error.white().bgRed().bold()ERROR
Success.green().bold()SUCCESS
Warning.yellow().bold()WARNING
Info.cyan()INFO
Debug.gray().dim()DEBUG
Highlight.black().bgYellow()HIGHLIGHT
Link.cyan().underline()LINK
Code.green().bgBlack()CODE
Critical.white().bgRed().bold().underline()CRITICAL

Getting String Output​

toString()​

Get the styled string without printing:

const styled = log.paint('Hello')
  .cyan()
  .bold()
  .toString();

// Use the styled string elsewhere
console.log(`Message: ${styled}`);

Building Complex Messages​

const label = log.paint('[INFO]').cyan().bold().toString();
const message = log.paint('Server started').white().toString();
const port = log.paint('3000').yellow().bold().toString();

console.log(`${label} ${message} on port ${port}`);
Output
[INFO] Server started on port 3000

Practical Examples​

Status Badges​

function badge(text, type) {
  const builder = log.paint(` ${text} `);
  
  switch (type) {
    case 'success':
      builder.white().bgGreen().bold();
      break;
    case 'error':
      builder.white().bgRed().bold();
      break;
    case 'warning':
      builder.black().bgYellow().bold();
      break;
    case 'info':
      builder.white().bgBlue().bold();
      break;
  }
  
  builder.print();
}

badge('PASS', 'success');
badge('FAIL', 'error');
badge('WARN', 'warning');
badge('INFO', 'info');
Badges
PASS FAIL WARN INFO
🎮 Try Badges

CLI Menu​

function printMenu(options, selected) {
  options.forEach((option, index) => {
    if (index === selected) {
      log.paint(`> ${option}`)
        .cyan()
        .bold()
        .print();
    } else {
      log.paint(`  ${option}`)
        .gray()
        .print();
    }
  });
}

printMenu(['Create new project', 'Open existing', 'Settings', 'Exit'], 1);
CLI Menu
Create new project
> Open existing
Settings
Exit

Progress Spinner States​

function showSpinner(state, message) {
  const states = {
    loading: { icon: '◌', color: 'cyan' },
    success: { icon: '✓', color: 'green' },
    error: { icon: '✗', color: 'red' },
    warning: { icon: '⚠', color: 'yellow' }
  };
  
  const { icon, color } = states[state];
  const iconStyled = log.paint(icon)[color]().bold().toString();
  
  console.log(`${iconStyled} ${message}`);
}

showSpinner('loading', 'Installing dependencies...');
showSpinner('success', 'Dependencies installed');
showSpinner('warning', 'Some packages deprecated');
showSpinner('error', 'Failed to install webpack');
Spinner States
◌ Installing dependencies...
✓ Dependencies installed
⚠ Some packages deprecated
✗ Failed to install webpack
🎮 Try Spinner States

Git-style Diff Output​

function printDiff(lines) {
  lines.forEach(line => {
    if (line.startsWith('+')) {
      log.paint(line).green().print();
    } else if (line.startsWith('-')) {
      log.paint(line).red().print();
    } else if (line.startsWith('@')) {
      log.paint(line).cyan().print();
    } else {
      log.paint(line).gray().print();
    }
  });
}

printDiff([
  '@@ -1,4 +1,4 @@',
  ' const name = "app";',
  '-const version = "1.0.0";',
  '+const version = "1.1.0";',
  ' export { name, version };'
]);
Git Diff
@@ -1,4 +1,4 @@
const name = "app";
-const version = "1.0.0";
+const version = "1.1.0";
export { name, version };
🎮 Try Diff Output

Next: Inline Tags →