@a_ng_d/utils-ui-color-palette 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -23
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -8,18 +8,21 @@ Core utilities library for UI Color Palette - a color management plugin for desi
|
|
|
8
8
|
## Design Tools Compatibility
|
|
9
9
|
|
|
10
10
|
UI Color Palette is available for:
|
|
11
|
+
|
|
11
12
|
- Figma - Create and manage color primivites directly in your Figma designs
|
|
12
13
|
- FigJam - Collaborate on color decisions with your team
|
|
13
14
|
- Penpot - Open-source design tool alternative with full color management support
|
|
14
15
|
|
|
15
16
|
## Features
|
|
16
17
|
|
|
17
|
-
- **Color Contrast Tools**:
|
|
18
|
+
- **Color Contrast Tools**:
|
|
19
|
+
|
|
18
20
|
- APCA contrast calculations
|
|
19
21
|
- WCAG 2.1 compliance checking
|
|
20
22
|
- Contrast ratio calculations between colors
|
|
21
23
|
|
|
22
24
|
- **Color Manipulation**:
|
|
25
|
+
|
|
23
26
|
- Color space conversions (RGB, HSL, HSLuv, LAB)
|
|
24
27
|
- Color mixing and blending
|
|
25
28
|
- Brightness and saturation adjustments
|
|
@@ -40,77 +43,83 @@ yarn add @a_ng_d/utils-ui-color-palette
|
|
|
40
43
|
## Usage
|
|
41
44
|
|
|
42
45
|
```typescript
|
|
43
|
-
import {
|
|
46
|
+
import {
|
|
47
|
+
calculateContrast,
|
|
48
|
+
generatePalette,
|
|
49
|
+
} from '@a_ng_d/utils-ui-color-palette'
|
|
44
50
|
|
|
45
51
|
// Calculate contrast between two colors
|
|
46
|
-
const contrast = calculateContrast('#000000', '#FFFFFF')
|
|
52
|
+
const contrast = calculateContrast('#000000', '#FFFFFF')
|
|
47
53
|
|
|
48
54
|
// Generate a color palette
|
|
49
|
-
const palette = generatePalette('#FF0000', { steps: 10 })
|
|
55
|
+
const palette = generatePalette('#FF0000', { steps: 10 })
|
|
50
56
|
```
|
|
51
57
|
|
|
52
58
|
## Examples
|
|
53
59
|
|
|
54
60
|
### Contrast Calculations
|
|
61
|
+
|
|
55
62
|
```typescript
|
|
56
|
-
import { Contrast } from '@a_ng_d/utils-ui-color-palette'
|
|
63
|
+
import { Contrast } from '@a_ng_d/utils-ui-color-palette'
|
|
57
64
|
|
|
58
65
|
// Create a contrast checker instance
|
|
59
66
|
const contrast = new Contrast({
|
|
60
67
|
backgroundColor: [255, 255, 255], // White background
|
|
61
|
-
textColor: '#000000' // Black text
|
|
62
|
-
})
|
|
68
|
+
textColor: '#000000', // Black text
|
|
69
|
+
})
|
|
63
70
|
|
|
64
71
|
// Get WCAG contrast ratio
|
|
65
|
-
const wcagScore = contrast.getWCAGScore()
|
|
72
|
+
const wcagScore = contrast.getWCAGScore() // Returns: 'AAA'
|
|
66
73
|
|
|
67
74
|
// Get APCA contrast value
|
|
68
|
-
const apcaScore = contrast.getAPCAContrast()
|
|
75
|
+
const apcaScore = contrast.getAPCAContrast() // Returns: ~106
|
|
69
76
|
|
|
70
77
|
// Get recommended usage
|
|
71
|
-
const usage = contrast.getRecommendedUsage()
|
|
78
|
+
const usage = contrast.getRecommendedUsage() // Returns: 'FLUENT_TEXT'
|
|
72
79
|
|
|
73
80
|
// Get minimum font sizes
|
|
74
|
-
const sizes = contrast.getMinFontSizes()
|
|
81
|
+
const sizes = contrast.getMinFontSizes() // Returns recommended font sizes
|
|
75
82
|
```
|
|
76
83
|
|
|
77
84
|
### Color Space Conversions
|
|
85
|
+
|
|
78
86
|
```typescript
|
|
79
|
-
import { Color } from '@a_ng_d/utils-ui-color-palette'
|
|
87
|
+
import { Color } from '@a_ng_d/utils-ui-color-palette'
|
|
80
88
|
|
|
81
89
|
// Create a color instance
|
|
82
90
|
const color = new Color({
|
|
83
91
|
sourceColor: [255, 0, 0], // Red in RGB
|
|
84
92
|
lightness: 50,
|
|
85
93
|
chromaShifting: 100,
|
|
86
|
-
})
|
|
94
|
+
})
|
|
87
95
|
|
|
88
96
|
// Convert to different color spaces
|
|
89
|
-
const lchColor = color.lch()
|
|
90
|
-
const oklchColor = color.oklch()
|
|
91
|
-
const hsluvColor = color.hsluv()
|
|
97
|
+
const lchColor = color.lch()
|
|
98
|
+
const oklchColor = color.oklch()
|
|
99
|
+
const hsluvColor = color.hsluv()
|
|
92
100
|
|
|
93
101
|
// Handle color blindness simulation
|
|
94
102
|
const protanopiaColor = new Color({
|
|
95
103
|
sourceColor: [255, 0, 0],
|
|
96
|
-
visionSimulationMode: 'PROTANOPIA'
|
|
97
|
-
}).setColor()
|
|
104
|
+
visionSimulationMode: 'PROTANOPIA',
|
|
105
|
+
}).setColor()
|
|
98
106
|
```
|
|
99
107
|
|
|
100
108
|
### Color Mixing
|
|
109
|
+
|
|
101
110
|
```typescript
|
|
102
|
-
import { Color } from '@a_ng_d/utils-ui-color-palette'
|
|
111
|
+
import { Color } from '@a_ng_d/utils-ui-color-palette'
|
|
103
112
|
|
|
104
|
-
const color = new Color({})
|
|
113
|
+
const color = new Color({})
|
|
105
114
|
|
|
106
115
|
// Mix RGB colors with alpha
|
|
107
116
|
const mixed = color.mixColorsRgb(
|
|
108
117
|
[255, 0, 0, 0.5], // Semi-transparent red
|
|
109
|
-
[0, 0, 255, 1]
|
|
110
|
-
)
|
|
118
|
+
[0, 0, 255, 1] // Solid blue
|
|
119
|
+
)
|
|
111
120
|
|
|
112
121
|
// Mix hex colors
|
|
113
|
-
const mixedHex = color.mixColorsHex('#FF0000', '#0000FF')
|
|
122
|
+
const mixedHex = color.mixColorsHex('#FF0000', '#0000FF')
|
|
114
123
|
```
|
|
115
124
|
|
|
116
125
|
## Testing
|
|
@@ -135,6 +144,7 @@ All files | 76.09 | 62.63 | 75.86 | 76.09
|
|
|
135
144
|
```
|
|
136
145
|
|
|
137
146
|
To run coverage tests:
|
|
147
|
+
|
|
138
148
|
```bash
|
|
139
149
|
npm run test:coverage
|
|
140
150
|
```
|
|
@@ -144,11 +154,13 @@ npm run test:coverage
|
|
|
144
154
|
This project relies on several excellent open source packages:
|
|
145
155
|
|
|
146
156
|
### Color Processing
|
|
157
|
+
|
|
147
158
|
- [chroma.js](https://gka.github.io/chroma.js/) - A powerful library for color manipulations and conversions
|
|
148
159
|
- Author: Gregor Aisch
|
|
149
160
|
- License: BSD-3-Clause
|
|
150
161
|
|
|
151
162
|
### Contrast Calculation
|
|
163
|
+
|
|
152
164
|
- [APCA-W3](https://github.com/Myndex/SAPC-APCA) - Advanced Perceptual Contrast Algorithm
|
|
153
165
|
- Author: Andrew Somers
|
|
154
166
|
- License: W3C Software and Document Notice and License
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@a_ng_d/utils-ui-color-palette",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.3",
|
|
5
5
|
"description": "Core utilities library for UI Color Palette - a color management plugin for design tools. This library provides the foundational color manipulation, contrast calculation, and palette generation features used in the plugin.",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -58,4 +58,4 @@
|
|
|
58
58
|
"chroma-js": "^2.4.2",
|
|
59
59
|
"hsluv": "^1.0.1"
|
|
60
60
|
}
|
|
61
|
-
}
|
|
61
|
+
}
|