itty-chroma - npm Package Compare versions

Comparing version 0.1.16 to 0.1.17

package.json

		{
		"name": "itty-chroma",
		"version": "0.1.16",
		"version": "0.1.17",
		"description": "Powerful styling for the browser console in under 500 bytes.",
		@@ -5,0 +5,0 @@ "main": "./chroma.js",

README.md

		@@ -31,29 +31,24 @@ <br />
		```ts
		import { chroma } from 'itty-chroma'
		// keep it simple
		chroma.red.log('This will be red.')

		// KEEP IT SIMPLE
		chroma.red.bold.log('This is bold red text')

		// OR GO WILD
		const badge = chroma.padding('3px 6px').bg('#444').white.radius('3px')
		const description = chroma.italic.color('#666').size('0.9em')

		// or play a little
		chroma.log(
		badge('Did You Know?'), // pass args directly to any chroma segment
		description, // or drop them inline to change style
		'this is now in smaller, italic text',
		'and so is this... until we switch styles again',
		chroma.none,
		'but this is back to normal!'
		chroma.green, // set the color to green
		'This is all',
		'green.',
		chroma.blue.underline.bold, // now switch to blue
		'Now this is blue.',
		)
		```
		![image](https://github.com/user-attachments/assets/7f84014b-97e1-474f-8020-3430efd3e0c6)

		![image](https://github.com/user-attachments/assets/ef7ecf70-4a91-46fa-a2e9-61c9d942d412)

		# How it Works

		Call/access properties to add multiple styles, then call the function itself to trigger the output.
		Chroma is an infinite proxy object/function chain... thingy... that assembles styles before sending them to `console.log`.

		Otherwise, it follows the following behaviors:
		This sounds very confusing... which is understandable, because it was confusing to write as well.

		## Here are the basic rules:

		### 1. Use `chroma.log` (or warn/error) to output to console.
		@@ -68,3 +63,3 @@ ```ts

		### 2. Chroma segments
		### 2. Use chroma segments to apply styles
		You can call them directly:
		@@ -177,6 +172,4 @@ ```ts

		Chroma exposes an infinitely-chainable function/object, allowing you to chain styles.
		Here's the complete list of supported chroma properties. All unlisted properties will be interpreted as a CSS color name (invalid colors simply clear the style).

		You can also use chroma style definitions as arguments inside _other_ chroma statements, allowing for reusable, composable styles.

		\| PROPERTY \| DESCRIPTION \| EXAMPLE(s) \|
		@@ -183,0 +176,0 @@ \| --- \| --- \| --- \|

itty-chroma - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics