@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.
Files changed (2) hide show
  1. package/README.md +35 -23
  2. 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 { calculateContrast, generatePalette } from '@a_ng_d/utils-ui-color-palette';
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(); // Returns: 'AAA'
72
+ const wcagScore = contrast.getWCAGScore() // Returns: 'AAA'
66
73
 
67
74
  // Get APCA contrast value
68
- const apcaScore = contrast.getAPCAContrast(); // Returns: ~106
75
+ const apcaScore = contrast.getAPCAContrast() // Returns: ~106
69
76
 
70
77
  // Get recommended usage
71
- const usage = contrast.getRecommendedUsage(); // Returns: 'FLUENT_TEXT'
78
+ const usage = contrast.getRecommendedUsage() // Returns: 'FLUENT_TEXT'
72
79
 
73
80
  // Get minimum font sizes
74
- const sizes = contrast.getMinFontSizes(); // Returns recommended font sizes
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] // Solid blue
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.1",
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
+ }