Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andreihudovich/named-css-colors
A set of utilities to work with named colors defined in the latest CSS Color Module. Written in Typescript ☂️
https://github.com/andreihudovich/named-css-colors
colors css css-colors named named-colors typescript utilities
Last synced: 27 days ago
JSON representation
A set of utilities to work with named colors defined in the latest CSS Color Module. Written in Typescript ☂️
- Host: GitHub
- URL: https://github.com/andreihudovich/named-css-colors
- Owner: AndreiHudovich
- License: mit
- Created: 2023-03-04T13:10:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-10T20:50:12.000Z (3 months ago)
- Last Synced: 2024-10-13T04:01:21.298Z (27 days ago)
- Topics: colors, css, css-colors, named, named-colors, typescript, utilities
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/named-css-colors
- Size: 470 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Named Colors utilities
A set of utilities to work with named colors defined in the latest [CSS Color Module](https://w3c.github.io/csswg-drafts/css-color/#named-colors).
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [API - Core](#api---core)
- [isNamedColor](#isnamedcolor)
- [getNamedColors](#getnamedcolors)
- [getNamedColorsIdentifiers](#getnamedcolorsidentifiers)
- [getNamedColorsHexs](#getnamedcolorshexs)
- [API Types](#api---types)
- [NamedColor](#namedcolor)
- [Notes](#notes)
- [License](#license)
## Features
- ☂️ Fully-typed (written in Typescript)
- 🌳 Tree-Shakeable
## Installation
Using npm:
```sh
$ npm install named-css-colors
```
Using yarn:
```sh
$ yarn add named-css-colors
```
Using pnpm:
```sh
$ pnpm add named-css-colors
```
## API - Core
### isNamedColor()
Checks whether the given argument is a named CSS color.
- **Type:**
```ts
function isNamedColor(color: string): boolean
```
- **Example:**
```ts
import { isNamedColor } from 'named-css-colors'
isNamedColor('greycat') // => false
isNamedColor('black') // => true
```
### getNamedColors()
Returns a **read only** object of named CSS colors.
- **Type:**
```ts
function getNamedColors(): NamedColors
type NamedColors = {
readonly [key in NamedColor]: string
}
```
- **Example:**
```ts
import { getNamedColors } from 'named-css-colors'
getNamedColors()
// => { aliceblue: '#F0F8FF', antiquewhite: '#FAEBD7', ..., yellowgreen: '#9ACD32' }
Object.isFrozen(getNamedColors())
// => true
```
### getNamedColorsIdentifiers()
Returns a **read only** array of named CSS colors identifier values.
- **Type:**
```ts
function getNamedColorsIdentifiers(): NamedColorsIdentifiers
interface NamedColorsIdentifiers extends ReadonlyArray {
readonly [index: number]: NamedColor
}
```
- **Example:**
```ts
import { getNamedColorsIdentifiers } from 'named-css-colors'
getNamedColorsIdentifiers()
// => [ 'aliceblue', 'antiquewhite', ..., 'yellowgreen' ]
Object.isFrozen(getNamedColorsIdentifiers())
// => true
```
### getNamedColorsHexs()
Returns a **read only** array of named CSS colors hex values.
- **Type:**
```ts
function getNamedColorsHexs(): NamedColorsHexs
interface NamedColorsHexs extends ReadonlyArray {
readonly [index: number]: string
}
```
- **Example:**
```ts
import { getNamedColorsHexs } from 'named-css-colors'
getNamedColorsHexs()
// => [ '#F0F8FF', '#FAEBD7', ..., '#9ACD32' ]
Object.isFrozen(getNamedColorsHexs())
// => true
```
## API - Types
### NamedColor
A union type alias of each named color string identifier.
- **Type:**
```ts
type NamedColor =
| 'aliceblue'
| 'antiquewhite'
...
| 'yellowgreen'
```
- **Example:**
```ts
import type { NamedColor } from 'named-css-colors'
const color: NamedColor = 'black'
```
## Notes
This is a [Pure ESM package](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
## License
MIT License © 2024 [Andrei Hudovich](https://hudovich.dev)
## Check out my other projects
[Submit your website to directories](https://listingcat.com)
[SaaS boilerplates](https://getboilerplates.com)