@digdir/designsystemet 0.1.0-alpha.14 → 0.1.0-alpha.16
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/bin/designsystemet.js +32 -3439
- package/dist/src/colors/colorUtils.js +301 -343
- package/dist/src/colors/index.js +3 -607
- package/dist/src/colors/themeUtils.js +319 -348
- package/dist/src/colors/types.js +1 -1
- package/dist/src/init/createTokensPackage.js +228 -0
- package/dist/src/init/generateMetadataJson.js +16 -0
- package/dist/src/init/generateThemesJson.js +50 -0
- package/dist/src/init/index.js +7 -0
- package/dist/src/init/nextStepsMarkdown.js +90 -0
- package/dist/src/init/template/default-files/README.md +10 -0
- package/dist/src/init/template/default-files/design-tokens/README.md +3 -0
- package/dist/src/init/template/default-files/design-tokens/primitives/globals.json +197 -0
- package/dist/src/init/template/default-files/design-tokens/primitives/typography/default.json +86 -0
- package/dist/src/init/template/default-files/design-tokens/semantic/color.json +562 -0
- package/dist/src/init/template/default-files/design-tokens/semantic/style.json +543 -0
- package/dist/src/init/template/prettier.config.js +7 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/contrast/global.json +376 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json +314 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/dark/global.json +376 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/dark/theme-template.json +314 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/light/global.json +376 -0
- package/dist/src/init/template/template-files/design-tokens/primitives/colors/light/theme-template.json +314 -0
- package/dist/src/init/template/template-files/design-tokens/themes/theme-template.json +314 -0
- package/dist/src/init/template/template-files/package.json +23 -0
- package/dist/src/init/utils.js +11 -0
- package/dist/src/migrations/beta-to-v1.js +341 -407
- package/dist/src/migrations/codemods/css/plugins.js +36 -42
- package/dist/src/migrations/codemods/css/run.js +20 -17
- package/dist/src/migrations/codemods/jsx/classname-prefix.js +63 -59
- package/dist/src/migrations/codemods/jsx/run.js +20 -20
- package/dist/src/migrations/index.js +5 -436
- package/dist/src/migrations/react-beta-to-v1.js +4 -27
- package/dist/src/test/a.css +39 -0
- package/dist/src/test/jsx-test.js +12 -0
- package/dist/src/tokens/actions.js +27 -2176
- package/dist/src/tokens/build.js +54 -2974
- package/dist/src/tokens/configs.js +234 -2874
- package/dist/src/tokens/formats/css.js +153 -2632
- package/dist/src/tokens/formats/js-tokens.js +28 -42
- package/dist/src/tokens/transformers.js +44 -82
- package/dist/src/tokens/utils/noCase.js +26 -28
- package/dist/src/tokens/utils/permutateThemes.js +65 -217
- package/dist/src/tokens/utils/utils.js +25 -14
- package/dist/types/bin/designsystemet.d.ts +3 -0
- package/dist/types/bin/designsystemet.d.ts.map +1 -0
- package/dist/types/src/colors/colorUtils.d.ts +126 -0
- package/dist/types/src/colors/colorUtils.d.ts.map +1 -0
- package/dist/types/src/colors/index.d.ts +4 -0
- package/dist/types/src/colors/index.d.ts.map +1 -0
- package/dist/types/src/colors/themeUtils.d.ts +102 -0
- package/dist/types/src/colors/themeUtils.d.ts.map +1 -0
- package/dist/types/src/colors/types.d.ts +16 -0
- package/dist/types/src/colors/types.d.ts.map +1 -0
- package/dist/types/src/init/createTokensPackage.d.ts +5 -0
- package/dist/types/src/init/createTokensPackage.d.ts.map +1 -0
- package/dist/types/src/init/generateMetadataJson.d.ts +6 -0
- package/dist/types/src/init/generateMetadataJson.d.ts.map +1 -0
- package/dist/types/src/init/generateThemesJson.d.ts +3 -0
- package/dist/types/src/init/generateThemesJson.d.ts.map +1 -0
- package/dist/types/src/init/index.d.ts +3 -0
- package/dist/types/src/init/index.d.ts.map +1 -0
- package/dist/types/src/init/nextStepsMarkdown.d.ts +3 -0
- package/dist/types/src/init/nextStepsMarkdown.d.ts.map +1 -0
- package/dist/types/src/init/template/prettier.config.d.mts +9 -0
- package/dist/types/src/init/template/prettier.config.d.mts.map +1 -0
- package/dist/types/src/init/utils.d.ts +4 -0
- package/dist/types/src/init/utils.d.ts.map +1 -0
- package/dist/types/src/migrations/beta-to-v1.d.ts +3 -0
- package/dist/types/src/migrations/beta-to-v1.d.ts.map +1 -0
- package/dist/types/src/migrations/codemods/css/plugins.d.ts +6 -0
- package/dist/types/src/migrations/codemods/css/plugins.d.ts.map +1 -0
- package/dist/types/src/migrations/codemods/css/run.d.ts +8 -0
- package/dist/types/src/migrations/codemods/css/run.d.ts.map +1 -0
- package/dist/types/src/migrations/codemods/jsx/classname-prefix.d.ts +10 -0
- package/dist/types/src/migrations/codemods/jsx/classname-prefix.d.ts.map +1 -0
- package/dist/types/src/migrations/codemods/jsx/run.d.ts +7 -0
- package/dist/types/src/migrations/codemods/jsx/run.d.ts.map +1 -0
- package/dist/types/src/migrations/index.d.ts +6 -0
- package/dist/types/src/migrations/index.d.ts.map +1 -0
- package/dist/types/src/migrations/react-beta-to-v1.d.ts +3 -0
- package/dist/types/src/migrations/react-beta-to-v1.d.ts.map +1 -0
- package/dist/types/src/test/jsx-test.d.ts +4 -0
- package/dist/types/src/test/jsx-test.d.ts.map +1 -0
- package/dist/types/src/tokens/actions.d.ts +6 -0
- package/dist/types/src/tokens/actions.d.ts.map +1 -0
- package/dist/types/src/tokens/build.d.ts +11 -0
- package/dist/types/src/tokens/build.d.ts.map +1 -0
- package/dist/types/src/tokens/configs.d.ts +31 -0
- package/dist/types/src/tokens/configs.d.ts.map +1 -0
- package/dist/types/src/tokens/formats/css.d.ts +5 -0
- package/dist/types/src/tokens/formats/css.d.ts.map +1 -0
- package/dist/types/src/tokens/formats/js-tokens.d.ts +6 -0
- package/dist/types/src/tokens/formats/js-tokens.d.ts.map +1 -0
- package/dist/types/src/tokens/transformers.d.ts +5 -0
- package/dist/types/src/tokens/transformers.d.ts.map +1 -0
- package/dist/types/src/tokens/utils/noCase.d.ts +11 -0
- package/dist/types/src/tokens/utils/noCase.d.ts.map +1 -0
- package/dist/types/src/tokens/utils/permutateThemes.d.ts +17 -0
- package/dist/types/src/tokens/utils/permutateThemes.d.ts.map +1 -0
- package/dist/types/src/tokens/utils/utils.d.ts +24 -0
- package/dist/types/src/tokens/utils/utils.d.ts.map +1 -0
- package/package.json +11 -17
- package/LICENSE +0 -7
- package/dist/bin/designsystemet.js.map +0 -1
- package/dist/src/colors/colorUtils.js.map +0 -1
- package/dist/src/colors/index.js.map +0 -1
- package/dist/src/colors/themeUtils.js.map +0 -1
- package/dist/src/colors/types.js.map +0 -1
- package/dist/src/migrations/beta-to-v1.js.map +0 -1
- package/dist/src/migrations/codemods/css/plugins.js.map +0 -1
- package/dist/src/migrations/codemods/css/run.js.map +0 -1
- package/dist/src/migrations/codemods/jsx/classname-prefix.js.map +0 -1
- package/dist/src/migrations/codemods/jsx/run.js.map +0 -1
- package/dist/src/migrations/index.js.map +0 -1
- package/dist/src/migrations/react-beta-to-v1.js.map +0 -1
- package/dist/src/tokens/actions.js.map +0 -1
- package/dist/src/tokens/build.js.map +0 -1
- package/dist/src/tokens/configs.js.map +0 -1
- package/dist/src/tokens/formats/css.js.map +0 -1
- package/dist/src/tokens/formats/js-tokens.js.map +0 -1
- package/dist/src/tokens/transformers.js.map +0 -1
- package/dist/src/tokens/utils/noCase.js.map +0 -1
- package/dist/src/tokens/utils/permutateThemes.js.map +0 -1
- package/dist/src/tokens/utils/utils.js.map +0 -1
package/dist/src/colors/index.js
CHANGED
|
@@ -1,607 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
// ../../node_modules/apca-w3/src/apca-w3.js
|
|
6
|
-
var SA98G = {
|
|
7
|
-
mainTRC: 2.4,
|
|
8
|
-
// 2.4 exponent for emulating actual monitor perception
|
|
9
|
-
// For reverseAPCA
|
|
10
|
-
get mainTRCencode() {
|
|
11
|
-
return 1 / this.mainTRC;
|
|
12
|
-
},
|
|
13
|
-
// sRGB coefficients
|
|
14
|
-
sRco: 0.2126729,
|
|
15
|
-
sGco: 0.7151522,
|
|
16
|
-
sBco: 0.072175,
|
|
17
|
-
// G-4g constants for use with 2.4 exponent
|
|
18
|
-
normBG: 0.56,
|
|
19
|
-
normTXT: 0.57,
|
|
20
|
-
revTXT: 0.62,
|
|
21
|
-
revBG: 0.65,
|
|
22
|
-
// G-4g Clamps and Scalers
|
|
23
|
-
blkThrs: 0.022,
|
|
24
|
-
blkClmp: 1.414,
|
|
25
|
-
scaleBoW: 1.14,
|
|
26
|
-
scaleWoB: 1.14,
|
|
27
|
-
loBoWoffset: 0.027,
|
|
28
|
-
loWoBoffset: 0.027,
|
|
29
|
-
deltaYmin: 5e-4,
|
|
30
|
-
loClip: 0.1,
|
|
31
|
-
///// MAGIC NUMBERS for UNCLAMP, for use with 0.022 & 1.414 /////
|
|
32
|
-
// Magic Numbers for reverseAPCA
|
|
33
|
-
mFactor: 1.9468554433171,
|
|
34
|
-
get mFactInv() {
|
|
35
|
-
return 1 / this.mFactor;
|
|
36
|
-
},
|
|
37
|
-
mOffsetIn: 0.0387393816571401,
|
|
38
|
-
mExpAdj: 0.283343396420869,
|
|
39
|
-
get mExp() {
|
|
40
|
-
return this.mExpAdj / this.blkClmp;
|
|
41
|
-
},
|
|
42
|
-
mOffsetOut: 0.312865795870758
|
|
43
|
-
};
|
|
44
|
-
function APCAcontrast(txtY, bgY, places = -1) {
|
|
45
|
-
const icp = [0, 1.1];
|
|
46
|
-
if (isNaN(txtY) || isNaN(bgY) || Math.min(txtY, bgY) < icp[0] || Math.max(txtY, bgY) > icp[1]) {
|
|
47
|
-
return 0;
|
|
48
|
-
}
|
|
49
|
-
;
|
|
50
|
-
let SAPC = 0;
|
|
51
|
-
let outputContrast = 0;
|
|
52
|
-
let polCat = "BoW";
|
|
53
|
-
txtY = txtY > SA98G.blkThrs ? txtY : txtY + Math.pow(SA98G.blkThrs - txtY, SA98G.blkClmp);
|
|
54
|
-
bgY = bgY > SA98G.blkThrs ? bgY : bgY + Math.pow(SA98G.blkThrs - bgY, SA98G.blkClmp);
|
|
55
|
-
if (Math.abs(bgY - txtY) < SA98G.deltaYmin) {
|
|
56
|
-
return 0;
|
|
57
|
-
}
|
|
58
|
-
if (bgY > txtY) {
|
|
59
|
-
SAPC = (Math.pow(bgY, SA98G.normBG) - Math.pow(txtY, SA98G.normTXT)) * SA98G.scaleBoW;
|
|
60
|
-
outputContrast = SAPC < SA98G.loClip ? 0 : SAPC - SA98G.loBoWoffset;
|
|
61
|
-
} else {
|
|
62
|
-
polCat = "WoB";
|
|
63
|
-
SAPC = (Math.pow(bgY, SA98G.revBG) - Math.pow(txtY, SA98G.revTXT)) * SA98G.scaleWoB;
|
|
64
|
-
outputContrast = SAPC > -SA98G.loClip ? 0 : SAPC + SA98G.loWoBoffset;
|
|
65
|
-
}
|
|
66
|
-
if (places < 0) {
|
|
67
|
-
return outputContrast * 100;
|
|
68
|
-
} else if (places == 0) {
|
|
69
|
-
return Math.round(Math.abs(outputContrast) * 100) + "<sub>" + polCat + "</sub>";
|
|
70
|
-
} else if (Number.isInteger(places)) {
|
|
71
|
-
return (outputContrast * 100).toFixed(places);
|
|
72
|
-
} else {
|
|
73
|
-
return 0;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
function sRGBtoY(rgb = [0, 0, 0]) {
|
|
77
|
-
function simpleExp(chan) {
|
|
78
|
-
return Math.pow(chan / 255, SA98G.mainTRC);
|
|
79
|
-
}
|
|
80
|
-
;
|
|
81
|
-
return SA98G.sRco * simpleExp(rgb[0]) + SA98G.sGco * simpleExp(rgb[1]) + SA98G.sBco * simpleExp(rgb[2]);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// src/colors/colorUtils.ts
|
|
85
|
-
var hexToCssHsl = (hex, valuesOnly = false) => {
|
|
86
|
-
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
87
|
-
let r = 0;
|
|
88
|
-
let g = 0;
|
|
89
|
-
let b = 0;
|
|
90
|
-
let cssString = "";
|
|
91
|
-
if (result) {
|
|
92
|
-
r = parseInt(result[1], 16);
|
|
93
|
-
g = parseInt(result[2], 16);
|
|
94
|
-
b = parseInt(result[3], 16);
|
|
95
|
-
}
|
|
96
|
-
r /= 255, g /= 255, b /= 255;
|
|
97
|
-
const max = Math.max(r, g, b), min = Math.min(r, g, b);
|
|
98
|
-
let h, s, l = (max + min) / 2;
|
|
99
|
-
if (max == min) {
|
|
100
|
-
h = s = 0;
|
|
101
|
-
} else {
|
|
102
|
-
const d = max - min;
|
|
103
|
-
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
104
|
-
switch (max) {
|
|
105
|
-
case r:
|
|
106
|
-
h = (g - b) / d + (g < b ? 6 : 0);
|
|
107
|
-
break;
|
|
108
|
-
case g:
|
|
109
|
-
h = (b - r) / d + 2;
|
|
110
|
-
break;
|
|
111
|
-
case b:
|
|
112
|
-
h = (r - g) / d + 4;
|
|
113
|
-
break;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
h = Math.round(h ? h * 360 : 0);
|
|
117
|
-
s = Math.round(s * 100);
|
|
118
|
-
l = Math.round(l * 100);
|
|
119
|
-
cssString = h + "," + s + "%," + l + "%";
|
|
120
|
-
cssString = !valuesOnly ? "hsl(" + cssString + ")" : cssString;
|
|
121
|
-
return cssString;
|
|
122
|
-
};
|
|
123
|
-
var hexToHSL = (H) => {
|
|
124
|
-
let r = 0, g = 0, b = 0;
|
|
125
|
-
if (H.length == 4) {
|
|
126
|
-
r = parseInt("0x" + H[1] + H[1]);
|
|
127
|
-
g = parseInt("0x" + H[2] + H[2]);
|
|
128
|
-
b = parseInt("0x" + H[3] + H[3]);
|
|
129
|
-
} else if (H.length == 7) {
|
|
130
|
-
r = parseInt("0x" + H[1] + H[2]);
|
|
131
|
-
g = parseInt("0x" + H[3] + H[4]);
|
|
132
|
-
b = parseInt("0x" + H[5] + H[6]);
|
|
133
|
-
}
|
|
134
|
-
r /= 255;
|
|
135
|
-
g /= 255;
|
|
136
|
-
b /= 255;
|
|
137
|
-
let h = 0, s = 0, l = 0;
|
|
138
|
-
const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
|
|
139
|
-
if (delta == 0) h = 0;
|
|
140
|
-
else if (cmax == r) h = (g - b) / delta % 6;
|
|
141
|
-
else if (cmax == g) h = (b - r) / delta + 2;
|
|
142
|
-
else h = (r - g) / delta + 4;
|
|
143
|
-
h = Math.round(h * 60);
|
|
144
|
-
if (h < 0) h += 360;
|
|
145
|
-
l = (cmax + cmin) / 2;
|
|
146
|
-
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
|
|
147
|
-
s = +(s * 100).toFixed(1);
|
|
148
|
-
l = +(l * 100).toFixed(1);
|
|
149
|
-
return [h, s, l];
|
|
150
|
-
};
|
|
151
|
-
var hexToHsluv = (hex) => {
|
|
152
|
-
const conv = new Hsluv();
|
|
153
|
-
conv.hex = hex;
|
|
154
|
-
conv.hexToHsluv();
|
|
155
|
-
return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
|
|
156
|
-
};
|
|
157
|
-
var hslArrToCss = (HSL) => {
|
|
158
|
-
return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
|
|
159
|
-
};
|
|
160
|
-
var HSLToHex = (h, s, l) => {
|
|
161
|
-
s /= 100;
|
|
162
|
-
l /= 100;
|
|
163
|
-
let r = 0, g = 0, b = 0;
|
|
164
|
-
const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2;
|
|
165
|
-
if (0 <= h && h < 60) {
|
|
166
|
-
r = c;
|
|
167
|
-
g = x;
|
|
168
|
-
b = 0;
|
|
169
|
-
} else if (60 <= h && h < 120) {
|
|
170
|
-
r = x;
|
|
171
|
-
g = c;
|
|
172
|
-
b = 0;
|
|
173
|
-
} else if (120 <= h && h < 180) {
|
|
174
|
-
r = 0;
|
|
175
|
-
g = c;
|
|
176
|
-
b = x;
|
|
177
|
-
} else if (180 <= h && h < 240) {
|
|
178
|
-
r = 0;
|
|
179
|
-
g = x;
|
|
180
|
-
b = c;
|
|
181
|
-
} else if (240 <= h && h < 300) {
|
|
182
|
-
r = x;
|
|
183
|
-
g = 0;
|
|
184
|
-
b = c;
|
|
185
|
-
} else if (300 <= h && h < 360) {
|
|
186
|
-
r = c;
|
|
187
|
-
g = 0;
|
|
188
|
-
b = x;
|
|
189
|
-
}
|
|
190
|
-
r = parseInt(Math.round((r + m) * 255).toString(16), 16);
|
|
191
|
-
g = parseInt(Math.round((g + m) * 255).toString(16), 16);
|
|
192
|
-
b = parseInt(Math.round((b + m) * 255).toString(16), 16);
|
|
193
|
-
if (r.toString().length == 1) r = parseInt("0" + r.toString(), 10);
|
|
194
|
-
if (g.toString().length == 1) g = parseInt("0" + g.toString(), 10);
|
|
195
|
-
if (b.toString().length == 1) b = parseInt("0" + b.toString(), 10);
|
|
196
|
-
return "#" + r + g + b;
|
|
197
|
-
};
|
|
198
|
-
var hexToRgb = (hex) => {
|
|
199
|
-
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
|
|
200
|
-
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
|
|
201
|
-
return r + r + g + g + b + b;
|
|
202
|
-
});
|
|
203
|
-
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
204
|
-
return result ? {
|
|
205
|
-
r: parseInt(result[1], 16),
|
|
206
|
-
g: parseInt(result[2], 16),
|
|
207
|
-
b: parseInt(result[3], 16)
|
|
208
|
-
} : null;
|
|
209
|
-
};
|
|
210
|
-
var luminanceFromRgb = (r, g, b) => {
|
|
211
|
-
const a = [Number(r), Number(g), Number(b)].map(function(v) {
|
|
212
|
-
v /= 255;
|
|
213
|
-
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
|
|
214
|
-
});
|
|
215
|
-
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
|
|
216
|
-
};
|
|
217
|
-
var luminanceFromHex = (hex) => {
|
|
218
|
-
const rgb = hexToRgb(hex);
|
|
219
|
-
if (rgb) {
|
|
220
|
-
const r = rgb.r.toString();
|
|
221
|
-
const g = rgb.g.toString();
|
|
222
|
-
const b = rgb.b.toString();
|
|
223
|
-
return luminanceFromRgb(r, g, b);
|
|
224
|
-
}
|
|
225
|
-
return 2;
|
|
226
|
-
};
|
|
227
|
-
var getRatioFromLum = (lum1, lum2) => {
|
|
228
|
-
if (lum1 !== null && lum2 !== null) {
|
|
229
|
-
return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
|
|
230
|
-
} else {
|
|
231
|
-
return -1;
|
|
232
|
-
}
|
|
233
|
-
};
|
|
234
|
-
var getHslLightessFromHex = (hex) => {
|
|
235
|
-
return chroma(hex).hsl()[2];
|
|
236
|
-
};
|
|
237
|
-
var getHslSaturationFromHex = (hex) => {
|
|
238
|
-
return chroma(hex).hsl()[1];
|
|
239
|
-
};
|
|
240
|
-
var getLightnessFromHex = (hex) => {
|
|
241
|
-
const conv = new Hsluv();
|
|
242
|
-
conv.hex = hex;
|
|
243
|
-
conv.hexToHsluv();
|
|
244
|
-
return Number(conv.hsluv_l.toFixed(0));
|
|
245
|
-
};
|
|
246
|
-
var getContrastFromHex = (color1, color2) => {
|
|
247
|
-
const lum1 = luminanceFromHex(color1);
|
|
248
|
-
const lum2 = luminanceFromHex(color2);
|
|
249
|
-
if (lum1 !== null && lum2 !== null) {
|
|
250
|
-
return getRatioFromLum(lum1, lum2);
|
|
251
|
-
}
|
|
252
|
-
return -1;
|
|
253
|
-
};
|
|
254
|
-
var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
|
|
255
|
-
const conv = new Hsluv();
|
|
256
|
-
conv.hex = mainColor;
|
|
257
|
-
conv.hexToHsluv();
|
|
258
|
-
conv.hsluv_l = lightness;
|
|
259
|
-
conv.hsluvToHex();
|
|
260
|
-
const lightMainColor = conv.hex;
|
|
261
|
-
const lum1 = luminanceFromHex(lightMainColor);
|
|
262
|
-
const lum2 = luminanceFromHex(backgroundColor);
|
|
263
|
-
const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);
|
|
264
|
-
return ratio;
|
|
265
|
-
};
|
|
266
|
-
var areColorsContrasting = (color1, color2, type = "aa") => {
|
|
267
|
-
const contrast = getContrastFromHex(color1, color2);
|
|
268
|
-
if (contrast !== null) {
|
|
269
|
-
if (type === "aaa") {
|
|
270
|
-
return contrast >= 7;
|
|
271
|
-
} else if (type === "aa") {
|
|
272
|
-
return contrast >= 4.5;
|
|
273
|
-
} else {
|
|
274
|
-
return contrast >= 3;
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
return false;
|
|
278
|
-
};
|
|
279
|
-
var getApcaContrastLc = (textColor, backgroundColor) => {
|
|
280
|
-
const textColorRgb = hexToRgb(textColor);
|
|
281
|
-
const backgroundColorRgb = hexToRgb(backgroundColor);
|
|
282
|
-
if (textColorRgb && backgroundColorRgb) {
|
|
283
|
-
return APCAcontrast(
|
|
284
|
-
sRGBtoY([textColorRgb.r, textColorRgb.g, textColorRgb.b]),
|
|
285
|
-
sRGBtoY([backgroundColorRgb.r, backgroundColorRgb.g, backgroundColorRgb.b])
|
|
286
|
-
);
|
|
287
|
-
}
|
|
288
|
-
return 0;
|
|
289
|
-
};
|
|
290
|
-
var isHexColor = (hex) => {
|
|
291
|
-
return typeof hex === "string" && hex.length === 6 && !isNaN(Number("0x" + hex));
|
|
292
|
-
};
|
|
293
|
-
|
|
294
|
-
// src/colors/themeUtils.ts
|
|
295
|
-
import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
|
|
296
|
-
import { Hsluv as Hsluv2 } from "hsluv";
|
|
297
|
-
var blueBaseColor = "#0A71C0";
|
|
298
|
-
var greenBaseColor = "#078D19";
|
|
299
|
-
var orangeBaseColor = "#CA5C21";
|
|
300
|
-
var purpleBaseColor = "#663299";
|
|
301
|
-
var redBaseColor = "#C01B1B";
|
|
302
|
-
var yellowBaseColor = "#EABF28";
|
|
303
|
-
var generateThemeColor = (color, mode, contrastMode = "aa") => {
|
|
304
|
-
const leoBackgroundColor = new BackgroundColor({
|
|
305
|
-
name: "backgroundColor",
|
|
306
|
-
colorKeys: ["#ffffff"],
|
|
307
|
-
ratios: [1]
|
|
308
|
-
});
|
|
309
|
-
let colorLightness = getLightnessFromHex(color);
|
|
310
|
-
if (mode === "dark" || mode === "contrast") {
|
|
311
|
-
color = getBaseColor(color);
|
|
312
|
-
colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
|
|
313
|
-
}
|
|
314
|
-
const multiplier = colorLightness <= 30 ? -8 : 8;
|
|
315
|
-
const baseDefaultContrast = getContrastFromLightness(colorLightness, color, leoBackgroundColor.colorKeys[0]);
|
|
316
|
-
const baseHoverContrast = getContrastFromLightness(
|
|
317
|
-
colorLightness - multiplier,
|
|
318
|
-
color,
|
|
319
|
-
leoBackgroundColor.colorKeys[0]
|
|
320
|
-
);
|
|
321
|
-
const baseActiveContrast = getContrastFromLightness(
|
|
322
|
-
colorLightness - multiplier * 2,
|
|
323
|
-
color,
|
|
324
|
-
leoBackgroundColor.colorKeys[0]
|
|
325
|
-
);
|
|
326
|
-
const textSubLightLightness = contrastMode === "aa" ? 42 : 30;
|
|
327
|
-
const textDefLightLightness = contrastMode === "aa" ? 18 : 12;
|
|
328
|
-
const textSubDarkLightness = contrastMode === "aa" ? 67 : 80;
|
|
329
|
-
const textDefDarkLightness = contrastMode === "aa" ? 90 : 94;
|
|
330
|
-
let lightnessScale = [];
|
|
331
|
-
if (mode === "light") {
|
|
332
|
-
lightnessScale = [100, 96, 90, 84, 78, 76, 54, 33, textSubLightLightness, textDefLightLightness];
|
|
333
|
-
} else if (mode === "dark") {
|
|
334
|
-
lightnessScale = [10, 14, 20, 26, 32, 35, 47, 77, textSubDarkLightness, textDefDarkLightness];
|
|
335
|
-
} else {
|
|
336
|
-
lightnessScale = [1, 6, 14, 20, 26, 58, 70, 82, 80, 95];
|
|
337
|
-
}
|
|
338
|
-
const getColorContrasts = (color2, lightnessScale2, backgroundColor) => {
|
|
339
|
-
return lightnessScale2.map((lightness) => getContrastFromLightness(lightness, color2, backgroundColor));
|
|
340
|
-
};
|
|
341
|
-
return new Color({
|
|
342
|
-
name: "color",
|
|
343
|
-
colorKeys: [color],
|
|
344
|
-
ratios: [
|
|
345
|
-
...getColorContrasts(color, lightnessScale.slice(0, 8), leoBackgroundColor.colorKeys[0]),
|
|
346
|
-
baseDefaultContrast,
|
|
347
|
-
baseHoverContrast,
|
|
348
|
-
baseActiveContrast,
|
|
349
|
-
...getColorContrasts(color, lightnessScale.slice(8), leoBackgroundColor.colorKeys[0])
|
|
350
|
-
]
|
|
351
|
-
});
|
|
352
|
-
};
|
|
353
|
-
var generateScaleForColor = (color, mode, contrastMode = "aa") => {
|
|
354
|
-
const themeColor = generateThemeColor(color, mode, contrastMode);
|
|
355
|
-
const leoBackgroundColor = new BackgroundColor({
|
|
356
|
-
name: "backgroundColor",
|
|
357
|
-
colorKeys: ["#ffffff"],
|
|
358
|
-
ratios: [1]
|
|
359
|
-
});
|
|
360
|
-
const theme = new Theme({
|
|
361
|
-
colors: [themeColor],
|
|
362
|
-
backgroundColor: leoBackgroundColor,
|
|
363
|
-
lightness: 100
|
|
364
|
-
});
|
|
365
|
-
const outputArray = [];
|
|
366
|
-
for (let i = 0; i < theme.contrastColorValues.length; i++) {
|
|
367
|
-
outputArray.push({
|
|
368
|
-
hex: theme.contrastColorValues[i],
|
|
369
|
-
number: i + 1,
|
|
370
|
-
name: getColorNameFromNumber(i + 1)
|
|
371
|
-
});
|
|
372
|
-
}
|
|
373
|
-
outputArray.push({
|
|
374
|
-
hex: calculateContrastOneColor(theme.contrastColorValues[8]),
|
|
375
|
-
number: 14,
|
|
376
|
-
name: getColorNameFromNumber(14)
|
|
377
|
-
});
|
|
378
|
-
outputArray.push({
|
|
379
|
-
hex: calculateContrastTwoColor(theme.contrastColorValues[8]),
|
|
380
|
-
number: 15,
|
|
381
|
-
name: getColorNameFromNumber(15)
|
|
382
|
-
});
|
|
383
|
-
if (mode === "light") {
|
|
384
|
-
outputArray[8].hex = color;
|
|
385
|
-
}
|
|
386
|
-
return outputArray;
|
|
387
|
-
};
|
|
388
|
-
var generateThemeForColor = (color, contrastMode = "aa") => {
|
|
389
|
-
const lightScale = generateScaleForColor(color, "light", contrastMode);
|
|
390
|
-
const darkScale = generateScaleForColor(color, "dark", contrastMode);
|
|
391
|
-
const contrastScale = generateScaleForColor(color, "contrast", contrastMode);
|
|
392
|
-
return {
|
|
393
|
-
light: lightScale,
|
|
394
|
-
dark: darkScale,
|
|
395
|
-
contrast: contrastScale
|
|
396
|
-
};
|
|
397
|
-
};
|
|
398
|
-
var generateGlobalColors = ({ contrastMode = "aa" }) => {
|
|
399
|
-
const blueTheme = generateThemeForColor(blueBaseColor, contrastMode);
|
|
400
|
-
const greenTheme = generateThemeForColor(greenBaseColor, contrastMode);
|
|
401
|
-
const orangeTheme = generateThemeForColor(orangeBaseColor, contrastMode);
|
|
402
|
-
const purpleTheme = generateThemeForColor(purpleBaseColor, contrastMode);
|
|
403
|
-
const redTheme = generateThemeForColor(redBaseColor, contrastMode);
|
|
404
|
-
const yellowTheme = generateThemeForColor(yellowBaseColor, contrastMode);
|
|
405
|
-
return {
|
|
406
|
-
blue: blueTheme,
|
|
407
|
-
green: greenTheme,
|
|
408
|
-
orange: orangeTheme,
|
|
409
|
-
purple: purpleTheme,
|
|
410
|
-
red: redTheme,
|
|
411
|
-
yellow: yellowTheme
|
|
412
|
-
};
|
|
413
|
-
};
|
|
414
|
-
var generateColorTheme = ({ colors, contrastMode = "aa" }) => {
|
|
415
|
-
const accentTheme = generateThemeForColor(colors.accent, contrastMode);
|
|
416
|
-
const neutralTheme = generateThemeForColor(colors.neutral, contrastMode);
|
|
417
|
-
const brand1Theme = generateThemeForColor(colors.brand1, contrastMode);
|
|
418
|
-
const brand2Theme = generateThemeForColor(colors.brand2, contrastMode);
|
|
419
|
-
const brand3Theme = generateThemeForColor(colors.brand3, contrastMode);
|
|
420
|
-
return {
|
|
421
|
-
accent: accentTheme,
|
|
422
|
-
neutral: neutralTheme,
|
|
423
|
-
brand1: brand1Theme,
|
|
424
|
-
brand2: brand2Theme,
|
|
425
|
-
brand3: brand3Theme
|
|
426
|
-
};
|
|
427
|
-
};
|
|
428
|
-
var calculateContrastOneColor = (baseColor) => {
|
|
429
|
-
const contrastWhite = getContrastFromHex(baseColor, "#ffffff");
|
|
430
|
-
const contrastBlack = getContrastFromHex(baseColor, "#000000");
|
|
431
|
-
const lightness = contrastWhite >= contrastBlack ? 100 : 0;
|
|
432
|
-
return lightness === 0 ? "#000000" : "#ffffff";
|
|
433
|
-
};
|
|
434
|
-
var calculateContrastTwoColor = (color) => {
|
|
435
|
-
const contrastWhite = getContrastFromHex(color, "#ffffff");
|
|
436
|
-
const contrastBlack = getContrastFromHex(color, "#000000");
|
|
437
|
-
const lightness = getLightnessFromHex(color);
|
|
438
|
-
const doubleALightnessModifier = lightness <= 40 ? 60 : lightness >= 60 ? 60 : 50;
|
|
439
|
-
let targetLightness = 0;
|
|
440
|
-
const contrastDirection = contrastWhite >= contrastBlack ? "lighten" : "darken";
|
|
441
|
-
targetLightness = contrastDirection === "lighten" ? lightness + doubleALightnessModifier : lightness - doubleALightnessModifier;
|
|
442
|
-
return createColorWithLightness(color, targetLightness);
|
|
443
|
-
};
|
|
444
|
-
var canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
|
|
445
|
-
const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
|
|
446
|
-
const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
|
|
447
|
-
const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
|
|
448
|
-
const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
|
|
449
|
-
if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
|
|
450
|
-
return true;
|
|
451
|
-
} else if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
|
|
452
|
-
return true;
|
|
453
|
-
}
|
|
454
|
-
return false;
|
|
455
|
-
};
|
|
456
|
-
var createColorWithLightness = (color, lightness) => {
|
|
457
|
-
const leoBackgroundColor = new BackgroundColor({
|
|
458
|
-
name: "backgroundColor",
|
|
459
|
-
colorKeys: ["#ffffff"],
|
|
460
|
-
ratios: [1]
|
|
461
|
-
});
|
|
462
|
-
const colors = new Color({
|
|
463
|
-
name: "color",
|
|
464
|
-
colorKeys: [color],
|
|
465
|
-
ratios: [getContrastFromLightness(lightness, color, "#ffffff")]
|
|
466
|
-
});
|
|
467
|
-
const theme = new Theme({
|
|
468
|
-
colors: [colors],
|
|
469
|
-
backgroundColor: leoBackgroundColor,
|
|
470
|
-
lightness: 100
|
|
471
|
-
});
|
|
472
|
-
return theme.contrastColorValues[0];
|
|
473
|
-
};
|
|
474
|
-
var getColorNumberFromName = (name) => {
|
|
475
|
-
const colorMap = {
|
|
476
|
-
"Background Default": 1,
|
|
477
|
-
"Background Subtle": 2,
|
|
478
|
-
"Surface Default": 3,
|
|
479
|
-
"Surface Hover": 4,
|
|
480
|
-
"Surface Active": 5,
|
|
481
|
-
"Border Subtle": 6,
|
|
482
|
-
"Border Default": 7,
|
|
483
|
-
"Border Strong": 8,
|
|
484
|
-
"Base Default": 9,
|
|
485
|
-
"Base Hover": 10,
|
|
486
|
-
"Base Active": 11,
|
|
487
|
-
"Text Subtle": 12,
|
|
488
|
-
"Text Default": 13,
|
|
489
|
-
"Contrast Default": 14,
|
|
490
|
-
"Contrast Subtle": 15
|
|
491
|
-
};
|
|
492
|
-
return colorMap[name];
|
|
493
|
-
};
|
|
494
|
-
var getColorNameFromNumber = (number) => {
|
|
495
|
-
const colorMap = {
|
|
496
|
-
1: "Background Default",
|
|
497
|
-
2: "Background Subtle",
|
|
498
|
-
3: "Surface Default",
|
|
499
|
-
4: "Surface Hover",
|
|
500
|
-
5: "Surface Active",
|
|
501
|
-
6: "Border Subtle",
|
|
502
|
-
7: "Border Default",
|
|
503
|
-
8: "Border Strong",
|
|
504
|
-
9: "Base Default",
|
|
505
|
-
10: "Base Hover",
|
|
506
|
-
11: "Base Active",
|
|
507
|
-
12: "Text Subtle",
|
|
508
|
-
13: "Text Default",
|
|
509
|
-
14: "Contrast Default",
|
|
510
|
-
15: "Contrast Subtle"
|
|
511
|
-
};
|
|
512
|
-
return colorMap[number];
|
|
513
|
-
};
|
|
514
|
-
var getBaseColor = (color) => {
|
|
515
|
-
const conv = new Hsluv2();
|
|
516
|
-
conv.hex = color;
|
|
517
|
-
conv.hexToHsluv();
|
|
518
|
-
conv.hsluvToHex();
|
|
519
|
-
return conv.hex;
|
|
520
|
-
};
|
|
521
|
-
var getCssVariable = (colorType, colorNumber) => {
|
|
522
|
-
return `--ds-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, "-")}`;
|
|
523
|
-
};
|
|
524
|
-
export {
|
|
525
|
-
HSLToHex,
|
|
526
|
-
areColorsContrasting,
|
|
527
|
-
calculateContrastOneColor,
|
|
528
|
-
calculateContrastTwoColor,
|
|
529
|
-
canTextBeUsedOnColors,
|
|
530
|
-
createColorWithLightness,
|
|
531
|
-
generateColorTheme,
|
|
532
|
-
generateGlobalColors,
|
|
533
|
-
generateScaleForColor,
|
|
534
|
-
generateThemeForColor,
|
|
535
|
-
getApcaContrastLc,
|
|
536
|
-
getBaseColor,
|
|
537
|
-
getColorNameFromNumber,
|
|
538
|
-
getColorNumberFromName,
|
|
539
|
-
getContrastFromHex,
|
|
540
|
-
getContrastFromLightness,
|
|
541
|
-
getCssVariable,
|
|
542
|
-
getHslLightessFromHex,
|
|
543
|
-
getHslSaturationFromHex,
|
|
544
|
-
getLightnessFromHex,
|
|
545
|
-
getRatioFromLum,
|
|
546
|
-
hexToCssHsl,
|
|
547
|
-
hexToHSL,
|
|
548
|
-
hexToHsluv,
|
|
549
|
-
hexToRgb,
|
|
550
|
-
hslArrToCss,
|
|
551
|
-
isHexColor,
|
|
552
|
-
luminanceFromHex,
|
|
553
|
-
luminanceFromRgb
|
|
554
|
-
};
|
|
555
|
-
/*! Bundled license information:
|
|
556
|
-
|
|
557
|
-
colorparsley/src/colorparsley.js:
|
|
558
|
-
(** @preserve
|
|
559
|
-
///// CoLoR PaRsLeY a simple set of color parsing thingies!
|
|
560
|
-
///// Beta 0.1.8 Revision date: June 04, 2022
|
|
561
|
-
/////
|
|
562
|
-
///// Functions to parse color values and return array
|
|
563
|
-
///// Copyright (c) 2019-2022 by Andrew Somers. All Rights Reserved.
|
|
564
|
-
///// LICENSE: AGPL 3
|
|
565
|
-
///// CONTACT: Please use the ISSUES or DISCUSSIONS tab at:
|
|
566
|
-
///// https://github.com/Myndex/colorparsley/
|
|
567
|
-
/////
|
|
568
|
-
///////////////////////////////////////////////////////////////////////////////
|
|
569
|
-
/////
|
|
570
|
-
///// IMPORT:
|
|
571
|
-
///// import { colorParsley } from 'colorparsley';
|
|
572
|
-
/////
|
|
573
|
-
///// let rgbaArray = colorParsley('#abcdef');
|
|
574
|
-
/////
|
|
575
|
-
///// Output as array: [r,g,b,a,isValid,colorspace]
|
|
576
|
-
///// Example: [123,123,123,1.0,true,'sRGB']
|
|
577
|
-
// *)
|
|
578
|
-
|
|
579
|
-
apca-w3/src/apca-w3.js:
|
|
580
|
-
(** @preserve
|
|
581
|
-
///// SAPC APCA - Advanced Perceptual Contrast Algorithm
|
|
582
|
-
///// Beta 0.1.9 W3 • contrast function only
|
|
583
|
-
///// DIST: W3 • Revision date: July 3, 2022
|
|
584
|
-
///// Function to parse color values and determine Lc contrast
|
|
585
|
-
///// Copyright © 2019-2022 by Andrew Somers. All Rights Reserved.
|
|
586
|
-
///// LICENSE: W3 LICENSE
|
|
587
|
-
///// CONTACT: Please use the ISSUES or DISCUSSIONS tab at:
|
|
588
|
-
///// https://github.com/Myndex/SAPC-APCA/
|
|
589
|
-
/////
|
|
590
|
-
///////////////////////////////////////////////////////////////////////////////
|
|
591
|
-
/////
|
|
592
|
-
///// MINIMAL IMPORTS:
|
|
593
|
-
///// import { APCAcontrast, sRGBtoY, displayP3toY,
|
|
594
|
-
///// calcAPCA, fontLookupAPCA } from 'apca-w3';
|
|
595
|
-
///// import { colorParsley } from 'colorparsley';
|
|
596
|
-
/////
|
|
597
|
-
///// FORWARD CONTRAST USAGE:
|
|
598
|
-
///// Lc = APCAcontrast( sRGBtoY( TEXTcolor ) , sRGBtoY( BACKGNDcolor ) );
|
|
599
|
-
///// Where the colors are sent as an rgba array [255,255,255,1]
|
|
600
|
-
/////
|
|
601
|
-
///// Retrieving an array of font sizes for the contrast:
|
|
602
|
-
///// fontArray = fontLookupAPCA(Lc);
|
|
603
|
-
/////
|
|
604
|
-
///// Live Demonstrator at https://www.myndex.com/APCA/
|
|
605
|
-
// *)
|
|
606
|
-
*/
|
|
607
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export * from "./colorUtils.js";
|
|
2
|
+
export * from "./themeUtils.js";
|
|
3
|
+
export * from "./types.js";
|