oolib 2.225.11 → 2.226.0
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/dist/utils/color.d.ts +7 -0
- package/dist/utils/color.js +39 -0
- package/package.json +2 -1
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calculates the color contrast ratio between two colors according to WCAG 2.1
|
|
3
|
+
* @param color1 - First color (any CSS color format: hex, rgb, oklch, oklab, color())
|
|
4
|
+
* @param color2 - Second color (any CSS color format: hex, rgb, oklch, oklab, color())
|
|
5
|
+
* @returns Contrast ratio between 1 and 21
|
|
6
|
+
*/
|
|
7
|
+
export declare const getColorContrast: (color1: string, color2: string) => number;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getColorContrast = void 0;
|
|
4
|
+
var color_1 = require("@texel/color");
|
|
5
|
+
/**
|
|
6
|
+
* Calculates the relative luminance of a color according to WCAG 2.1
|
|
7
|
+
* @param r - Red component (0-1)
|
|
8
|
+
* @param g - Green component (0-1)
|
|
9
|
+
* @param b - Blue component (0-1)
|
|
10
|
+
* @returns Relative luminance value
|
|
11
|
+
*/
|
|
12
|
+
var getRelativeLuminance = function (r, g, b) {
|
|
13
|
+
var _a = [r, g, b].map(function (c) {
|
|
14
|
+
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
15
|
+
}), rs = _a[0], gs = _a[1], bs = _a[2];
|
|
16
|
+
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Calculates the color contrast ratio between two colors according to WCAG 2.1
|
|
20
|
+
* @param color1 - First color (any CSS color format: hex, rgb, oklch, oklab, color())
|
|
21
|
+
* @param color2 - Second color (any CSS color format: hex, rgb, oklch, oklab, color())
|
|
22
|
+
* @returns Contrast ratio between 1 and 21
|
|
23
|
+
*/
|
|
24
|
+
var getColorContrast = function (color1, color2) {
|
|
25
|
+
// Parse colors and convert to sRGB (returns [r, g, b] in 0-1 range)
|
|
26
|
+
var rgb1 = (0, color_1.parse)(color1, color_1.sRGB);
|
|
27
|
+
var rgb2 = (0, color_1.parse)(color2, color_1.sRGB);
|
|
28
|
+
if (!rgb1 || !rgb2) {
|
|
29
|
+
throw new Error("Invalid color format provided");
|
|
30
|
+
}
|
|
31
|
+
// Get luminance values (rgb values are in 0-1 range)
|
|
32
|
+
var l1 = getRelativeLuminance(rgb1[0], rgb1[1], rgb1[2]);
|
|
33
|
+
var l2 = getRelativeLuminance(rgb2[0], rgb2[1], rgb2[2]);
|
|
34
|
+
// Calculate contrast ratio (lighter color + 0.05) / (darker color + 0.05)
|
|
35
|
+
var lighter = Math.max(l1, l2);
|
|
36
|
+
var darker = Math.min(l1, l2);
|
|
37
|
+
return (lighter + 0.05) / (darker + 0.05);
|
|
38
|
+
};
|
|
39
|
+
exports.getColorContrast = getColorContrast;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oolib",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.226.0",
|
|
4
4
|
"description": " OKE Component Library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -96,6 +96,7 @@
|
|
|
96
96
|
"@material/material-color-utilities": "^0.3.0",
|
|
97
97
|
"@phosphor-icons/react": "^2.1.10",
|
|
98
98
|
"@react-hook/resize-observer": "^1.2.6",
|
|
99
|
+
"@texel/color": "^1.1.10",
|
|
99
100
|
"babel-polyfill": "^6.26.0",
|
|
100
101
|
"d3": "^7.8.5",
|
|
101
102
|
"d3-collection": "^1.0.7",
|