reshaped 3.6.0-canary.4 → 3.6.0-canary.5

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 (137) hide show
  1. package/dist/cjs/cli/theming/index.d.ts +3 -3
  2. package/dist/cjs/cli/theming/index.js +2 -2
  3. package/dist/cjs/cli/theming/tailwind.d.ts +2 -3
  4. package/dist/cjs/themes/_generator/definitions/slate.js +1 -1
  5. package/dist/cjs/themes/_generator/tokens/color/color.transforms.d.ts +2 -2
  6. package/dist/cjs/themes/_generator/tokens/color/color.transforms.js +29 -7
  7. package/dist/cjs/themes/_generator/tokens/color/color.types.d.ts +28 -3
  8. package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.d.ts +20 -0
  9. package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.js +64 -0
  10. package/dist/cjs/themes/_generator/tokens/color/utilities/convert.d.ts +11 -0
  11. package/dist/cjs/themes/_generator/tokens/color/utilities/convert.js +33 -0
  12. package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.d.ts +4 -0
  13. package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js +152 -0
  14. package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +4 -0
  15. package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.js +68 -0
  16. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.js +38 -0
  17. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.d.ts +1 -0
  18. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.js +48 -0
  19. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.d.ts +1 -0
  20. package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.js +21 -0
  21. package/dist/{themes/_generator/utilities → cjs/themes/_generator/tokens}/css.d.ts +1 -1
  22. package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.d.ts +2 -2
  23. package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.js +2 -2
  24. package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.d.ts +2 -2
  25. package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.js +2 -2
  26. package/dist/cjs/themes/_generator/tokens/font/font.transforms.d.ts +2 -2
  27. package/dist/cjs/themes/_generator/tokens/font/font.transforms.js +3 -3
  28. package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts +2 -2
  29. package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.js +2 -2
  30. package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts +2 -2
  31. package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.js +2 -2
  32. package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.d.ts +2 -2
  33. package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.js +2 -2
  34. package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.d.ts +2 -2
  35. package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.js +4 -4
  36. package/dist/cjs/themes/_generator/tokens/types.d.ts +19 -17
  37. package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.d.ts +2 -2
  38. package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.js +2 -2
  39. package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.d.ts +5 -0
  40. package/dist/cjs/themes/_generator/{utilities/generateUnits.js → tokens/unit/utilities/generate.js} +5 -4
  41. package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.d.ts +2 -2
  42. package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.js +2 -2
  43. package/dist/cjs/themes/_generator/transform.d.ts +3 -2
  44. package/dist/cjs/themes/_generator/transform.js +39 -11
  45. package/dist/cjs/themes/_generator/types.d.ts +4 -8
  46. package/dist/cjs/themes/_generator/utilities/mergeDefinitions.d.ts +1 -3
  47. package/dist/cjs/themes/_generator/utilities/mergeDefinitions.js +6 -4
  48. package/dist/cjs/themes/figma/theme.css +1 -1
  49. package/dist/cjs/themes/fragments/twitter/theme.css +1 -1
  50. package/dist/cjs/themes/index.d.ts +4 -11
  51. package/dist/cjs/themes/index.js +2 -5
  52. package/dist/cjs/themes/reshaped/theme.css +1 -1
  53. package/dist/cjs/themes/slate/theme.css +1 -1
  54. package/dist/cjs/types/config.d.ts +11 -7
  55. package/dist/cli/theming/index.d.ts +3 -3
  56. package/dist/cli/theming/index.js +2 -2
  57. package/dist/cli/theming/tailwind.d.ts +2 -3
  58. package/dist/components/FormControl/FormControl.context.d.ts +1 -1
  59. package/dist/tests/ThemesPlayground.d.ts +2 -0
  60. package/dist/tests/ThemesPlayground.js +90 -0
  61. package/dist/tests/themes.stories.d.ts +16 -0
  62. package/dist/{themes/_generator/tests → tests}/themes.stories.js +74 -15
  63. package/dist/themes/_generator/definitions/slate.js +1 -1
  64. package/dist/themes/_generator/tokens/color/color.transforms.d.ts +2 -2
  65. package/dist/themes/_generator/tokens/color/color.transforms.js +29 -7
  66. package/dist/themes/_generator/tokens/color/color.types.d.ts +28 -3
  67. package/dist/themes/_generator/tokens/color/utilities/a11y.d.ts +20 -0
  68. package/dist/themes/_generator/tokens/color/utilities/a11y.js +58 -0
  69. package/dist/themes/_generator/tokens/color/utilities/convert.d.ts +11 -0
  70. package/dist/themes/_generator/tokens/color/utilities/convert.js +27 -0
  71. package/dist/themes/_generator/tokens/color/utilities/generateColors.d.ts +4 -0
  72. package/dist/themes/_generator/tokens/color/utilities/generateColors.js +150 -0
  73. package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +4 -0
  74. package/dist/themes/_generator/tokens/color/utilities/generateMetaColors.js +66 -0
  75. package/dist/{cjs/themes/_generator/utilities → themes/_generator/tokens}/css.d.ts +1 -1
  76. package/dist/themes/_generator/tokens/duration/duration.transforms.d.ts +2 -2
  77. package/dist/themes/_generator/tokens/duration/duration.transforms.js +2 -2
  78. package/dist/themes/_generator/tokens/easing/easing.transforms.d.ts +2 -2
  79. package/dist/themes/_generator/tokens/easing/easing.transforms.js +2 -2
  80. package/dist/themes/_generator/tokens/font/font.transforms.d.ts +2 -2
  81. package/dist/themes/_generator/tokens/font/font.transforms.js +3 -3
  82. package/dist/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts +2 -2
  83. package/dist/themes/_generator/tokens/fontFamily/fontFamily.transforms.js +2 -2
  84. package/dist/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts +2 -2
  85. package/dist/themes/_generator/tokens/fontWeight/fontWeight.transforms.js +2 -2
  86. package/dist/themes/_generator/tokens/radius/radius.transforms.d.ts +2 -2
  87. package/dist/themes/_generator/tokens/radius/radius.transforms.js +2 -2
  88. package/dist/themes/_generator/tokens/shadow/shadow.transforms.d.ts +2 -2
  89. package/dist/themes/_generator/tokens/shadow/shadow.transforms.js +4 -4
  90. package/dist/themes/_generator/tokens/types.d.ts +19 -17
  91. package/dist/themes/_generator/tokens/unit/unit.transforms.d.ts +2 -2
  92. package/dist/themes/_generator/tokens/unit/unit.transforms.js +2 -2
  93. package/dist/themes/_generator/tokens/unit/utilities/generate.d.ts +5 -0
  94. package/dist/themes/_generator/{utilities/generateUnits.js → tokens/unit/utilities/generate.js} +4 -5
  95. package/dist/themes/_generator/tokens/viewport/viewport.transforms.d.ts +2 -2
  96. package/dist/themes/_generator/tokens/viewport/viewport.transforms.js +2 -2
  97. package/dist/themes/_generator/transform.d.ts +3 -2
  98. package/dist/themes/_generator/transform.js +39 -11
  99. package/dist/themes/_generator/types.d.ts +4 -8
  100. package/dist/themes/_generator/utilities/mergeDefinitions.d.ts +1 -3
  101. package/dist/themes/_generator/utilities/mergeDefinitions.js +6 -4
  102. package/dist/themes/figma/theme.css +1 -1
  103. package/dist/themes/fragments/twitter/theme.css +1 -1
  104. package/dist/themes/index.d.ts +4 -11
  105. package/dist/themes/index.js +1 -4
  106. package/dist/themes/reshaped/theme.css +1 -1
  107. package/dist/themes/slate/theme.css +1 -1
  108. package/dist/types/config.d.ts +11 -7
  109. package/dist/types/global.d.ts +3 -0
  110. package/package.json +11 -11
  111. package/dist/cjs/themes/_generator/utilities/color.d.ts +0 -105
  112. package/dist/cjs/themes/_generator/utilities/color.js +0 -409
  113. package/dist/cjs/themes/_generator/utilities/generateBackgroundColors.d.ts +0 -4
  114. package/dist/cjs/themes/_generator/utilities/generateBackgroundColors.js +0 -59
  115. package/dist/cjs/themes/_generator/utilities/generateColors.d.ts +0 -11
  116. package/dist/cjs/themes/_generator/utilities/generateColors.js +0 -178
  117. package/dist/cjs/themes/_generator/utilities/generateUnits.d.ts +0 -4
  118. package/dist/cjs/themes/_generator/utilities/mergeDeep.d.ts +0 -5
  119. package/dist/cjs/themes/_generator/utilities/mergeDeep.js +0 -24
  120. package/dist/cjs/themes/_generator/utilities/resolveTokenReference.d.ts +0 -3
  121. package/dist/cjs/themes/_generator/utilities/resolveTokenReference.js +0 -18
  122. package/dist/cjs/themes/_generator/utilities/tests/color.test.js +0 -81
  123. package/dist/themes/_generator/tests/themes.stories.d.ts +0 -16
  124. package/dist/themes/_generator/utilities/color.d.ts +0 -105
  125. package/dist/themes/_generator/utilities/color.js +0 -377
  126. package/dist/themes/_generator/utilities/generateBackgroundColors.d.ts +0 -4
  127. package/dist/themes/_generator/utilities/generateBackgroundColors.js +0 -57
  128. package/dist/themes/_generator/utilities/generateColors.d.ts +0 -11
  129. package/dist/themes/_generator/utilities/generateColors.js +0 -176
  130. package/dist/themes/_generator/utilities/generateUnits.d.ts +0 -4
  131. package/dist/themes/_generator/utilities/mergeDeep.d.ts +0 -5
  132. package/dist/themes/_generator/utilities/mergeDeep.js +0 -22
  133. package/dist/themes/_generator/utilities/resolveTokenReference.d.ts +0 -3
  134. package/dist/themes/_generator/utilities/resolveTokenReference.js +0 -16
  135. /package/dist/cjs/themes/_generator/{utilities/tests/color.test.d.ts → tokens/color/utilities/tests/a11y.test.d.ts} +0 -0
  136. /package/dist/cjs/themes/_generator/{utilities → tokens}/css.js +0 -0
  137. /package/dist/themes/_generator/{utilities → tokens}/css.js +0 -0
