@siratik/wp-component-library 0.1.0 → 0.1.1
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 +8 -0
- package/build/index.asset.php +1 -1
- package/build/index.js +106 -97
- package/constants/statusColors.js +15 -5
- package/package.json +8 -5
|
@@ -53,6 +53,7 @@ const CORE_FAMILY = {
|
|
|
53
53
|
* - accent: text, icons and chart series on neutral chrome
|
|
54
54
|
* - stroke: borders, dots and markers
|
|
55
55
|
* - surface: tinted backgrounds
|
|
56
|
+
* - fill: chart series, rings and bars (see statusColor)
|
|
56
57
|
*/
|
|
57
58
|
const ROLES = {
|
|
58
59
|
content: ["foreground-content-%s", "dark"],
|
|
@@ -64,15 +65,24 @@ const ROLES = {
|
|
|
64
65
|
/**
|
|
65
66
|
* A status colour by role.
|
|
66
67
|
*
|
|
68
|
+
* `fill` has no core token: core's status foregrounds are darkened for text
|
|
69
|
+
* contrast (caution reads olive as a fill), so filled shapes use the bright
|
|
70
|
+
* base palette instead.
|
|
71
|
+
*
|
|
67
72
|
* @param {'success' | 'warning' | 'error' | 'info'} type
|
|
68
|
-
* @param {'content' | 'accent' | 'stroke' | 'surface'} [role='accent']
|
|
73
|
+
* @param {'content' | 'accent' | 'stroke' | 'surface' | 'fill'} [role='accent']
|
|
69
74
|
* @returns {string}
|
|
70
75
|
*/
|
|
71
76
|
export const statusColor = (type, role = "accent") => {
|
|
77
|
+
if (role === "fill") {
|
|
78
|
+
return STATUS_COLOR_FALLBACKS[type]?.base ?? STATUS_COLOR_FALLBACKS.error.base;
|
|
79
|
+
}
|
|
80
|
+
|
|
72
81
|
const [token, variant] = ROLES[role] ?? ROLES.accent;
|
|
73
82
|
const family = CORE_FAMILY[type] ?? "error";
|
|
74
83
|
const fallback = STATUS_COLOR_FALLBACKS[type]?.[variant] ?? "#646970";
|
|
75
84
|
|
|
85
|
+
// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- token names come from the ROLES/CORE_FAMILY maps above.
|
|
76
86
|
return `var(--wpds-color-${token.replace("%s", family)}, ${fallback})`;
|
|
77
87
|
};
|
|
78
88
|
|
|
@@ -143,7 +153,7 @@ export const getScoreChartColors = (score) => {
|
|
|
143
153
|
const tier = getScoreStatusTier(score);
|
|
144
154
|
|
|
145
155
|
return {
|
|
146
|
-
chart: statusColor(tier, "
|
|
156
|
+
chart: statusColor(tier, "fill"),
|
|
147
157
|
text: statusColor(tier, "content"),
|
|
148
158
|
};
|
|
149
159
|
};
|
|
@@ -192,8 +202,8 @@ export const getBadgeIntentColors = (intent) => {
|
|
|
192
202
|
export const defaultChartStatusColors = [
|
|
193
203
|
ADMIN_COLOR.brandFill,
|
|
194
204
|
"#646970",
|
|
195
|
-
statusColor("success"),
|
|
196
|
-
statusColor("warning"),
|
|
197
|
-
statusColor("error"),
|
|
205
|
+
statusColor("success", "fill"),
|
|
206
|
+
statusColor("warning", "fill"),
|
|
207
|
+
statusColor("error", "fill"),
|
|
198
208
|
"#8b5cf6",
|
|
199
209
|
];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@siratik/wp-component-library",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Library of components for use in the WordPress block editor.",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"module": "build/index.js",
|
|
@@ -20,20 +20,21 @@
|
|
|
20
20
|
},
|
|
21
21
|
"repository": {
|
|
22
22
|
"type": "git",
|
|
23
|
-
"url": "git
|
|
23
|
+
"url": "git+https://github.com/builtnorth/wp-component-library.git"
|
|
24
24
|
},
|
|
25
25
|
"author": "Built North",
|
|
26
26
|
"license": "GPL-2.0-or-later",
|
|
27
27
|
"bugs": {
|
|
28
|
-
"url": "https://github.com/builtnorth/wp-component-library
|
|
28
|
+
"url": "https://github.com/builtnorth/wp-component-library/issues"
|
|
29
29
|
},
|
|
30
|
-
"homepage": "https://github.com/builtnorth/wp-
|
|
30
|
+
"homepage": "https://github.com/builtnorth/wp-component-library#readme",
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@dnd-kit/core": "^6.3.1",
|
|
33
33
|
"@dnd-kit/modifiers": "^9.0.0",
|
|
34
34
|
"@dnd-kit/sortable": "^10.0.0",
|
|
35
35
|
"@dnd-kit/utilities": "^3.2.2",
|
|
36
36
|
"@leeoniya/ufuzzy": "^1.0.14",
|
|
37
|
+
"@wordpress/icons": "^11.8.0",
|
|
37
38
|
"classnames": "^2.5.1",
|
|
38
39
|
"dompurify": "^3.4.7",
|
|
39
40
|
"prop-types": "^15.8.1",
|
|
@@ -44,6 +45,8 @@
|
|
|
44
45
|
"@emotion/styled": "^11.14.1"
|
|
45
46
|
},
|
|
46
47
|
"devDependencies": {
|
|
47
|
-
"@wordpress/scripts": "^34.2.0"
|
|
48
|
+
"@wordpress/scripts": "^34.2.0",
|
|
49
|
+
"react": "^18.3.1",
|
|
50
|
+
"react-dom": "^18.3.1"
|
|
48
51
|
}
|
|
49
52
|
}
|