Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
itty-chroma
Advanced tools
itty-chroma - npm Package Compare versions
Comparing version 0.1.15 to 0.1.16
| { | ||
| "name": "itty-chroma", | ||
| "version": "0.1.15", | ||
| "version": "0.1.16", | ||
| "description": "Powerful styling for the browser console in under 500 bytes.", | ||
@@ -5,0 +5,0 @@ "main": "./chroma.js", |
137
README.md
@@ -20,2 +20,3 @@ <br /> | ||
| Powerful styling for the browser console in under 500 bytes. | ||
|  | ||
@@ -33,14 +34,12 @@ ## Features | ||
| // KEEP IT SIMPLE | ||
| chroma.red.bold.log('This is bold red text') | ||
| // you can keep it simple... | ||
| chroma.red.bold.underline.log('This is bold, red, underlined text') | ||
| // or go wild | ||
| const badge = chroma.padding('3px 6px').bg('#444').white.radius('0.3rem') | ||
| // OR GO WILD | ||
| const badge = chroma.padding('3px 6px').bg('#444').white.radius('3px') | ||
| const description = chroma.italic.color('#666').size('0.9em') | ||
| chroma.log( | ||
| badge('Did You Know?'), | ||
| description, | ||
| 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', | ||
@@ -55,4 +54,123 @@ 'and so is this... until we switch styles again', | ||
| # How it Works | ||
| Call/access properties to add multiple styles, then call the function itself to trigger the output. | ||
| Otherwise, it follows the following behaviors: | ||
| ### 1. Use `chroma.log` (or warn/error) to output to console. | ||
| ```ts | ||
| chroma.log('text') // console.log('text') | ||
| chroma.warn('text') // console.warn('text') | ||
| chroma.error('text') // console.error('text') | ||
| ``` | ||
|  | ||
| ### 2. Chroma segments | ||
| You can call them directly: | ||
| ```ts | ||
| chroma.bold.red.log('This will be red.') | ||
| ``` | ||
|  | ||
| Use them inside other chroma statements: | ||
| ```ts | ||
| chroma.log( | ||
| chroma.bold.green, | ||
| 'This will be green.' | ||
| ) | ||
| ``` | ||
|  | ||
| Save them for later: | ||
| ```ts | ||
| const blue = chroma.bold.blue | ||
| chroma.log(blue, 'This will be blue.') | ||
| ``` | ||
|  | ||
| Or even make a logger: | ||
| ```ts | ||
| const ittyLogger = chroma.bold.color("#f0c").log | ||
| ittyLogger('This will be itty-colored.') | ||
| ``` | ||
|  | ||
| ### 3. All valid CSS color names may be used (100% support) | ||
| ```ts | ||
| chroma.salmon.log('This is salmon.') | ||
| chroma.cornflowerblue.log('This is cornflowerblue.') | ||
| chroma.cornFlowerBlue.log('Case does not matter here...') | ||
| ``` | ||
|  | ||
| ### 3. Any valid CSS can be used for property values that expect a value | ||
| ```ts | ||
| chroma | ||
| .color('rgba(255,0,100,0.4)') | ||
| .log('This works just fine') | ||
| ``` | ||
|  | ||
| ### 4. Or completely custom CSS can be inlined using `.style(css: string)` | ||
| ```ts | ||
| chroma | ||
| .size('2em') | ||
| .padding('0.5em') | ||
| .style('text-transform:uppercase; text-shadow:0 0 0.5em magenta;') | ||
| .log('So does this') | ||
| ``` | ||
|  | ||
| ### 5. A style will continue to apply until replaced, or cleared using **`chroma.none`** | ||
| ```ts | ||
| chroma.log( | ||
| chroma.red('this will be red'), | ||
| '...but so will this', | ||
| chroma.clear, | ||
| 'back to unformatted text' | ||
| ) | ||
| ``` | ||
|  | ||
| ### 6. Either called/uncalled segments can be used in assembling messages | ||
| ```ts | ||
| const called = chroma.red('red text') | ||
| const uncalled = chroma.blue | ||
| chroma.log( | ||
| called, | ||
| uncalled, | ||
| 'blue text', | ||
| ) | ||
| ``` | ||
|  | ||
| ### 7. Example: Creating custom log messages | ||
| ```ts | ||
| // 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...') | ||
| ``` | ||
|  | ||
| # API | ||
@@ -73,2 +191,3 @@ | ||
| | **.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)')` | | ||
@@ -82,4 +201,6 @@ | **.font(value)** | sets font, supports any valid CSS font-family | `chroma.font('Georgia')` | | ||
| | **.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)')` | | ||
| | **.none**<sup>1</sup> | clears styling for subsequent arguments | `chroma.red('red text', chroma.none, 'plain text')` | | ||
| <sup>1</sup> <small>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.</small> | ||
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by49.07%
12477
- Number of lines in readme file
- increased by149.38%
202
No dependency changes