@@ -1,409 +0,0 @@
1
- "use strict";
2
- /**
3
- * Some of the color conversion utilities are taken from https://github.com/hsluv/hsluv-javascript
4
- * They have been rewritten for easier color transformations in the theme generation case
5
- */
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.getOnColor = exports.getOnColorAPCA = exports.getOnColorWCAG = exports.getLuminanceDelta = exports.getDarkModeColor = exports.hslToHex = exports.hexToHsluv = exports.hexToHsl = exports.hsluvToHex = exports.hsluvToLch = exports.lchToHsluv = exports.lchToLuv = exports.luvToLch = exports.luvToXyz = exports.xyzToLuv = exports.lToY = exports.yToL = exports.xyzToRgb = exports.rgbToXyz = exports.fromLinear = exports.toLinear = exports.rgbToHex = exports.hslToRgb = exports.rgbToHsl = exports.calcMaxChromaHsluv = exports.distanceFromOriginAngle = exports.calculateBoundingLines = void 0;
8
- exports.hexToRgb = hexToRgb;
9
- exports.getRgbLuminance = getRgbLuminance;
10
- /**
11
- * Constants
12
- */
13
- const epsilon = 0.0088564516;
14
- const refY = 1.0;
15
- const refU = 0.19783000664283;
16
- const refV = 0.46831999493879;
17
- const kappa = 903.2962962;
18
- const mr0 = 3.240969941904521;
19
- const mr1 = -1.537383177570093;
20
- const mr2 = -0.498610760293;
21
- const mg0 = -0.96924363628087;
22
- const mg1 = 1.87596750150772;
23
- const mg2 = 0.041555057407175;
24
- const mb0 = 0.055630079696993;
25
- const mb1 = -0.20397695888897;
26
- const mb2 = 1.056971514242878;
27
- /**
28
- * Color utilities
29
- */
30
- const calculateBoundingLines = (l) => {
31
- const sub1 = Math.pow(l + 16, 3) / 1560896;
32
- const sub2 = sub1 > epsilon ? sub1 : l / kappa;
33
- const s1r = sub2 * (284517 * mr0 - 94839 * mr2);
34
- const s2r = sub2 * (838422 * mr2 + 769860 * mr1 + 731718 * mr0);
35
- const s3r = sub2 * (632260 * mr2 - 126452 * mr1);
36
- const s1g = sub2 * (284517 * mg0 - 94839 * mg2);
37
- const s2g = sub2 * (838422 * mg2 + 769860 * mg1 + 731718 * mg0);
38
- const s3g = sub2 * (632260 * mg2 - 126452 * mg1);
39
- const s1b = sub2 * (284517 * mb0 - 94839 * mb2);
40
- const s2b = sub2 * (838422 * mb2 + 769860 * mb1 + 731718 * mb0);
41
- const s3b = sub2 * (632260 * mb2 - 126452 * mb1);
42
- return {
43
- r0s: s1r / s3r,
44
- r0i: (s2r * l) / s3r,
45
- r1s: s1r / (s3r + 126452),
46
- r1i: ((s2r - 769860) * l) / (s3r + 126452),
47
- g0s: s1g / s3g,
48
- g0i: (s2g * l) / s3g,
49
- g1s: s1g / (s3g + 126452),
50
- g1i: ((s2g - 769860) * l) / (s3g + 126452),
51
- b0s: s1b / s3b,
52
- b0i: (s2b * l) / s3b,
53
- b1s: s1b / (s3b + 126452),
54
- b1i: ((s2b - 769860) * l) / (s3b + 126452),
55
- };
56
- };
57
- exports.calculateBoundingLines = calculateBoundingLines;
58
- const distanceFromOriginAngle = (slope, intercept, angle) => {
59
- const d = intercept / (Math.sin(angle) - slope * Math.cos(angle));
60
- return d < 0 ? Infinity : d;
61
- };
62
- exports.distanceFromOriginAngle = distanceFromOriginAngle;
63
- const calcMaxChromaHsluv = (h, boundingLines) => {
64
- const hueRad = (h / 360) * Math.PI * 2;
65
- const r0 = (0, exports.distanceFromOriginAngle)(boundingLines.r0s, boundingLines.r0i, hueRad);
66
- const r1 = (0, exports.distanceFromOriginAngle)(boundingLines.r1s, boundingLines.r1i, hueRad);
67
- const g0 = (0, exports.distanceFromOriginAngle)(boundingLines.g0s, boundingLines.g0i, hueRad);
68
- const g1 = (0, exports.distanceFromOriginAngle)(boundingLines.g1s, boundingLines.g1i, hueRad);
69
- const b0 = (0, exports.distanceFromOriginAngle)(boundingLines.b0s, boundingLines.b0i, hueRad);
70
- const b1 = (0, exports.distanceFromOriginAngle)(boundingLines.b1s, boundingLines.b1i, hueRad);
71
- return Math.min(r0, r1, g0, g1, b0, b1);
72
- };
73
- exports.calcMaxChromaHsluv = calcMaxChromaHsluv;
74
- function hexToRgb(hex) {
75
- hex = hex.replace("#", "");
76
- const r = parseInt(hex.substring(0, 2), 16);
77
- const g = parseInt(hex.substring(2, 4), 16);
78
- const b = parseInt(hex.substring(4, 6), 16);
79
- return { r, g, b };
80
- }
81
- const rgbToHsl = ({ r, g, b }) => {
82
- r /= 255;
83
- g /= 255;
84
- b /= 255;
85
- const cmin = Math.min(r, g, b);
86
- const cmax = Math.max(r, g, b);
87
- const delta = cmax - cmin;
88
- let h = 0;
89
- let s = 0;
90
- let l = 0;
91
- if (delta == 0)
92
- h = 0;
93
- else if (cmax == r)
94
- h = ((g - b) / delta) % 6;
95
- else if (cmax == g)
96
- h = (b - r) / delta + 2;
97
- else
98
- h = (r - g) / delta + 4;
99
- h = Math.round(h * 60);
100
- if (h < 0)
101
- h += 360;
102
- l = (cmax + cmin) / 2;
103
- s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
104
- s = +(s * 100).toFixed(1);
105
- l = +(l * 100).toFixed(1);
106
- return { h, s: Math.round(s), l: Math.round(l) };
107
- };
108
- exports.rgbToHsl = rgbToHsl;
109
- const hslToRgb = ({ h, s, l }) => {
110
- s /= 100;
111
- l /= 100;
112
- const c = (1 - Math.abs(2 * l - 1)) * s;
113
- const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
114
- const m = l - c / 2;
115
- const isSector1 = 0 <= h && h < 60;
116
- const isSector2 = 60 <= h && h < 120;
117
- const isSector3 = 120 <= h && h < 180;
118
- const isSector4 = 180 <= h && h < 240;
119
- const isSector5 = 240 <= h && h < 300;
120
- const isSector6 = 300 <= h && h < 360;
121
- const r = isSector1 || isSector6 ? c : isSector2 || isSector5 ? x : 0;
122
- const g = isSector1 || isSector4 ? x : isSector2 || isSector3 ? c : 0;
123
- const b = isSector1 || isSector2 ? 0 : isSector3 || isSector6 ? x : c;
124
- return {
125
- r: Math.round((r + m) * 255),
126
- g: Math.round((g + m) * 255),
127
- b: Math.round((b + m) * 255),
128
- };
129
- };
130
- exports.hslToRgb = hslToRgb;
131
- const rgbToHex = ({ r, g, b }) => {
132
- const red = Math.round(r).toString(16).padStart(2, "0");
133
- const green = Math.round(g).toString(16).padStart(2, "0");
134
- const blue = Math.round(b).toString(16).padStart(2, "0");
135
- return `#${red}${green}${blue}`;
136
- };
137
- exports.rgbToHex = rgbToHex;
138
- const toLinear = (c) => {
139
- if (c > 0.04045)
140
- return Math.pow((c + 0.055) / 1.055, 2.4);
141
- return c / 12.92;
142
- };
143
- exports.toLinear = toLinear;
144
- const fromLinear = (c) => {
145
- if (c <= 0.0031308)
146
- return 12.92 * c;
147
- return 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
148
- };
149
- exports.fromLinear = fromLinear;
150
- const rgbToXyz = ({ r, g, b }) => {
151
- const lr = (0, exports.toLinear)(r / 255);
152
- const lg = (0, exports.toLinear)(g / 255);
153
- const lb = (0, exports.toLinear)(b / 255);
154
- return {
155
- x: 0.41239079926595 * lr + 0.35758433938387 * lg + 0.18048078840183 * lb,
156
- y: 0.21263900587151 * lr + 0.71516867876775 * lg + 0.072192315360733 * lb,
157
- z: 0.019330818715591 * lr + 0.11919477979462 * lg + 0.95053215224966 * lb,
158
- };
159
- };
160
- exports.rgbToXyz = rgbToXyz;
161
- const xyzToRgb = ({ x, y, z }) => {
162
- return {
163
- r: (0, exports.fromLinear)(mr0 * x + mr1 * y + mr2 * z) * 255,
164
- g: (0, exports.fromLinear)(mg0 * x + mg1 * y + mg2 * z) * 255,
165
- b: (0, exports.fromLinear)(mb0 * x + mb1 * y + mb2 * z) * 255,
166
- };
167
- };
168
- exports.xyzToRgb = xyzToRgb;
169
- const yToL = (y) => {
170
- if (y <= epsilon)
171
- return (y / refY) * kappa;
172
- return 116 * Math.pow(y / refY, 1 / 3) - 16;
173
- };
174
- exports.yToL = yToL;
175
- const lToY = (l) => {
176
- if (l <= 8)
177
- return (refY * l) / kappa;
178
- return refY * Math.pow((l + 16) / 116, 3);
179
- };
180
- exports.lToY = lToY;
181
- const xyzToLuv = ({ x, y, z }) => {
182
- const divider = x + 15 * y + 3 * z;
183
- const varU = divider !== 0 ? (4 * x) / divider : NaN;
184
- const varV = divider !== 0 ? (9 * y) / divider : NaN;
185
- const l = (0, exports.yToL)(y);
186
- return {
187
- l,
188
- u: l === 0 ? 0 : 13 * l * (varU - refU),
189
- v: l === 0 ? 0 : 13 * l * (varV - refV),
190
- };
191
- };
192
- exports.xyzToLuv = xyzToLuv;
193
- const luvToXyz = ({ l, u, v }) => {
194
- if (l === 0)
195
- return { x: 0, y: 0, z: 0 };
196
- const varU = u / (13 * l) + refU;
197
- const varV = v / (13 * l) + refV;
198
- const y = (0, exports.lToY)(l);
199
- const x = 0 - (9 * y * varU) / ((varU - 4) * varV - varU * varV);
200
- const z = (9 * y - 15 * varV * y - varV * x) / (3 * varV);
201
- return { x, y, z };
202
- };
203
- exports.luvToXyz = luvToXyz;
204
- const luvToLch = ({ l, u, v }) => {
205
- const c = Math.sqrt(u * u + v * v);
206
- let h;
207
- if (c < 0.00000001) {
208
- h = 0;
209
- }
210
- else {
211
- const hrad = Math.atan2(v, u);
212
- h = (hrad * 180.0) / Math.PI;
213
- if (h < 0)
214
- h = 360 + h;
215
- }
216
- return { l, c, h };
217
- };
218
- exports.luvToLch = luvToLch;
219
- const lchToLuv = ({ l, c, h }) => {
220
- const hrad = (h / 180.0) * Math.PI;
221
- return {
222
- l,
223
- u: Math.cos(hrad) * c,
224
- v: Math.sin(hrad) * c,
225
- };
226
- };
227
- exports.lchToLuv = lchToLuv;
228
- const lchToHsluv = ({ l, c, h }) => {
229
- let s;
230
- let newL;
231
- if (l > 99.9999999) {
232
- s = 0;
233
- newL = 100;
234
- }
235
- else if (l < 0.00000001) {
236
- s = 0;
237
- newL = 0;
238
- }
239
- else {
240
- const boundingLines = (0, exports.calculateBoundingLines)(l);
241
- const max = (0, exports.calcMaxChromaHsluv)(h, boundingLines);
242
- s = (c / max) * 100;
243
- newL = l;
244
- }
245
- return { h, s, l: newL };
246
- };
247
- exports.lchToHsluv = lchToHsluv;
248
- const hsluvToLch = ({ h, s, l }) => {
249
- let newL;
250
- let c;
251
- if (l > 99.9999999) {
252
- newL = 100;
253
- c = 0;
254
- }
255
- else if (l < 0.00000001) {
256
- newL = 0;
257
- c = 0;
258
- }
259
- else {
260
- const boundingLines = (0, exports.calculateBoundingLines)(l);
261
- const max = (0, exports.calcMaxChromaHsluv)(h, boundingLines);
262
- newL = l;
263
- c = (max / 100) * s;
264
- }
265
- return { l: newL, c, h };
266
- };
267
- exports.hsluvToLch = hsluvToLch;
268
- const hsluvToHex = (hsl) => {
269
- const lch = (0, exports.hsluvToLch)(hsl);
270
- const luv = (0, exports.lchToLuv)(lch);
271
- const xyz = (0, exports.luvToXyz)(luv);
272
- const rgb = (0, exports.xyzToRgb)(xyz);
273
- return (0, exports.rgbToHex)(rgb);
274
- };
275
- exports.hsluvToHex = hsluvToHex;
276
- const hexToHsl = (H) => {
277
- const rgb = hexToRgb(H);
278
- return (0, exports.rgbToHsl)(rgb);
279
- };
280
- exports.hexToHsl = hexToHsl;
281
- const hexToHsluv = (hex) => {
282
- const rgb = hexToRgb(hex);
283
- const xyz = (0, exports.rgbToXyz)(rgb);
284
- const luv = (0, exports.xyzToLuv)(xyz);
285
- const lch = (0, exports.luvToLch)(luv);
286
- return (0, exports.lchToHsluv)(lch);
287
- };
288
- exports.hexToHsluv = hexToHsluv;
289
- const hslToHex = (hsl) => {
290
- const rgb = (0, exports.hslToRgb)(hsl);
291
- return (0, exports.rgbToHex)(rgb);
292
- };
293
- exports.hslToHex = hslToHex;
294
- /**
295
- * Normalizing utilities
296
- */
297
- const getDarkModeColor = (hsl) => {
298
- const { s, l } = hsl;
299
- /**
300
- * Colors with lower saturation should have bigger lightness delta, for example it can be
301
- * Neutral: l: 97 -> l dark: 13
302
- * Warning: l: 53 -> l dark: 47
303
- *
304
- * Therefor we calculate the dark mode lightness based on a saturation modifier, which should be between 0 and 1
305
- * We take base saturation:
306
- * Neutral: 20 -> 0.2 modifier, Warning: 96 -> 0.96 modifier
307
- *
308
- * And we also adjust that value with a modifier of 0.9-2 based on the saturation
309
- * That way satured colors won't change much from its original value
310
- */
311
- const sModifier = (s / 100) * (0.96 + (100 - s) / 100);
312
- return { ...hsl, s: Math.max(0, s - 7), l: l * sModifier };
313
- };
314
- exports.getDarkModeColor = getDarkModeColor;
315
- const getLuminanceDelta = (luminance) => {
316
- return Math.max(0, luminance - 50) / 5;
317
- };
318
- exports.getLuminanceDelta = getLuminanceDelta;
319
- function getRgbLuminance({ r, g, b }) {
320
- r /= 255;
321
- g /= 255;
322
- b /= 255;
323
- const y = 0.2126 * r + 0.7152 * g + 0.0722 * b;
324
- // The CIE standard states 0.008856 but 216/24389 is the intent for 0.008856451679036
325
- if (y <= 216 / 24389) {
326
- // The CIE standard states 903.3, but 24389/27 is the intent, making 903.296296296296296
327
- return y * (24389 / 27);
328
- }
329
- else {
330
- return Math.pow(y, 1 / 3) * 116 - 16;
331
- }
332
- }
333
- /**
334
- * WCAG contrast
335
- */
336
- const RED = 0.2126;
337
- const GREEN = 0.7152;
338
- const BLUE = 0.0722;
339
- const GAMMA = 2.4;
340
- function luminanceWCAG(r, g, b) {
341
- const a = [r, g, b].map((v) => {
342
- v /= 255;
343
- return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
344
- });
345
- return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
346
- }
347
- function contrastWCAG(rgb1, rgb2) {
348
- const lum1 = luminanceWCAG(...rgb1);
349
- const lum2 = luminanceWCAG(...rgb2);
350
- const brightest = Math.max(lum1, lum2);
351
- const darkest = Math.min(lum1, lum2);
352
- return (brightest + 0.05) / (darkest + 0.05);
353
- }
354
- const getOnColorWCAG = (args) => {
355
- const { bgHexColor, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
356
- const bgRgb = hexToRgb(bgHexColor);
357
- const lightRgb = hexToRgb(lightHexColor);
358
- return contrastWCAG([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
359
- ? lightHexColor
360
- : darkHexColor;
361
- };
362
- exports.getOnColorWCAG = getOnColorWCAG;
363
- /**
364
- * APCA contrast
365
- */
366
- function luminanceAPCA({ r, g, b }) {
367
- return (0.2126 * Math.pow(r / 255, 2.2) +
368
- 0.7152 * Math.pow(g / 255, 2.2) +
369
- 0.0722 * Math.pow(b / 255, 2.2));
370
- }
371
- function contrastAPCA(backgroundLuminance, textLuminance) {
372
- // Calculate the contrast based on APCA
373
- const Lc = textLuminance - backgroundLuminance;
374
- return Math.abs(Lc); // Return the absolute value of contrast
375
- }
376
- const getOnColorAPCA = (args) => {
377
- const { bgHexColor, mode, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
378
- const bgHexAlpha = bgHexColor.slice(7);
379
- const bgAlpha = bgHexAlpha ? Number((parseInt(bgHexAlpha, 16) / 255).toFixed(2)) : 1;
380
- const bgColor = hexToRgb(bgHexColor.slice(0, 7));
381
- const baseColor = mode === "light" ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 };
382
- const { r, g, b } = {
383
- r: (1 - bgAlpha) * baseColor.r + bgAlpha * bgColor.r,
384
- g: (1 - bgAlpha) * baseColor.g + bgAlpha * bgColor.g,
385
- b: (1 - bgAlpha) * baseColor.b + bgAlpha * bgColor.b,
386
- };
387
- // Calculate luminance for background and for white & black
388
- const backgroundLuminance = luminanceAPCA({ r, g, b });
389
- const whiteLuminance = luminanceAPCA({ r: 255, g: 255, b: 255 });
390
- const blackLuminance = luminanceAPCA({ r: 0, g: 0, b: 0 });
391
- // Calculate contrast
392
- const contrastWithWhite = contrastAPCA(backgroundLuminance, whiteLuminance);
393
- const contrastWithBlack = contrastAPCA(backgroundLuminance, blackLuminance);
394
- // Choose the color with higher contrast
395
- return contrastWithWhite > contrastWithBlack ? lightHexColor : darkHexColor;
396
- };
397
- exports.getOnColorAPCA = getOnColorAPCA;
398
- /**
399
- * On color resolver
400
- */
401
- const getOnColor = (args) => {
402
- if (args.algorithm === "apca") {
403
- return (0, exports.getOnColorAPCA)(args);
404
- }
405
- else {
406
- return (0, exports.getOnColorWCAG)(args);
407
- }
408
- };
409
- exports.getOnColor = getOnColor;
@@ -1,4 +0,0 @@
1
- import type * as T from "../types";
2
- import type { FullThemeDefinition } from "../tokens/types";
3
- declare const generateBackgroundColors: (definition: T.PartialDeep<FullThemeDefinition>, themeOptions?: T.PublicOptions["themeOptions"]) => void;
4
- export default generateBackgroundColors;
@@ -1,59 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const color_1 = require("./color");
4
- const constants_1 = require("../constants");
5
- const string_1 = require("../../../utilities/string");
6
- const generateBackgroundColors = (definition, themeOptions) => {
7
- if (!definition.color)
8
- return;
9
- Object.keys(definition.color).forEach((tokenName) => {
10
- const bgToken = definition.color?.[tokenName];
11
- const generatedForegroundName = `on${(0, string_1.capitalize)(tokenName)}`;
12
- const generatedRGBName = `rgb${(0, string_1.capitalize)(tokenName)}`;
13
- const generateOnColorsFor = [
14
- ...constants_1.bgWithDynamicForeground,
15
- ...(themeOptions?.generateOnColorsFor || []),
16
- ];
17
- const needsDynamicForeground = generateOnColorsFor.includes(tokenName) && !definition.color?.[generatedForegroundName];
18
- const needsRGB = tokenName.startsWith("background") ||
19
- tokenName.endsWith("black") ||
20
- tokenName.endsWith("white");
21
- if (!bgToken)
22
- return;
23
- if (needsDynamicForeground) {
24
- const overrideKeys = themeOptions?.onColorValues && Object.keys(themeOptions?.onColorValues);
25
- const onColorKey = overrideKeys && overrideKeys.find((key) => tokenName.toLowerCase().includes(key));
26
- const onColorHexMap = {
27
- lightHexColor: (onColorKey && themeOptions?.onColorValues?.[onColorKey]?.hexLight) ||
28
- definition?.color?.white?.hex,
29
- darkHexColor: (onColorKey && themeOptions?.onColorValues?.[onColorKey]?.hexDark) ||
30
- definition?.color?.black?.hex,
31
- };
32
- const hex = (0, color_1.getOnColor)({
33
- bgHexColor: bgToken.hex,
34
- mode: "light",
35
- algorithm: themeOptions?.colorContrastAlgorithm,
36
- ...onColorHexMap,
37
- });
38
- const hexDark = (0, color_1.getOnColor)({
39
- bgHexColor: bgToken.hexDark || bgToken.hex,
40
- mode: "dark",
41
- algorithm: themeOptions?.colorContrastAlgorithm,
42
- ...onColorHexMap,
43
- });
44
- definition.color[generatedForegroundName] = {
45
- hex,
46
- hexDark: hex !== hexDark ? hexDark : undefined,
47
- };
48
- }
49
- if (needsRGB) {
50
- const rgb = (0, color_1.hexToRgb)(bgToken.hex);
51
- const rgbDark = bgToken.hexDark && (0, color_1.hexToRgb)(bgToken.hexDark);
52
- definition.color[generatedRGBName] = {
53
- hex: `${rgb.r}, ${rgb.g}, ${rgb.b}`,
54
- hexDark: rgbDark && `${rgbDark.r}, ${rgbDark.g}, ${rgbDark.b}`,
55
- };
56
- }
57
- });
58
- };
59
- exports.default = generateBackgroundColors;
@@ -1,11 +0,0 @@
1
- import type { ThemeDefinition } from "../tokens/types";
2
- import type { Color } from "../types";
3
- declare const generate: (args?: {
4
- primary?: Color;
5
- critical?: Color;
6
- warning?: Color;
7
- positive?: Color;
8
- neutral?: Color;
9
- brand?: Color;
10
- }) => ThemeDefinition["color"];
11
- export default generate;
@@ -1,178 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const fn_1 = require("culori/require");
4
- const hexToOkHsl = (hex) => {
5
- const rgb = (0, fn_1.parseHex)(hex);
6
- if (!rgb)
7
- throw new Error(`[Reshaped] Can't generate rgb from ${hex} color`);
8
- const lrgb = (0, fn_1.convertRgbToLrgb)(rgb);
9
- const oklab = (0, fn_1.convertLrgbToOklab)(lrgb);
10
- const okhsl = (0, fn_1.convertOklabToOkhsl)(oklab);
11
- return okhsl;
12
- };
13
- const okhslToHex = (okhsl) => {
14
- const oklab = (0, fn_1.convertOkhslToOklab)(okhsl);
15
- const lrgb = (0, fn_1.convertOklabToLrgb)(oklab);
16
- const rgb = (0, fn_1.convertLrgbToRgb)(lrgb);
17
- return !okhsl.alpha || okhsl.alpha === 1 ? (0, fn_1.serializeHex)(rgb) : (0, fn_1.serializeHex8)(rgb);
18
- };
19
- const getDarkModeColor = (hsl) => {
20
- const { l } = hsl;
21
- const mid = 0.5;
22
- const lDelta = 1 - (l - mid) / (1 - mid);
23
- return { ...hsl, l: l < mid ? l : 1 - l * lDelta };
24
- };
25
- const generateColorValues = (args) => {
26
- const { key, hex, hexDark } = args;
27
- const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
28
- const okhsl = hexToOkHsl(hex);
29
- /**
30
- * Calculate hue perceptual lighness (yellow, cyan, )
31
- */
32
- const hueStep = 120;
33
- const normalizedHue = ((okhsl.h + 150) % 360) / 360;
34
- const hueLightness = Math.cos((2 * Math.PI) / hueStep) * normalizedHue;
35
- const okhslDark = key === "neutral"
36
- ? { ...okhsl, l: 1 - okhsl.l + 0.16, s: 0.1 }
37
- : (hexDark && hexToOkHsl(hexDark)) || getDarkModeColor(okhsl);
38
- /**
39
- * Background
40
- */
41
- const bgHex = hex;
42
- const bgHexDark = okhslToHex(okhslDark);
43
- const bgFadedHsl = key === "neutral" ? { ...okhsl, l: 0.96 } : { ...okhsl, l: 0.94 + 0.045 * hueLightness };
44
- const bgFadedHslDark = key === "neutral" ? { ...okhslDark, l: 0.15 } : { ...okhslDark, l: 0.16, s: okhslDark.s / 2 };
45
- const bgFadedHex = okhslToHex(bgFadedHsl);
46
- const bgFadedHexDark = okhslToHex(bgFadedHslDark);
47
- /**
48
- * Foreground
49
- */
50
- const fgOkhsl = key === "neutral" ? { ...okhsl, l: 0.2 } : { ...okhsl, l: 0.45 };
51
- // Lighter colors need smaller lightness increase for fg colors
52
- const fgDarkLDelta = 0.16 / (1 + Math.max(0, okhslDark.l - 0.5));
53
- const fgOkhslDark = key === "neutral"
54
- ? { ...okhsl, l: 0.96 }
55
- : { ...okhslDark, l: okhslDark.l + fgDarkLDelta, s: 0.7 };
56
- const fgHex = okhslToHex(fgOkhsl);
57
- const fgHexDark = okhslToHex(fgOkhslDark);
58
- /**
59
- * Border
60
- */
61
- const bdHex = key === "neutral" ? okhslToHex({ ...fgOkhsl, l: 0, alpha: 0.12 }) : fgHex;
62
- const bdHexDark = key === "neutral" ? okhslToHex({ ...fgOkhslDark, l: 1, alpha: 0.14 }) : fgHexDark;
63
- const bdFadedHex = key === "neutral"
64
- ? okhslToHex({
65
- ...bgFadedHsl,
66
- l: 0,
67
- alpha: 0.08,
68
- })
69
- : okhslToHex({
70
- ...bgFadedHsl,
71
- s: 0.6 - 0.2 * hueLightness,
72
- l: bgFadedHsl.l - 0.07,
73
- });
74
- const bdFadedHexDark = key === "neutral"
75
- ? okhslToHex({
76
- ...bgFadedHslDark,
77
- l: 1,
78
- alpha: 0.08,
79
- })
80
- : okhslToHex({
81
- ...bgFadedHslDark,
82
- l: bgFadedHslDark.l + 0.1,
83
- });
84
- const output = {
85
- [`background${capitalizedKey}`]: {
86
- hex: bgHex,
87
- hexDark: bgHexDark,
88
- },
89
- [`background${capitalizedKey}Faded`]: {
90
- hex: bgFadedHex,
91
- hexDark: bgFadedHexDark,
92
- },
93
- [`border${capitalizedKey}`]: {
94
- hex: bdHex,
95
- hexDark: bdHexDark,
96
- },
97
- [`border${capitalizedKey}Faded`]: {
98
- hex: bdFadedHex,
99
- hexDark: bdFadedHexDark,
100
- },
101
- [`foreground${capitalizedKey}`]: {
102
- hex: fgHex,
103
- hexDark: fgHexDark,
104
- },
105
- };
106
- if (key === "neutral") {
107
- output[`foreground${capitalizedKey}Faded`] = {
108
- hex: okhslToHex({ ...fgOkhsl, l: fgOkhsl.l + 0.25 }),
109
- hexDark: okhslToHex({ ...fgOkhslDark, l: fgOkhslDark.l - 0.15 }),
110
- };
111
- output[`backgroundDisabled`] = {
112
- hex: okhslToHex({ ...okhsl, s: 0.04, l: 0.94 }),
113
- hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.16 }),
114
- };
115
- output[`backgroundDisabledFaded`] = {
116
- hex: okhslToHex({ ...okhsl, l: 0.97, s: 0.04 }),
117
- hexDark: okhslToHex({ ...okhslDark, l: 0.12, s: 0.04 }),
118
- };
119
- output[`borderDisabled`] = {
120
- hex: okhslToHex({ ...okhsl, l: 0.9, s: 0.04 }),
121
- hexDark: okhslToHex({ ...okhslDark, l: 0.17, s: 0.04 }),
122
- };
123
- output[`foregroundDisabled`] = {
124
- hex: okhslToHex({ ...okhsl, l: 0.82, s: 0.04 }),
125
- hexDark: okhslToHex({ ...okhslDark, l: 0.32, s: 0.04 }),
126
- };
127
- output[`backgroundElevationBase`] = {
128
- hex: "#ffffff",
129
- hexDark: okhslToHex({ ...okhslDark, s: 0.03, l: 0.1 }),
130
- };
131
- output[`backgroundElevationRaised`] = {
132
- hex: "#ffffff",
133
- hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.11 }),
134
- };
135
- output[`backgroundElevationOverlay`] = {
136
- hex: "#ffffff",
137
- hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.13 }),
138
- };
139
- output[`backgroundPage`] = {
140
- hex: "#ffffff",
141
- hexDark: okhslToHex({ ...okhslDark, l: 0.07, s: 0.02 }),
142
- };
143
- output[`backgroundPageFaded`] = {
144
- hex: okhslToHex({ ...okhsl, l: 0.985 }),
145
- hexDark: okhslToHex({ ...okhslDark, l: 0.09, s: 0.02 }),
146
- };
147
- }
148
- return output;
149
- };
150
- const validateHexColor = (color) => {
151
- const hexColorRegex = /^#([A-Fa-f0-9]{3}){2}$/;
152
- if (!hexColorRegex.test(color)) {
153
- throw new Error(`[Reshaped] Invalid hex color: ${color}`);
154
- }
155
- return color;
156
- };
157
- const generate = (args = {}) => {
158
- const { primary = "#2563eb", critical = "#e22c2c", warning = "#facc15", positive = "#118850", neutral = "#e3e4e8", brand, } = args;
159
- const generateFor = (key, color) => {
160
- return generateColorValues({
161
- key,
162
- hex: validateHexColor(typeof color === "string" ? color : color.hex),
163
- hexDark: validateHexColor(typeof color === "string" ? color : (color.hexDark ?? color.hex)),
164
- });
165
- };
166
- const brandColor = brand || primary;
167
- return {
168
- ...generateFor("primary", primary),
169
- ...generateFor("critical", critical),
170
- ...generateFor("warning", warning),
171
- ...generateFor("positive", positive),
172
- ...generateFor("neutral", neutral),
173
- brand: typeof brandColor === "string" ? { hex: brandColor } : brandColor,
174
- white: { hex: "#ffffff" },
175
- black: { hex: "#000000" },
176
- };
177
- };
178
- exports.default = generate;
@@ -1,4 +0,0 @@
1
- import type * as T from "../types";
2
- import type { FullThemeDefinition } from "../tokens/types";
3
- declare const generateUnits: (definition: T.PartialDeep<FullThemeDefinition>) => void;
4
- export default generateUnits;
@@ -1,5 +0,0 @@
1
- type Obj = {
2
- [key: string]: unknown;
3
- };
4
- declare const mergeDeep: (target: Obj, ...sources: Obj[]) => Obj;
5
- export default mergeDeep;