@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.
Files changed (125) hide show
  1. package/dist/bin/designsystemet.js +32 -3439
  2. package/dist/src/colors/colorUtils.js +301 -343
  3. package/dist/src/colors/index.js +3 -607
  4. package/dist/src/colors/themeUtils.js +319 -348
  5. package/dist/src/colors/types.js +1 -1
  6. package/dist/src/init/createTokensPackage.js +228 -0
  7. package/dist/src/init/generateMetadataJson.js +16 -0
  8. package/dist/src/init/generateThemesJson.js +50 -0
  9. package/dist/src/init/index.js +7 -0
  10. package/dist/src/init/nextStepsMarkdown.js +90 -0
  11. package/dist/src/init/template/default-files/README.md +10 -0
  12. package/dist/src/init/template/default-files/design-tokens/README.md +3 -0
  13. package/dist/src/init/template/default-files/design-tokens/primitives/globals.json +197 -0
  14. package/dist/src/init/template/default-files/design-tokens/primitives/typography/default.json +86 -0
  15. package/dist/src/init/template/default-files/design-tokens/semantic/color.json +562 -0
  16. package/dist/src/init/template/default-files/design-tokens/semantic/style.json +543 -0
  17. package/dist/src/init/template/prettier.config.js +7 -0
  18. package/dist/src/init/template/template-files/design-tokens/primitives/colors/contrast/global.json +376 -0
  19. package/dist/src/init/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json +314 -0
  20. package/dist/src/init/template/template-files/design-tokens/primitives/colors/dark/global.json +376 -0
  21. package/dist/src/init/template/template-files/design-tokens/primitives/colors/dark/theme-template.json +314 -0
  22. package/dist/src/init/template/template-files/design-tokens/primitives/colors/light/global.json +376 -0
  23. package/dist/src/init/template/template-files/design-tokens/primitives/colors/light/theme-template.json +314 -0
  24. package/dist/src/init/template/template-files/design-tokens/themes/theme-template.json +314 -0
  25. package/dist/src/init/template/template-files/package.json +23 -0
  26. package/dist/src/init/utils.js +11 -0
  27. package/dist/src/migrations/beta-to-v1.js +341 -407
  28. package/dist/src/migrations/codemods/css/plugins.js +36 -42
  29. package/dist/src/migrations/codemods/css/run.js +20 -17
  30. package/dist/src/migrations/codemods/jsx/classname-prefix.js +63 -59
  31. package/dist/src/migrations/codemods/jsx/run.js +20 -20
  32. package/dist/src/migrations/index.js +5 -436
  33. package/dist/src/migrations/react-beta-to-v1.js +4 -27
  34. package/dist/src/test/a.css +39 -0
  35. package/dist/src/test/jsx-test.js +12 -0
  36. package/dist/src/tokens/actions.js +27 -2176
  37. package/dist/src/tokens/build.js +54 -2974
  38. package/dist/src/tokens/configs.js +234 -2874
  39. package/dist/src/tokens/formats/css.js +153 -2632
  40. package/dist/src/tokens/formats/js-tokens.js +28 -42
  41. package/dist/src/tokens/transformers.js +44 -82
  42. package/dist/src/tokens/utils/noCase.js +26 -28
  43. package/dist/src/tokens/utils/permutateThemes.js +65 -217
  44. package/dist/src/tokens/utils/utils.js +25 -14
  45. package/dist/types/bin/designsystemet.d.ts +3 -0
  46. package/dist/types/bin/designsystemet.d.ts.map +1 -0
  47. package/dist/types/src/colors/colorUtils.d.ts +126 -0
  48. package/dist/types/src/colors/colorUtils.d.ts.map +1 -0
  49. package/dist/types/src/colors/index.d.ts +4 -0
  50. package/dist/types/src/colors/index.d.ts.map +1 -0
  51. package/dist/types/src/colors/themeUtils.d.ts +102 -0
  52. package/dist/types/src/colors/themeUtils.d.ts.map +1 -0
  53. package/dist/types/src/colors/types.d.ts +16 -0
  54. package/dist/types/src/colors/types.d.ts.map +1 -0
  55. package/dist/types/src/init/createTokensPackage.d.ts +5 -0
  56. package/dist/types/src/init/createTokensPackage.d.ts.map +1 -0
  57. package/dist/types/src/init/generateMetadataJson.d.ts +6 -0
  58. package/dist/types/src/init/generateMetadataJson.d.ts.map +1 -0
  59. package/dist/types/src/init/generateThemesJson.d.ts +3 -0
  60. package/dist/types/src/init/generateThemesJson.d.ts.map +1 -0
  61. package/dist/types/src/init/index.d.ts +3 -0
  62. package/dist/types/src/init/index.d.ts.map +1 -0
  63. package/dist/types/src/init/nextStepsMarkdown.d.ts +3 -0
  64. package/dist/types/src/init/nextStepsMarkdown.d.ts.map +1 -0
  65. package/dist/types/src/init/template/prettier.config.d.mts +9 -0
  66. package/dist/types/src/init/template/prettier.config.d.mts.map +1 -0
  67. package/dist/types/src/init/utils.d.ts +4 -0
  68. package/dist/types/src/init/utils.d.ts.map +1 -0
  69. package/dist/types/src/migrations/beta-to-v1.d.ts +3 -0
  70. package/dist/types/src/migrations/beta-to-v1.d.ts.map +1 -0
  71. package/dist/types/src/migrations/codemods/css/plugins.d.ts +6 -0
  72. package/dist/types/src/migrations/codemods/css/plugins.d.ts.map +1 -0
  73. package/dist/types/src/migrations/codemods/css/run.d.ts +8 -0
  74. package/dist/types/src/migrations/codemods/css/run.d.ts.map +1 -0
  75. package/dist/types/src/migrations/codemods/jsx/classname-prefix.d.ts +10 -0
  76. package/dist/types/src/migrations/codemods/jsx/classname-prefix.d.ts.map +1 -0
  77. package/dist/types/src/migrations/codemods/jsx/run.d.ts +7 -0
  78. package/dist/types/src/migrations/codemods/jsx/run.d.ts.map +1 -0
  79. package/dist/types/src/migrations/index.d.ts +6 -0
  80. package/dist/types/src/migrations/index.d.ts.map +1 -0
  81. package/dist/types/src/migrations/react-beta-to-v1.d.ts +3 -0
  82. package/dist/types/src/migrations/react-beta-to-v1.d.ts.map +1 -0
  83. package/dist/types/src/test/jsx-test.d.ts +4 -0
  84. package/dist/types/src/test/jsx-test.d.ts.map +1 -0
  85. package/dist/types/src/tokens/actions.d.ts +6 -0
  86. package/dist/types/src/tokens/actions.d.ts.map +1 -0
  87. package/dist/types/src/tokens/build.d.ts +11 -0
  88. package/dist/types/src/tokens/build.d.ts.map +1 -0
  89. package/dist/types/src/tokens/configs.d.ts +31 -0
  90. package/dist/types/src/tokens/configs.d.ts.map +1 -0
  91. package/dist/types/src/tokens/formats/css.d.ts +5 -0
  92. package/dist/types/src/tokens/formats/css.d.ts.map +1 -0
  93. package/dist/types/src/tokens/formats/js-tokens.d.ts +6 -0
  94. package/dist/types/src/tokens/formats/js-tokens.d.ts.map +1 -0
  95. package/dist/types/src/tokens/transformers.d.ts +5 -0
  96. package/dist/types/src/tokens/transformers.d.ts.map +1 -0
  97. package/dist/types/src/tokens/utils/noCase.d.ts +11 -0
  98. package/dist/types/src/tokens/utils/noCase.d.ts.map +1 -0
  99. package/dist/types/src/tokens/utils/permutateThemes.d.ts +17 -0
  100. package/dist/types/src/tokens/utils/permutateThemes.d.ts.map +1 -0
  101. package/dist/types/src/tokens/utils/utils.d.ts +24 -0
  102. package/dist/types/src/tokens/utils/utils.d.ts.map +1 -0
  103. package/package.json +11 -17
  104. package/LICENSE +0 -7
  105. package/dist/bin/designsystemet.js.map +0 -1
  106. package/dist/src/colors/colorUtils.js.map +0 -1
  107. package/dist/src/colors/index.js.map +0 -1
  108. package/dist/src/colors/themeUtils.js.map +0 -1
  109. package/dist/src/colors/types.js.map +0 -1
  110. package/dist/src/migrations/beta-to-v1.js.map +0 -1
  111. package/dist/src/migrations/codemods/css/plugins.js.map +0 -1
  112. package/dist/src/migrations/codemods/css/run.js.map +0 -1
  113. package/dist/src/migrations/codemods/jsx/classname-prefix.js.map +0 -1
  114. package/dist/src/migrations/codemods/jsx/run.js.map +0 -1
  115. package/dist/src/migrations/index.js.map +0 -1
  116. package/dist/src/migrations/react-beta-to-v1.js.map +0 -1
  117. package/dist/src/tokens/actions.js.map +0 -1
  118. package/dist/src/tokens/build.js.map +0 -1
  119. package/dist/src/tokens/configs.js.map +0 -1
  120. package/dist/src/tokens/formats/css.js.map +0 -1
  121. package/dist/src/tokens/formats/js-tokens.js.map +0 -1
  122. package/dist/src/tokens/transformers.js.map +0 -1
  123. package/dist/src/tokens/utils/noCase.js.map +0 -1
  124. package/dist/src/tokens/utils/permutateThemes.js.map +0 -1
  125. package/dist/src/tokens/utils/utils.js.map +0 -1
@@ -1,607 +1,3 @@
1
- // src/colors/colorUtils.ts
2
- import { Hsluv } from "hsluv";
3
- import chroma from "chroma-js";
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";