@udixio/theme 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/bin/main.ts +85 -0
- package/dist/API.d.ts +1 -0
- package/dist/API.d.ts.map +1 -1
- package/dist/bin.cjs +64 -0
- package/dist/bin.js +63 -0
- package/dist/browser.cjs +39 -0
- package/dist/browser.js +39 -0
- package/dist/color/color.manager.d.ts.map +1 -1
- package/dist/color/default-color.d.ts.map +1 -1
- package/dist/config/config.interface.d.ts.map +1 -0
- package/dist/config/define-config.d.ts.map +1 -0
- package/dist/config/index.d.ts +3 -0
- package/dist/config/index.d.ts.map +1 -0
- package/dist/config/index.node.d.ts +2 -0
- package/dist/config/index.node.d.ts.map +1 -0
- package/dist/config/resolver-config.d.ts +11 -0
- package/dist/config/resolver-config.d.ts.map +1 -0
- package/dist/define-config-B1QPKKY_.js +430 -0
- package/dist/define-config-BGgVazsr.cjs +429 -0
- package/dist/index.browser.d.ts +2 -0
- package/dist/index.browser.d.ts.map +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.node.d.ts +4 -0
- package/dist/index.node.d.ts.map +1 -0
- package/dist/load-from-path-BSrT4DOj.js +39 -0
- package/dist/load-from-path-BuN8RpOs.cjs +78 -0
- package/dist/loader/index.d.ts +2 -0
- package/dist/loader/index.d.ts.map +1 -0
- package/dist/loader/index.node.d.ts +3 -0
- package/dist/loader/index.node.d.ts.map +1 -0
- package/dist/loader/load-from-path.d.ts +5 -0
- package/dist/loader/load-from-path.d.ts.map +1 -0
- package/dist/loader/loader.d.ts +3 -0
- package/dist/loader/loader.d.ts.map +1 -0
- package/dist/loader/unplugin.d.ts +16 -0
- package/dist/loader/unplugin.d.ts.map +1 -0
- package/dist/{index.js → loader-Bc0bstAD.js} +172 -661
- package/dist/{index.cjs → loader-YNN5hAF3.cjs} +148 -678
- package/dist/material-color-utilities/dynamic_color.d.ts +9 -15
- package/dist/material-color-utilities/dynamic_color.d.ts.map +1 -1
- package/dist/material-color-utilities/toneDeltaPair.d.ts +9 -2
- package/dist/material-color-utilities/toneDeltaPair.d.ts.map +1 -1
- package/dist/node.cjs +191 -0
- package/dist/node.js +170 -0
- package/dist/plugin/plugin.api.d.ts +1 -1
- package/dist/plugin/plugin.api.d.ts.map +1 -1
- package/dist/theme/scheme.d.ts +1 -1
- package/dist/theme/scheme.d.ts.map +1 -1
- package/dist/theme/variants/fidelity.variant.d.ts +3 -0
- package/dist/theme/variants/fidelity.variant.d.ts.map +1 -0
- package/dist/theme/variants/index.d.ts +1 -0
- package/dist/theme/variants/index.d.ts.map +1 -1
- package/package.json +27 -10
- package/src/API.ts +4 -0
- package/src/color/color.manager.ts +10 -8
- package/src/color/default-color.ts +82 -34
- package/src/config/index.node.ts +1 -0
- package/src/{adapter → config}/index.ts +0 -1
- package/src/config/resolver-config.ts +49 -0
- package/src/index.browser.ts +1 -0
- package/src/index.node.ts +3 -0
- package/src/index.ts +2 -2
- package/src/loader/index.node.ts +2 -0
- package/src/loader/index.ts +1 -0
- package/src/loader/load-from-path.ts +9 -0
- package/src/{adapter/adapter.abstract.ts → loader/loader.ts} +23 -28
- package/src/loader/unplugin.ts +158 -0
- package/src/material-color-utilities/dynamic_color.ts +18 -120
- package/src/material-color-utilities/toneDeltaPair.ts +91 -2
- package/src/plugin/plugin.api.ts +4 -4
- package/src/theme/scheme.ts +7 -1
- package/src/theme/variants/fidelity.variant.ts +38 -0
- package/src/theme/variants/index.ts +2 -0
- package/vite.config.ts +18 -4
- package/dist/adapter/adapter.abstract.d.ts +0 -10
- package/dist/adapter/adapter.abstract.d.ts.map +0 -1
- package/dist/adapter/config.interface.d.ts.map +0 -1
- package/dist/adapter/define-config.d.ts.map +0 -1
- package/dist/adapter/file-adapter.mixin.d.ts +0 -18
- package/dist/adapter/file-adapter.mixin.d.ts.map +0 -1
- package/dist/adapter/index.d.ts +0 -4
- package/dist/adapter/index.d.ts.map +0 -1
- package/dist/adapters/index.d.ts +0 -3
- package/dist/adapters/index.d.ts.map +0 -1
- package/dist/adapters/node.adapter.d.ts +0 -7
- package/dist/adapters/node.adapter.d.ts.map +0 -1
- package/dist/adapters/vite.adapter.d.ts +0 -3
- package/dist/adapters/vite.adapter.d.ts.map +0 -1
- package/src/adapter/file-adapter.mixin.ts +0 -72
- package/src/adapters/index.ts +0 -2
- package/src/adapters/node.adapter.ts +0 -57
- package/src/adapters/vite.adapter.ts +0 -79
- /package/dist/{adapter → config}/config.interface.d.ts +0 -0
- /package/dist/{adapter → config}/define-config.d.ts +0 -0
- /package/src/{adapter → config}/config.interface.ts +0 -0
- /package/src/{adapter → config}/define-config.ts +0 -0
|
@@ -15,9 +15,12 @@
|
|
|
15
15
|
* limitations under the License.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
import {
|
|
18
|
+
import {
|
|
19
|
+
clampDouble,
|
|
20
|
+
Contrast,
|
|
21
|
+
TonalPalette,
|
|
22
|
+
} from '@material/material-color-utilities';
|
|
19
23
|
import { ContrastCurve } from './contrastCurve';
|
|
20
|
-
import { ToneDeltaPair } from './toneDeltaPair';
|
|
21
24
|
import { Scheme } from '../theme/scheme';
|
|
22
25
|
import { Hct } from './htc';
|
|
23
26
|
|
|
@@ -42,7 +45,7 @@ import { Hct } from './htc';
|
|
|
42
45
|
* against its background should behave in various contrast levels options.
|
|
43
46
|
* Must used together with `background`. When not provided or resolved as
|
|
44
47
|
* undefined, the contrast curve is calculated based on other constraints.
|
|
45
|
-
* @param
|
|
48
|
+
* @param adjustTone A `AdjustTone` object specifying a tone delta
|
|
46
49
|
* constraint between two colors. One of them must be the color being
|
|
47
50
|
* constructed. When not provided or resolved as undefined, the tone is
|
|
48
51
|
* calculated based on other constraints.
|
|
@@ -56,48 +59,13 @@ export interface FromPaletteOptions {
|
|
|
56
59
|
background?: (scheme: Scheme) => DynamicColor | undefined;
|
|
57
60
|
secondBackground?: (scheme: Scheme) => DynamicColor | undefined;
|
|
58
61
|
contrastCurve?: (scheme: Scheme) => ContrastCurve | undefined;
|
|
59
|
-
|
|
62
|
+
adjustTone?: (scheme: Scheme) => AdjustTone | undefined;
|
|
60
63
|
}
|
|
61
64
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
* @param originlColor The original color.
|
|
67
|
-
* @param specVersion The spec version to extend.
|
|
68
|
-
* @param extendedColor The color with the values to extend.
|
|
69
|
-
*/
|
|
70
|
-
export function extendSpecVersion(
|
|
71
|
-
originlColor: DynamicColor,
|
|
72
|
-
extendedColor: DynamicColor,
|
|
73
|
-
): DynamicColor {
|
|
74
|
-
return DynamicColor.fromPalette({
|
|
75
|
-
name: originlColor.name,
|
|
76
|
-
palette: (s) => extendedColor.palette(s),
|
|
77
|
-
tone: (s) => extendedColor.tone(s),
|
|
78
|
-
isBackground: originlColor.isBackground,
|
|
79
|
-
chromaMultiplier: (s) => {
|
|
80
|
-
const chromaMultiplier = extendedColor.chromaMultiplier;
|
|
81
|
-
return chromaMultiplier !== undefined ? chromaMultiplier(s) : 1;
|
|
82
|
-
},
|
|
83
|
-
background: (s) => {
|
|
84
|
-
const background = extendedColor.background;
|
|
85
|
-
return background !== undefined ? background(s) : undefined;
|
|
86
|
-
},
|
|
87
|
-
secondBackground: (s) => {
|
|
88
|
-
const secondBackground = extendedColor.secondBackground;
|
|
89
|
-
return secondBackground !== undefined ? secondBackground(s) : undefined;
|
|
90
|
-
},
|
|
91
|
-
contrastCurve: (s) => {
|
|
92
|
-
const contrastCurve = extendedColor.contrastCurve;
|
|
93
|
-
return contrastCurve !== undefined ? contrastCurve(s) : undefined;
|
|
94
|
-
},
|
|
95
|
-
toneDeltaPair: (s) => {
|
|
96
|
-
const toneDeltaPair = extendedColor.toneDeltaPair;
|
|
97
|
-
return toneDeltaPair !== undefined ? toneDeltaPair(s) : undefined;
|
|
98
|
-
},
|
|
99
|
-
});
|
|
100
|
-
}
|
|
65
|
+
export type AdjustTone = (args: {
|
|
66
|
+
scheme: Scheme;
|
|
67
|
+
dynamicColor: DynamicColor;
|
|
68
|
+
}) => number;
|
|
101
69
|
|
|
102
70
|
/**
|
|
103
71
|
* A color that adjusts itself based on UI state provided by DynamicScheme.
|
|
@@ -142,7 +110,7 @@ export class DynamicColor {
|
|
|
142
110
|
* @param contrastCurve A `ContrastCurve` object specifying how its contrast
|
|
143
111
|
* against its background should behave in various contrast levels
|
|
144
112
|
* options.
|
|
145
|
-
* @param
|
|
113
|
+
* @param adjustTone A `AdjustTone` object specifying a tone delta
|
|
146
114
|
* constraint between two colors. One of them must be the color being
|
|
147
115
|
* constructed.
|
|
148
116
|
*/
|
|
@@ -155,7 +123,7 @@ export class DynamicColor {
|
|
|
155
123
|
readonly background?: (scheme: Scheme) => DynamicColor | undefined,
|
|
156
124
|
readonly secondBackground?: (scheme: Scheme) => DynamicColor | undefined,
|
|
157
125
|
readonly contrastCurve?: (scheme: Scheme) => ContrastCurve | undefined,
|
|
158
|
-
readonly
|
|
126
|
+
readonly adjustTone?: (scheme: Scheme) => AdjustTone | undefined,
|
|
159
127
|
) {
|
|
160
128
|
if (!background && secondBackground) {
|
|
161
129
|
throw new Error(
|
|
@@ -193,7 +161,7 @@ export class DynamicColor {
|
|
|
193
161
|
args.background,
|
|
194
162
|
args.secondBackground,
|
|
195
163
|
args.contrastCurve,
|
|
196
|
-
args.
|
|
164
|
+
args.adjustTone,
|
|
197
165
|
);
|
|
198
166
|
}
|
|
199
167
|
|
|
@@ -298,7 +266,7 @@ export class DynamicColor {
|
|
|
298
266
|
background: this.background,
|
|
299
267
|
secondBackground: this.secondBackground,
|
|
300
268
|
contrastCurve: this.contrastCurve,
|
|
301
|
-
|
|
269
|
+
adjustTone: this.adjustTone,
|
|
302
270
|
});
|
|
303
271
|
}
|
|
304
272
|
|
|
@@ -349,81 +317,11 @@ export class DynamicColor {
|
|
|
349
317
|
* contrast level is.
|
|
350
318
|
*/
|
|
351
319
|
getTone(scheme: Scheme): number {
|
|
352
|
-
const
|
|
353
|
-
? this.toneDeltaPair(scheme)
|
|
354
|
-
: undefined;
|
|
320
|
+
const adjustTone = this.adjustTone ? this.adjustTone(scheme) : undefined;
|
|
355
321
|
|
|
356
322
|
// Case 0: tone delta constraint.
|
|
357
|
-
if (
|
|
358
|
-
|
|
359
|
-
const roleB = toneDeltaPair.roleB;
|
|
360
|
-
const polarity = toneDeltaPair.polarity;
|
|
361
|
-
const constraint = toneDeltaPair.constraint;
|
|
362
|
-
const absoluteDelta =
|
|
363
|
-
polarity === 'darker' ||
|
|
364
|
-
(polarity === 'relative_lighter' && scheme.isDark) ||
|
|
365
|
-
(polarity === 'relative_darker' && !scheme.isDark)
|
|
366
|
-
? -toneDeltaPair.delta
|
|
367
|
-
: toneDeltaPair.delta;
|
|
368
|
-
|
|
369
|
-
const amRoleA = this.name === roleA.name;
|
|
370
|
-
const selfRole = amRoleA ? roleA : roleB;
|
|
371
|
-
const refRole = amRoleA ? roleB : roleA;
|
|
372
|
-
let selfTone = selfRole.tone(scheme);
|
|
373
|
-
const refTone = refRole.getTone(scheme);
|
|
374
|
-
const relativeDelta = absoluteDelta * (amRoleA ? 1 : -1);
|
|
375
|
-
|
|
376
|
-
if (constraint === 'exact') {
|
|
377
|
-
selfTone = clampDouble(0, 100, refTone + relativeDelta);
|
|
378
|
-
} else if (constraint === 'nearer') {
|
|
379
|
-
if (relativeDelta > 0) {
|
|
380
|
-
selfTone = clampDouble(
|
|
381
|
-
0,
|
|
382
|
-
100,
|
|
383
|
-
clampDouble(refTone, refTone + relativeDelta, selfTone),
|
|
384
|
-
);
|
|
385
|
-
} else {
|
|
386
|
-
selfTone = clampDouble(
|
|
387
|
-
0,
|
|
388
|
-
100,
|
|
389
|
-
clampDouble(refTone + relativeDelta, refTone, selfTone),
|
|
390
|
-
);
|
|
391
|
-
}
|
|
392
|
-
} else if (constraint === 'farther') {
|
|
393
|
-
if (relativeDelta > 0) {
|
|
394
|
-
selfTone = clampDouble(refTone + relativeDelta, 100, selfTone);
|
|
395
|
-
} else {
|
|
396
|
-
selfTone = clampDouble(0, refTone + relativeDelta, selfTone);
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
if (this.background && this.contrastCurve) {
|
|
401
|
-
const background = this.background(scheme);
|
|
402
|
-
const contrastCurve = this.contrastCurve(scheme);
|
|
403
|
-
if (background && contrastCurve) {
|
|
404
|
-
// Adjust the tones for contrast, if background and contrast curve
|
|
405
|
-
// are defined.
|
|
406
|
-
const bgTone = background.getTone(scheme);
|
|
407
|
-
const selfContrast = contrastCurve.get(scheme.contrastLevel);
|
|
408
|
-
selfTone =
|
|
409
|
-
Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast &&
|
|
410
|
-
scheme.contrastLevel >= 0
|
|
411
|
-
? selfTone
|
|
412
|
-
: DynamicColor.foregroundTone(bgTone, selfContrast);
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
// This can avoid the awkward tones for background colors including the
|
|
417
|
-
// access fixed colors. Accent fixed dim colors should not be adjusted.
|
|
418
|
-
if (this.isBackground && !this.name.endsWith('_fixed_dim')) {
|
|
419
|
-
if (selfTone >= 57) {
|
|
420
|
-
selfTone = clampDouble(65, 100, selfTone);
|
|
421
|
-
} else {
|
|
422
|
-
selfTone = clampDouble(0, 49, selfTone);
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
return selfTone;
|
|
323
|
+
if (adjustTone) {
|
|
324
|
+
return adjustTone({ scheme, dynamicColor: this });
|
|
427
325
|
} else {
|
|
428
326
|
// Case 1: No tone delta pair; just solve for itself.
|
|
429
327
|
let answer = this.tone(scheme);
|
|
@@ -15,7 +15,9 @@
|
|
|
15
15
|
* limitations under the License.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
import { DynamicColor } from './dynamic_color';
|
|
18
|
+
import { AdjustTone, DynamicColor } from './dynamic_color';
|
|
19
|
+
import { clampDouble, Contrast } from '@material/material-color-utilities';
|
|
20
|
+
import { Scheme } from '../theme';
|
|
19
21
|
|
|
20
22
|
/**
|
|
21
23
|
* Describes the different in tone between colors.
|
|
@@ -43,7 +45,7 @@ export type DeltaConstraint = 'exact' | 'nearer' | 'farther';
|
|
|
43
45
|
* designers want tonal distance, literally contrast, between two colors that
|
|
44
46
|
* don't have a background / foreground relationship or a contrast guarantee.
|
|
45
47
|
*/
|
|
46
|
-
|
|
48
|
+
class ToneDeltaPair {
|
|
47
49
|
/**
|
|
48
50
|
* Documents a constraint in tone distance between two DynamicColors.
|
|
49
51
|
*
|
|
@@ -79,4 +81,91 @@ export class ToneDeltaPair {
|
|
|
79
81
|
) {
|
|
80
82
|
this.constraint = constraint ?? 'exact';
|
|
81
83
|
}
|
|
84
|
+
|
|
85
|
+
adjustedTone({
|
|
86
|
+
scheme,
|
|
87
|
+
dynamicColor,
|
|
88
|
+
}: {
|
|
89
|
+
scheme: Scheme;
|
|
90
|
+
dynamicColor: DynamicColor;
|
|
91
|
+
}) {
|
|
92
|
+
const roleA = this.roleA;
|
|
93
|
+
const roleB = this.roleB;
|
|
94
|
+
const polarity = this.polarity;
|
|
95
|
+
const constraint = this.constraint;
|
|
96
|
+
const absoluteDelta =
|
|
97
|
+
polarity === 'darker' ||
|
|
98
|
+
(polarity === 'relative_lighter' && scheme.isDark) ||
|
|
99
|
+
(polarity === 'relative_darker' && !scheme.isDark)
|
|
100
|
+
? -this.delta
|
|
101
|
+
: this.delta;
|
|
102
|
+
|
|
103
|
+
const amRoleA = dynamicColor.name === roleA.name;
|
|
104
|
+
const selfRole = amRoleA ? roleA : roleB;
|
|
105
|
+
const refRole = amRoleA ? roleB : roleA;
|
|
106
|
+
let selfTone = selfRole.tone(scheme);
|
|
107
|
+
const refTone = refRole.getTone(scheme);
|
|
108
|
+
const relativeDelta = absoluteDelta * (amRoleA ? 1 : -1);
|
|
109
|
+
|
|
110
|
+
if (constraint === 'exact') {
|
|
111
|
+
selfTone = clampDouble(0, 100, refTone + relativeDelta);
|
|
112
|
+
} else if (constraint === 'nearer') {
|
|
113
|
+
if (relativeDelta > 0) {
|
|
114
|
+
selfTone = clampDouble(
|
|
115
|
+
0,
|
|
116
|
+
100,
|
|
117
|
+
clampDouble(refTone, refTone + relativeDelta, selfTone),
|
|
118
|
+
);
|
|
119
|
+
} else {
|
|
120
|
+
selfTone = clampDouble(
|
|
121
|
+
0,
|
|
122
|
+
100,
|
|
123
|
+
clampDouble(refTone + relativeDelta, refTone, selfTone),
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
} else if (constraint === 'farther') {
|
|
127
|
+
if (relativeDelta > 0) {
|
|
128
|
+
selfTone = clampDouble(refTone + relativeDelta, 100, selfTone);
|
|
129
|
+
} else {
|
|
130
|
+
selfTone = clampDouble(0, refTone + relativeDelta, selfTone);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
if (dynamicColor.background && dynamicColor.contrastCurve) {
|
|
135
|
+
const background = dynamicColor.background(scheme);
|
|
136
|
+
const contrastCurve = dynamicColor.contrastCurve(scheme);
|
|
137
|
+
if (background && contrastCurve) {
|
|
138
|
+
// Adjust the tones for contrast, if background and contrast curve
|
|
139
|
+
// are defined.
|
|
140
|
+
const bgTone = background.getTone(scheme);
|
|
141
|
+
const selfContrast = contrastCurve.get(scheme.contrastLevel);
|
|
142
|
+
selfTone =
|
|
143
|
+
Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast &&
|
|
144
|
+
scheme.contrastLevel >= 0
|
|
145
|
+
? selfTone
|
|
146
|
+
: DynamicColor.foregroundTone(bgTone, selfContrast);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// This can avoid the awkward tones for background colors including the
|
|
151
|
+
// access fixed colors. Accent fixed dim colors should not be adjusted.
|
|
152
|
+
if (
|
|
153
|
+
dynamicColor.isBackground &&
|
|
154
|
+
!dynamicColor.name.endsWith('_fixed_dim')
|
|
155
|
+
) {
|
|
156
|
+
if (selfTone >= 57) {
|
|
157
|
+
selfTone = clampDouble(65, 100, selfTone);
|
|
158
|
+
} else {
|
|
159
|
+
selfTone = clampDouble(0, 49, selfTone);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
return selfTone;
|
|
164
|
+
}
|
|
82
165
|
}
|
|
166
|
+
|
|
167
|
+
export const toneDeltaPair = (
|
|
168
|
+
...params: ConstructorParameters<typeof ToneDeltaPair>
|
|
169
|
+
): AdjustTone => {
|
|
170
|
+
return (args) => new ToneDeltaPair(...params).adjustedTone(args);
|
|
171
|
+
};
|
package/src/plugin/plugin.api.ts
CHANGED
|
@@ -35,10 +35,10 @@ export class PluginApi {
|
|
|
35
35
|
);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
public loadPlugins() {
|
|
39
|
-
this.plugins.
|
|
40
|
-
plugin.getInstance().onLoad?.();
|
|
41
|
-
}
|
|
38
|
+
public async loadPlugins() {
|
|
39
|
+
for (const plugin of this.plugins.values()) {
|
|
40
|
+
await plugin.getInstance().onLoad?.();
|
|
41
|
+
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
public getPlugin<T extends PluginAbstract<any, any>>(
|
package/src/theme/scheme.ts
CHANGED
|
@@ -13,7 +13,13 @@ export interface SchemeOptions {
|
|
|
13
13
|
export class Scheme {
|
|
14
14
|
constructor(readonly options: SchemeOptions) {}
|
|
15
15
|
|
|
16
|
-
get variant():
|
|
16
|
+
get variant():
|
|
17
|
+
| 'expressive'
|
|
18
|
+
| 'neutral'
|
|
19
|
+
| 'tonalSpot'
|
|
20
|
+
| 'vibrant'
|
|
21
|
+
| 'fidelity'
|
|
22
|
+
| string {
|
|
17
23
|
return this.options.variant.name;
|
|
18
24
|
}
|
|
19
25
|
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
|
|
2
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
3
|
+
|
|
4
|
+
export const fidelityVariant: Variant = {
|
|
5
|
+
name: 'fidelity',
|
|
6
|
+
palettes: {
|
|
7
|
+
primary: ({ sourceColorHct, isDark }) =>
|
|
8
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma),
|
|
9
|
+
secondary: ({ sourceColorHct }) =>
|
|
10
|
+
TonalPalette.fromHueAndChroma(
|
|
11
|
+
sourceColorHct.hue,
|
|
12
|
+
sourceColorHct.chroma * 0.5,
|
|
13
|
+
),
|
|
14
|
+
tertiary: ({ sourceColorHct }) =>
|
|
15
|
+
TonalPalette.fromHueAndChroma(
|
|
16
|
+
getRotatedHue(
|
|
17
|
+
sourceColorHct,
|
|
18
|
+
[0, 20, 71, 161, 333, 360],
|
|
19
|
+
[-40, 48, -32, 40, -32],
|
|
20
|
+
),
|
|
21
|
+
sourceColorHct.chroma,
|
|
22
|
+
),
|
|
23
|
+
neutral: ({ sourceColorHct }) =>
|
|
24
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
|
|
25
|
+
neutralVariant: ({ sourceColorHct }) =>
|
|
26
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
|
|
27
|
+
error: ({ sourceColorHct }) => {
|
|
28
|
+
const errorHue = getPiecewiseHue(
|
|
29
|
+
sourceColorHct,
|
|
30
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
31
|
+
[12, 22, 32, 12, 22, 32, 22, 12],
|
|
32
|
+
);
|
|
33
|
+
return TonalPalette.fromHueAndChroma(errorHue, 60);
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
customPalettes: ({ colorHct }) =>
|
|
37
|
+
TonalPalette.fromHueAndChroma(colorHct.hue, colorHct.chroma),
|
|
38
|
+
};
|
|
@@ -2,6 +2,7 @@ import { expressiveVariant } from './expressive.variant';
|
|
|
2
2
|
import { neutralVariant } from './neutral.variant';
|
|
3
3
|
import { tonalSpotVariant } from './tonal-spot.variant';
|
|
4
4
|
import { vibrantVariant } from './vibrant.variant';
|
|
5
|
+
import { fidelityVariant } from './fidelity.variant';
|
|
5
6
|
|
|
6
7
|
export * from './tonal-spot.variant';
|
|
7
8
|
export * from './vibrant.variant';
|
|
@@ -13,4 +14,5 @@ export const Variants = {
|
|
|
13
14
|
Neutral: neutralVariant,
|
|
14
15
|
TonalSpot: tonalSpotVariant,
|
|
15
16
|
Vibrant: vibrantVariant,
|
|
17
|
+
Fidelity: fidelityVariant,
|
|
16
18
|
};
|
package/vite.config.ts
CHANGED
|
@@ -2,15 +2,23 @@
|
|
|
2
2
|
import { defineConfig } from 'vite';
|
|
3
3
|
import dts from 'vite-plugin-dts';
|
|
4
4
|
import * as path from 'path';
|
|
5
|
+
import { visualizer } from 'rollup-plugin-visualizer';
|
|
5
6
|
|
|
6
7
|
export default defineConfig(() => ({
|
|
7
8
|
root: __dirname,
|
|
8
9
|
cacheDir: '../../node_modules/.vite/packages/theme',
|
|
10
|
+
|
|
9
11
|
plugins: [
|
|
10
12
|
dts({
|
|
11
13
|
entryRoot: 'src',
|
|
12
14
|
tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
|
|
13
15
|
}),
|
|
16
|
+
visualizer({
|
|
17
|
+
filename: '../../stats/theme.html',
|
|
18
|
+
open: false,
|
|
19
|
+
gzipSize: true,
|
|
20
|
+
brotliSize: true,
|
|
21
|
+
}),
|
|
14
22
|
],
|
|
15
23
|
// Uncomment this if you are using workers.
|
|
16
24
|
// worker: {
|
|
@@ -19,25 +27,31 @@ export default defineConfig(() => ({
|
|
|
19
27
|
// Configuration for building your library.
|
|
20
28
|
// See: https://vitejs.dev/guide/build.html#library-mode
|
|
21
29
|
build: {
|
|
30
|
+
ssr: true,
|
|
22
31
|
outDir: './dist',
|
|
23
32
|
emptyOutDir: true,
|
|
24
33
|
reportCompressedSize: true,
|
|
25
|
-
ssr: true,
|
|
26
34
|
commonjsOptions: {
|
|
27
35
|
transformMixedEsModules: true,
|
|
28
36
|
},
|
|
29
37
|
lib: {
|
|
30
38
|
// Could also be a dictionary or array of multiple entry points.
|
|
31
|
-
entry:
|
|
39
|
+
entry: {
|
|
40
|
+
node: 'src/index.node.ts',
|
|
41
|
+
bin: 'bin/main.ts',
|
|
42
|
+
browser: 'src/index.browser.ts',
|
|
43
|
+
},
|
|
44
|
+
|
|
32
45
|
name: '@udixio/theme',
|
|
33
|
-
fileName:
|
|
46
|
+
fileName: (format, entryName) =>
|
|
47
|
+
`${entryName}.${format === 'es' ? 'js' : 'cjs'}`,
|
|
34
48
|
// Change this to the formats you want to support.
|
|
35
49
|
// Don't forget to update your package.json as well.
|
|
36
50
|
formats: ['es' as const, 'cjs' as const],
|
|
37
51
|
},
|
|
38
52
|
rollupOptions: {
|
|
39
53
|
// External packages that should not be bundled into your library.
|
|
40
|
-
external: ['pathe'],
|
|
54
|
+
external: ['pathe', 'jiti', 'commander', 'unplugin', 'chokidar'],
|
|
41
55
|
},
|
|
42
56
|
},
|
|
43
57
|
test: {
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { ConfigInterface } from './config.interface';
|
|
2
|
-
import { API } from '../API';
|
|
3
|
-
export declare abstract class AdapterAbstract {
|
|
4
|
-
api: API;
|
|
5
|
-
protected constructor();
|
|
6
|
-
abstract getConfig(): Promise<ConfigInterface>;
|
|
7
|
-
init(): Promise<void>;
|
|
8
|
-
load(): void;
|
|
9
|
-
}
|
|
10
|
-
//# sourceMappingURL=adapter.abstract.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"adapter.abstract.d.ts","sourceRoot":"","sources":["../../src/adapter/adapter.abstract.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,8BAAsB,eAAe;IAC5B,GAAG,EAAE,GAAG,CAAC;IAEhB,SAAS;IAOT,QAAQ,CAAC,SAAS,IAAI,OAAO,CAAC,eAAe,CAAC;IAEjC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAwC3B,IAAI;CAGZ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"config.interface.d.ts","sourceRoot":"","sources":["../../src/adapter/config.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IAC/C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;CACtC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"define-config.d.ts","sourceRoot":"","sources":["../../src/adapter/define-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,wBAAgB,YAAY,CAAC,YAAY,EAAE,eAAe,GAAG,eAAe,CAQ3E"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { AdapterAbstract } from './adapter.abstract';
|
|
2
|
-
import { ConfigInterface } from './config.interface';
|
|
3
|
-
import { Constructor } from 'type-fest';
|
|
4
|
-
export declare function FileAdapterMixin<TBase extends Constructor<AdapterAbstract> & Constructor<{
|
|
5
|
-
getConfig: () => Promise<ConfigInterface>;
|
|
6
|
-
}>>(Base: TBase): {
|
|
7
|
-
new (...args: any[]): {
|
|
8
|
-
ensureOutDir(dirPath: string): Promise<void>;
|
|
9
|
-
writeFile(filePath: string, content: string): Promise<void>;
|
|
10
|
-
readFile(filePath: string): Promise<string>;
|
|
11
|
-
deleteFile(filePath: string): Promise<void>;
|
|
12
|
-
api: import('..').API;
|
|
13
|
-
getConfig: (() => Promise<ConfigInterface>) & (() => Promise<ConfigInterface>);
|
|
14
|
-
init(): Promise<void>;
|
|
15
|
-
load(): void;
|
|
16
|
-
};
|
|
17
|
-
} & TBase;
|
|
18
|
-
//# sourceMappingURL=file-adapter.mixin.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"file-adapter.mixin.d.ts","sourceRoot":"","sources":["../../src/adapter/file-adapter.mixin.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,wBAAgB,gBAAgB,CAC9B,KAAK,SAAS,WAAW,CAAC,eAAe,CAAC,GACxC,WAAW,CAAC;IACV,SAAS,EAAE,MAAM,OAAO,CAAC,eAAe,CAAC,CAAC;CAC3C,CAAC,EACJ,IAAI,EAAE,KAAK;kBAEY,GAAG,EAAE;8BAIE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;4BAaxB,MAAM,WAAW,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;2BAexC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;6BAatB,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;;6DAjD9B,OAAO,CAAC,eAAe,CAAC;;;;UA8D9C"}
|
package/dist/adapter/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/adapter/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}
|
package/dist/adapters/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/adapters/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { AdapterAbstract, ConfigInterface } from '../adapter';
|
|
2
|
-
export declare class NodeAdapter extends AdapterAbstract {
|
|
3
|
-
configPath: string;
|
|
4
|
-
constructor(configPath?: string);
|
|
5
|
-
getConfig(): Promise<ConfigInterface>;
|
|
6
|
-
}
|
|
7
|
-
//# sourceMappingURL=node.adapter.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"node.adapter.d.ts","sourceRoot":"","sources":["../../src/adapters/node.adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAI9D,qBAAa,WAAY,SAAQ,eAAe;IAC3B,UAAU;gBAAV,UAAU,SAAmB;IAI1C,SAAS;CA+ChB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"vite.adapter.d.ts","sourceRoot":"","sources":["../../src/adapters/vite.adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,MAAM,EAAE,MAAM,MAAM,CAAC;AAKlD,eAAO,MAAM,UAAU,GACrB,mBAA6B,KAC5B,OAAO,CAAC,MAAM,GAAG,SAAS,CAuE5B,CAAC"}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import * as fs from 'fs/promises';
|
|
2
|
-
import * as path from 'path';
|
|
3
|
-
import { AdapterAbstract } from './adapter.abstract';
|
|
4
|
-
import { ConfigInterface } from './config.interface';
|
|
5
|
-
import { Constructor } from 'type-fest';
|
|
6
|
-
|
|
7
|
-
export function FileAdapterMixin<
|
|
8
|
-
TBase extends Constructor<AdapterAbstract> &
|
|
9
|
-
Constructor<{
|
|
10
|
-
getConfig: () => Promise<ConfigInterface>;
|
|
11
|
-
}>,
|
|
12
|
-
>(Base: TBase) {
|
|
13
|
-
return class extends Base {
|
|
14
|
-
constructor(...args: any[]) {
|
|
15
|
-
super(...args); // Appel du constructeur de la classe Base avec les arguments transmis
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
async ensureOutDir(dirPath: string): Promise<void> {
|
|
19
|
-
try {
|
|
20
|
-
await fs.mkdir(dirPath, { recursive: true });
|
|
21
|
-
console.log(`Répertoire vérifié/créé avec succès : ${dirPath}`);
|
|
22
|
-
} catch (error) {
|
|
23
|
-
console.error(
|
|
24
|
-
`Erreur lors de la création du répertoire : ${dirPath}`,
|
|
25
|
-
error,
|
|
26
|
-
);
|
|
27
|
-
throw error;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
async writeFile(filePath: string, content: string): Promise<void> {
|
|
32
|
-
try {
|
|
33
|
-
const dirPath = path.dirname(filePath); // Extraction du répertoire cible
|
|
34
|
-
await this.ensureOutDir(dirPath); // S'assurer que le répertoire existe
|
|
35
|
-
await fs.writeFile(filePath, content, 'utf-8');
|
|
36
|
-
console.log(`Fichier écrit avec succès : ${filePath}`);
|
|
37
|
-
} catch (error) {
|
|
38
|
-
console.error(
|
|
39
|
-
`Erreur lors de l'écriture du fichier : ${filePath}`,
|
|
40
|
-
error,
|
|
41
|
-
);
|
|
42
|
-
throw error;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
async readFile(filePath: string): Promise<string> {
|
|
47
|
-
try {
|
|
48
|
-
const data = await fs.readFile(filePath, 'utf-8');
|
|
49
|
-
return data;
|
|
50
|
-
} catch (error) {
|
|
51
|
-
console.error(
|
|
52
|
-
`Erreur lors de la lecture du fichier : ${filePath}`,
|
|
53
|
-
error,
|
|
54
|
-
);
|
|
55
|
-
throw error;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
async deleteFile(filePath: string): Promise<void> {
|
|
60
|
-
try {
|
|
61
|
-
await fs.unlink(filePath);
|
|
62
|
-
console.log(`Fichier supprimé avec succès : ${filePath}`);
|
|
63
|
-
} catch (error) {
|
|
64
|
-
console.error(
|
|
65
|
-
`Erreur lors de la suppression du fichier : ${filePath}`,
|
|
66
|
-
error,
|
|
67
|
-
);
|
|
68
|
-
throw error;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
}
|
package/src/adapters/index.ts
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { AdapterAbstract, ConfigInterface } from '../adapter';
|
|
2
|
-
import { resolve } from 'pathe';
|
|
3
|
-
import { createJiti } from 'jiti';
|
|
4
|
-
|
|
5
|
-
export class NodeAdapter extends AdapterAbstract {
|
|
6
|
-
constructor(public configPath = './theme.config') {
|
|
7
|
-
super();
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
async getConfig() {
|
|
11
|
-
if (
|
|
12
|
-
typeof process !== 'undefined' &&
|
|
13
|
-
process.release &&
|
|
14
|
-
process.release.name === 'node'
|
|
15
|
-
) {
|
|
16
|
-
const fs = (await import('fs')).default;
|
|
17
|
-
|
|
18
|
-
// Créer une instance jiti pour importer des fichiers TypeScript
|
|
19
|
-
const jiti = createJiti(import.meta.url, {
|
|
20
|
-
// Options optionnelles
|
|
21
|
-
debug: process.env.NODE_ENV === 'development',
|
|
22
|
-
cache: true, // Cache les transpilations
|
|
23
|
-
interopDefault: true, // Gère automatiquement les exports par défaut
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
const base = resolve(this.configPath);
|
|
27
|
-
const extensions = ['.ts', '.js', '.mjs', '.cjs']; // .ts en premier
|
|
28
|
-
let config: ConfigInterface | null = null;
|
|
29
|
-
|
|
30
|
-
for (const ext of extensions) {
|
|
31
|
-
const configFilePath = base + ext;
|
|
32
|
-
if (fs.existsSync(configFilePath)) {
|
|
33
|
-
try {
|
|
34
|
-
// jiti peut importer directement des fichiers .ts
|
|
35
|
-
config = await jiti.import(configFilePath, { default: true });
|
|
36
|
-
break;
|
|
37
|
-
} catch (error) {
|
|
38
|
-
console.warn(`Failed to load ${configFilePath}:`, error);
|
|
39
|
-
continue;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
if (!config) {
|
|
45
|
-
throw new Error(
|
|
46
|
-
`Configuration file not found, looked for: ${base} with extensions: ${extensions.join(', ')}`,
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
return config as ConfigInterface;
|
|
51
|
-
} else {
|
|
52
|
-
throw new Error(
|
|
53
|
-
'You must provide configuration object when using this library in a browser.',
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|