itty-chroma

v1 Documentation  |   Discord

---

Powerful styling for the browser console in under 500 bytes.

Example

import { chroma } from 'itty-chroma'

// keep it simple
chroma.red.log('This will be red.')

// or play a little
chroma.log(
  chroma.green,                // set the color to green
  'This is all',
  'green.',
  chroma.blue.underline.bold,  // now switch to blue
  'Now this is blue.',
)

Features

• Tiny. It's an itty library, after all.
• Made specifically for the browser console.
• Loads of styling options, with infinite combinations.
• Simple and powerful API, designed for ease & readability.

How it Works

Chroma is an infinite proxy object/function chain... thingy... that assembles styles before sending them to console.log.

This sounds very confusing... which is understandable, because it was confusing to write as well.

Here are the basic rules:

1. Use chroma.log (also supports warn and error) to enable styling

chroma.log('text') // console.log('text')
chroma.warn('text') // console.warn('text')
chroma.error('text') // console.error('text')

2. Add styles by chaining style properties

// call a segment directly, using .log
chroma.bold.red.log('This will be red.')

3. Or compose using chroma segments

chroma.log(
  chroma.bold.green, 
  'This will be green.'
)

These can be saved for re-use:

const blue = chroma.bold.blue

chroma.log(
  blue,
  'This will be blue.'
)

They can also be saved with the .log as a custom logger:

const ittyLogger = chroma.bold.color("#f0c").log

ittyLogger('This will be itty-colored.')

4. Any valid CSS color name works (100% support)

chroma.salmon.log('This is salmon.')
chroma.cornflowerblue.log('This is cornflowerblue.')
chroma.cornFlowerBlue.log('Case does not matter here...')

5. All valid CSS works within properties that expect a value

chroma
  .color('rgba(255,0,100,0.4)')
  .log('This works just fine')

6. ...or use your own custom CSS with .style(css: string)

chroma
  .size('2em')
  .padding('0.5em')
  .style('text-transform:uppercase; text-shadow:0 0 0.5em magenta;')
  .log('So does this')

7. A style will continue until replaced, or cleared using chroma.none

chroma.log(
  chroma.red('this will be red'),
  '...but so will this',
  chroma.clear,
  'back to unformatted text'
)

8. Example: Creating custom log functions

// we define a curried function to accept some args now, some later
const createLogger = (type = 'log', label, badge = 'grey', text = 'grey') => 
  (...args) => 
    chroma[type](
      chroma.bg(badge).white.bold.padding('2px 5px 1px').radius('0.2rem')(label),
      chroma.color(text).italic,
      ...args,
    )

// our loggers are partial executions
const info = createLogger('log', 'INFO', 'green')
const warning = createLogger('warn', 'WARNING', 'orange', 'brown')

// and we finally call them to log messages
info('This is just a helpful bit of info!')
warning('But this is a more serious warning text...')

Supported Properties

PROPERTY	DESCRIPTION	EXAMPLE(s)
.log	once executed, will output to console.log	chroma.log('hello')
.warn	once executed, will output to console.warn	chroma.warn('warning text')
.error	once executed, will output to console.error	chroma.error('error text')
.bold	bold text	chroma.bold('this is bold'), chroma.bold.red('this is bold and red')
.italic	italicized text	chroma.italic('this is italic')
.underline	underlined text	chroma.underline('text')
.strike	text with a line through it	chroma.strike('this text was removed')
.{colorName}	sets text color, supports any valid CSS color name	chroma.magenta, chroma.lightGreen
.color(value)	sets font color, supports any valid CSS color	chroma.color('white'), chroma.color('rgba(255,0,0,0.2)')
.font(value)	sets font, supports any valid CSS font-family	chroma.font('Georgia')
.size(value)	sets font size	chroma.size('0.8rem')
.bg(value)	sets background, supports any valid CSS background	chroma.bg('salmon')
.radius(value)	sets border-radius (for badges)	chroma.radius('4px')
.border(value)	sets border style	chroma.border('double 5px red')
.padding(value)	sets padding	chroma.padding('2px 5px')
.style(value)	sets custom CSS, allowing any valid sequence	chroma.style('text-transform:uppercase;text-shadow:0 0 0.5rem rgba(255,0,100,0.5)')
.none1	clears styling for subsequent arguments	chroma.red('red text', chroma.none, 'plain text')

¹ Any invalid CSS color name can be used in place of chroma.none, as this utimately turns into "color:none;". Alternatively, you could use chroma.clear, chroma.noStyle, or anything else.