@udixio/theme 1.0.0-beta.9 → 1.1.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/.eslintrc.mjs +22 -0
- package/CHANGELOG.md +186 -0
- package/README.md +6 -68
- package/dist/API.d.ts +14 -0
- package/dist/API.d.ts.map +1 -0
- package/dist/LICENSE +202 -0
- package/dist/adapter/adapter.abstract.d.ts +10 -0
- package/dist/adapter/adapter.abstract.d.ts.map +1 -0
- package/dist/{config → adapter}/config.interface.d.ts +6 -5
- package/dist/adapter/config.interface.d.ts.map +1 -0
- package/dist/adapter/define-config.d.ts +3 -0
- package/dist/adapter/define-config.d.ts.map +1 -0
- package/dist/adapter/file-adapter.mixin.d.ts +18 -0
- package/dist/adapter/file-adapter.mixin.d.ts.map +1 -0
- package/dist/adapter/index.d.ts +4 -0
- package/dist/adapter/index.d.ts.map +1 -0
- package/dist/adapters/index.d.ts +3 -0
- package/dist/adapters/index.d.ts.map +1 -0
- package/dist/adapters/node.adapter.d.ts +7 -0
- package/dist/adapters/node.adapter.d.ts.map +1 -0
- package/dist/adapters/vite.adapter.d.ts +3 -0
- package/dist/adapters/vite.adapter.d.ts.map +1 -0
- package/dist/app.container.d.ts +5 -5
- package/dist/app.container.d.ts.map +1 -0
- package/dist/app.module.d.ts +1 -0
- package/dist/app.module.d.ts.map +1 -0
- package/dist/bootstrap.d.ts +3 -0
- package/dist/bootstrap.d.ts.map +1 -0
- package/dist/color/color.api.d.ts +39 -0
- package/dist/color/color.api.d.ts.map +1 -0
- package/dist/color/color.manager.d.ts +24 -0
- package/dist/color/color.manager.d.ts.map +1 -0
- package/dist/color/color.module.d.ts +1 -0
- package/dist/color/color.module.d.ts.map +1 -0
- package/dist/color/color.utils.d.ts +8 -0
- package/dist/color/color.utils.d.ts.map +1 -0
- package/dist/color/configurable-color.d.ts +31 -0
- package/dist/color/configurable-color.d.ts.map +1 -0
- package/dist/color/default-color.d.ts +3 -0
- package/dist/color/default-color.d.ts.map +1 -0
- package/dist/color/index.d.ts +5 -4
- package/dist/color/index.d.ts.map +1 -0
- package/dist/index.cjs +3224 -0
- package/dist/index.d.ts +7 -4
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3183 -7
- package/dist/material-color-utilities/contrastCurve.d.ts +1 -0
- package/dist/material-color-utilities/contrastCurve.d.ts.map +1 -0
- package/dist/material-color-utilities/dynamic_color.d.ts +89 -76
- package/dist/material-color-utilities/dynamic_color.d.ts.map +1 -0
- package/dist/material-color-utilities/hct_solver.d.ts +131 -0
- package/dist/material-color-utilities/hct_solver.d.ts.map +1 -0
- package/dist/material-color-utilities/htc.d.ts +77 -0
- package/dist/material-color-utilities/htc.d.ts.map +1 -0
- package/dist/material-color-utilities/index.d.ts +1 -0
- package/dist/material-color-utilities/index.d.ts.map +1 -0
- package/dist/material-color-utilities/toneDeltaPair.d.ts +19 -25
- package/dist/material-color-utilities/toneDeltaPair.d.ts.map +1 -0
- package/dist/plugin/index.d.ts +4 -0
- package/dist/plugin/index.d.ts.map +1 -0
- package/dist/plugin/plugin.abstract.d.ts +19 -5
- package/dist/plugin/plugin.abstract.d.ts.map +1 -0
- package/dist/plugin/plugin.api.d.ts +10 -0
- package/dist/plugin/plugin.api.d.ts.map +1 -0
- package/dist/plugin/plugin.module.d.ts +1 -0
- package/dist/plugin/plugin.module.d.ts.map +1 -0
- package/dist/plugins/font/font.plugin.d.ts +50 -0
- package/dist/plugins/font/font.plugin.d.ts.map +1 -0
- package/dist/plugins/font/index.d.ts +2 -0
- package/dist/plugins/font/index.d.ts.map +1 -0
- package/dist/plugins/index.d.ts +2 -0
- package/dist/plugins/index.d.ts.map +1 -0
- package/dist/theme/index.d.ts +7 -3
- package/dist/theme/index.d.ts.map +1 -0
- package/dist/theme/scheme.d.ts +20 -0
- package/dist/theme/scheme.d.ts.map +1 -0
- package/dist/theme/scheme.manager.d.ts +31 -0
- package/dist/theme/scheme.manager.d.ts.map +1 -0
- package/dist/theme/theme.api.d.ts +23 -0
- package/dist/theme/theme.api.d.ts.map +1 -0
- package/dist/theme/theme.module.d.ts +1 -0
- package/dist/theme/theme.module.d.ts.map +1 -0
- package/dist/theme/variant.d.ts +36 -0
- package/dist/theme/variant.d.ts.map +1 -0
- package/dist/theme/variant.manager.d.ts +14 -0
- package/dist/theme/variant.manager.d.ts.map +1 -0
- package/dist/theme/variants/expressive.variant.d.ts +3 -0
- package/dist/theme/variants/expressive.variant.d.ts.map +1 -0
- package/dist/theme/variants/index.d.ts +11 -0
- package/dist/theme/variants/index.d.ts.map +1 -0
- package/dist/theme/variants/neutral.variant.d.ts +3 -0
- package/dist/theme/variants/neutral.variant.d.ts.map +1 -0
- package/dist/theme/variants/tonal-spot.variant.d.ts +3 -0
- package/dist/theme/variants/tonal-spot.variant.d.ts.map +1 -0
- package/dist/theme/variants/vibrant.variant.d.ts +3 -0
- package/dist/theme/variants/vibrant.variant.d.ts.map +1 -0
- package/package.json +26 -87
- package/src/API.ts +23 -0
- package/src/adapter/adapter.abstract.ts +64 -0
- package/src/{config → adapter}/config.interface.ts +5 -5
- package/src/adapter/define-config.ts +11 -0
- package/src/adapter/file-adapter.mixin.ts +72 -0
- package/src/adapter/index.ts +3 -0
- package/src/adapters/index.ts +2 -0
- package/src/adapters/node.adapter.ts +57 -0
- package/src/adapters/vite.adapter.ts +79 -0
- package/src/app.container.ts +12 -36
- package/src/app.module.ts +2 -2
- package/src/bootstrap.ts +6 -0
- package/src/color/color.api.ts +75 -0
- package/src/color/color.manager.ts +213 -0
- package/src/color/color.module.ts +4 -4
- package/src/color/color.utils.ts +126 -0
- package/src/color/configurable-color.ts +67 -0
- package/src/color/default-color.ts +832 -0
- package/src/color/index.ts +4 -4
- package/src/index.test.ts +5 -0
- package/src/index.ts +6 -4
- package/src/material-color-utilities/dynamic_color.ts +286 -222
- package/src/material-color-utilities/hct_solver.ts +536 -0
- package/src/material-color-utilities/htc.ts +198 -0
- package/src/material-color-utilities/toneDeltaPair.ts +29 -11
- package/src/plugin/index.ts +3 -0
- package/src/plugin/plugin.abstract.ts +45 -5
- package/src/plugin/plugin.api.ts +51 -0
- package/src/plugin/plugin.module.ts +2 -2
- package/src/plugins/font/font.plugin.ts +203 -0
- package/src/plugins/font/index.ts +1 -0
- package/src/plugins/index.ts +1 -0
- package/src/theme/index.ts +6 -3
- package/src/theme/{services/scheme.service.ts → scheme.manager.ts} +39 -19
- package/src/theme/{entities/scheme.entity.ts → scheme.ts} +20 -4
- package/src/theme/{services/theme.service.ts → theme.api.ts} +23 -19
- package/src/theme/theme.module.ts +6 -4
- package/src/theme/variant.manager.ts +58 -0
- package/src/theme/variant.ts +53 -0
- package/src/theme/variants/expressive.variant.ts +81 -0
- package/src/theme/variants/index.ts +16 -0
- package/src/theme/variants/neutral.variant.ts +45 -0
- package/src/theme/variants/tonal-spot.variant.ts +35 -0
- package/src/theme/variants/vibrant.variant.ts +72 -0
- package/tsconfig.json +13 -0
- package/tsconfig.lib.json +33 -0
- package/tsconfig.spec.json +36 -0
- package/vite.config.ts +54 -0
- package/LICENSE +0 -21
- package/dist/app.service.d.ts +0 -13
- package/dist/color/color.interface.d.ts +0 -8
- package/dist/color/entities/color.entity.d.ts +0 -42
- package/dist/color/entities/index.d.ts +0 -1
- package/dist/color/models/default-color.model.d.ts +0 -3
- package/dist/color/models/index.d.ts +0 -1
- package/dist/color/services/color-manager.service.d.ts +0 -18
- package/dist/color/services/color.service.d.ts +0 -21
- package/dist/color/services/index.d.ts +0 -2
- package/dist/config/config.module.d.ts +0 -2
- package/dist/config/config.service.d.ts +0 -12
- package/dist/config/index.d.ts +0 -2
- package/dist/main.d.ts +0 -3
- package/dist/plugin/plugin.service.d.ts +0 -10
- package/dist/plugins/tailwind/Tailwind.plugin.d.ts +0 -14
- package/dist/plugins/tailwind/main.d.ts +0 -10
- package/dist/plugins/tailwind/plugins-tailwind/state.d.ts +0 -4
- package/dist/plugins/tailwind/plugins-tailwind/themer.d.ts +0 -4
- package/dist/theme/entities/index.d.ts +0 -2
- package/dist/theme/entities/scheme.entity.d.ts +0 -15
- package/dist/theme/entities/variant.entity.d.ts +0 -7
- package/dist/theme/models/index.d.ts +0 -1
- package/dist/theme/models/variant.model.d.ts +0 -8
- package/dist/theme/services/index.d.ts +0 -3
- package/dist/theme/services/scheme.service.d.ts +0 -17
- package/dist/theme/services/theme.service.d.ts +0 -22
- package/dist/theme/services/variant.service.d.ts +0 -13
- package/dist/theme.cjs.development.js +0 -1983
- package/dist/theme.cjs.development.js.map +0 -1
- package/dist/theme.cjs.production.min.js +0 -2
- package/dist/theme.cjs.production.min.js.map +0 -1
- package/dist/theme.esm.js +0 -1955
- package/dist/theme.esm.js.map +0 -1
- package/src/app.service.spec.ts +0 -15
- package/src/app.service.ts +0 -23
- package/src/color/color.interface.ts +0 -13
- package/src/color/entities/color.entity.ts +0 -71
- package/src/color/entities/index.ts +0 -1
- package/src/color/models/default-color.model.ts +0 -300
- package/src/color/models/index.ts +0 -1
- package/src/color/services/color-manager.service.ts +0 -191
- package/src/color/services/color.service.spec.ts +0 -28
- package/src/color/services/color.service.ts +0 -75
- package/src/color/services/index.ts +0 -2
- package/src/config/config.module.ts +0 -7
- package/src/config/config.service.ts +0 -74
- package/src/config/index.ts +0 -2
- package/src/main.ts +0 -14
- package/src/plugin/plugin.service.ts +0 -30
- package/src/plugins/tailwind/Tailwind.plugin.ts +0 -53
- package/src/plugins/tailwind/main.ts +0 -18
- package/src/plugins/tailwind/plugins-tailwind/state.ts +0 -88
- package/src/plugins/tailwind/plugins-tailwind/themer.ts +0 -53
- package/src/theme/entities/index.ts +0 -2
- package/src/theme/entities/variant.entity.ts +0 -39
- package/src/theme/models/index.ts +0 -1
- package/src/theme/models/variant.model.ts +0 -63
- package/src/theme/services/index.ts +0 -3
- package/src/theme/services/variant.service.ts +0 -52
|
@@ -1,14 +1,21 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
2
|
+
import { Hct } from '../material-color-utilities/htc';
|
|
3
|
+
import { Variant } from './variant';
|
|
2
4
|
|
|
3
5
|
export interface SchemeOptions {
|
|
4
6
|
sourceColorArgb: number;
|
|
5
7
|
contrastLevel: number;
|
|
6
8
|
isDark: boolean;
|
|
7
9
|
palettes: Map<string, TonalPalette>;
|
|
10
|
+
variant: Variant;
|
|
8
11
|
}
|
|
9
12
|
|
|
10
|
-
export class
|
|
11
|
-
constructor(
|
|
13
|
+
export class Scheme {
|
|
14
|
+
constructor(readonly options: SchemeOptions) {}
|
|
15
|
+
|
|
16
|
+
get variant(): 'expressive' | 'neutral' | 'tonalSpot' | 'vibrant' | string {
|
|
17
|
+
return this.options.variant.name;
|
|
18
|
+
}
|
|
12
19
|
|
|
13
20
|
get contrastLevel() {
|
|
14
21
|
if (!this.options) {
|
|
@@ -31,7 +38,16 @@ export class SchemeEntity {
|
|
|
31
38
|
return Hct.fromInt(this.options.sourceColorArgb);
|
|
32
39
|
}
|
|
33
40
|
|
|
34
|
-
getPalette(
|
|
41
|
+
getPalette(
|
|
42
|
+
key:
|
|
43
|
+
| 'primary'
|
|
44
|
+
| 'secondary'
|
|
45
|
+
| 'tertiary'
|
|
46
|
+
| 'neutral'
|
|
47
|
+
| 'neutralVariant'
|
|
48
|
+
| 'error'
|
|
49
|
+
| string,
|
|
50
|
+
): TonalPalette {
|
|
35
51
|
if (!this.options) {
|
|
36
52
|
throw new Error('Scheme options is not set');
|
|
37
53
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DynamicColor } from '@material/material-color-utilities';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { SchemeManager, SchemeServiceOptions } from './scheme.manager';
|
|
3
|
+
import { VariantManager } from './variant.manager';
|
|
4
|
+
import { Variant } from './variant';
|
|
5
5
|
|
|
6
6
|
type ThemeOptions = Omit<
|
|
7
7
|
SchemeServiceOptions,
|
|
@@ -14,18 +14,19 @@ const colorPaletteKeyColor = DynamicColor.fromPalette({
|
|
|
14
14
|
tone: (s) => s.primaryPalette.keyColor.tone,
|
|
15
15
|
});
|
|
16
16
|
|
|
17
|
-
export class
|
|
18
|
-
private readonly
|
|
19
|
-
private readonly
|
|
17
|
+
export class ThemeApi {
|
|
18
|
+
private readonly schemeManager: SchemeManager;
|
|
19
|
+
private readonly variantManager: VariantManager;
|
|
20
|
+
|
|
20
21
|
constructor({
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
schemeManager,
|
|
23
|
+
variantManager,
|
|
23
24
|
}: {
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
schemeManager: SchemeManager;
|
|
26
|
+
variantManager: VariantManager;
|
|
26
27
|
}) {
|
|
27
|
-
this.
|
|
28
|
-
this.
|
|
28
|
+
this.schemeManager = schemeManager;
|
|
29
|
+
this.variantManager = variantManager;
|
|
29
30
|
|
|
30
31
|
// this.addPalette({key: "primary", addDefaultColors: true})
|
|
31
32
|
// this.addPalette({key: "secondary", addDefaultColors: true})
|
|
@@ -34,6 +35,7 @@ export class ThemeService {
|
|
|
34
35
|
// this.addPalette({key: "neutral"})
|
|
35
36
|
// this.addPalette({key: "neutralVariant"})
|
|
36
37
|
}
|
|
38
|
+
|
|
37
39
|
// addPalette({key, palette, addDefaultColors}: {key: string; palette: TonalPalette; addDefaultColors: boolean}) {
|
|
38
40
|
// this.themeOptions.palettes.set(key, palette);
|
|
39
41
|
// if (addDefaultColors){
|
|
@@ -50,24 +52,26 @@ export class ThemeService {
|
|
|
50
52
|
// return this.theme();
|
|
51
53
|
// }
|
|
52
54
|
|
|
53
|
-
create(options: ThemeOptions & { variant:
|
|
54
|
-
this.
|
|
55
|
+
create(options: ThemeOptions & { variant: Variant }) {
|
|
56
|
+
this.schemeManager.createOrUpdate({
|
|
55
57
|
...options,
|
|
56
58
|
sourcesColorHex: { primary: options.sourceColorHex },
|
|
57
59
|
});
|
|
58
|
-
this.
|
|
60
|
+
this.variantManager.set(options.variant);
|
|
59
61
|
}
|
|
60
62
|
|
|
61
|
-
update(options: Partial<ThemeOptions> & { variant?:
|
|
63
|
+
update(options: Partial<ThemeOptions> & { variant?: Variant }) {
|
|
62
64
|
const themeOptions: Partial<SchemeServiceOptions> = { ...options };
|
|
63
65
|
if (options.sourceColorHex)
|
|
64
66
|
themeOptions.sourcesColorHex = { primary: options.sourceColorHex };
|
|
65
|
-
this.
|
|
66
|
-
if (options.variant) this.
|
|
67
|
+
this.schemeManager.createOrUpdate(themeOptions);
|
|
68
|
+
if (options.variant) this.variantManager.set(options.variant);
|
|
67
69
|
}
|
|
70
|
+
|
|
68
71
|
addCustomPalette(key: string, colorHex: string) {
|
|
69
|
-
this.
|
|
72
|
+
this.variantManager.addCustomPalette(key, colorHex);
|
|
70
73
|
}
|
|
74
|
+
|
|
71
75
|
// theme(): SchemeService {
|
|
72
76
|
// return new SchemeService(this.themeOptions, this.colorService)
|
|
73
77
|
// }
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { SchemeService, ThemeService, VariantService } from './services';
|
|
2
1
|
import { asClass } from 'awilix';
|
|
3
2
|
import { Module } from '../app.container';
|
|
3
|
+
import { SchemeManager } from './scheme.manager';
|
|
4
|
+
import { VariantManager } from './variant.manager';
|
|
5
|
+
import { ThemeApi } from './theme.api';
|
|
4
6
|
|
|
5
7
|
export const ThemeModule: Module = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
schemeManager: asClass(SchemeManager).singleton(),
|
|
9
|
+
variantManager: asClass(VariantManager).singleton(),
|
|
10
|
+
themeApi: asClass(ThemeApi).singleton(),
|
|
9
11
|
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CustomPaletteFunction,
|
|
3
|
+
PaletteFunction,
|
|
4
|
+
SchemeManager,
|
|
5
|
+
} from './scheme.manager';
|
|
6
|
+
import { Variant } from './variant';
|
|
7
|
+
|
|
8
|
+
export class VariantManager {
|
|
9
|
+
public customPalettes: Record<string, string> = {};
|
|
10
|
+
private variantEntity?: Variant;
|
|
11
|
+
|
|
12
|
+
private readonly schemeManager: SchemeManager;
|
|
13
|
+
|
|
14
|
+
constructor({ schemeManager }: { schemeManager: SchemeManager }) {
|
|
15
|
+
this.schemeManager = schemeManager;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
addCustomPalette(key: string, colorHex: string) {
|
|
19
|
+
this.customPalettes[key] = colorHex;
|
|
20
|
+
this.update();
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
set(variantEntity: Variant) {
|
|
24
|
+
this.variantEntity = variantEntity;
|
|
25
|
+
this.update();
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
private update() {
|
|
29
|
+
if (!this.variantEntity) return;
|
|
30
|
+
const palettes: Record<
|
|
31
|
+
string,
|
|
32
|
+
| {
|
|
33
|
+
sourceColorkey: string;
|
|
34
|
+
tonalPalette: CustomPaletteFunction;
|
|
35
|
+
}
|
|
36
|
+
| {
|
|
37
|
+
tonalPalette: PaletteFunction;
|
|
38
|
+
}
|
|
39
|
+
> = {};
|
|
40
|
+
Object.keys(this.variantEntity.palettes).forEach((key) => {
|
|
41
|
+
palettes[key] = { tonalPalette: this.variantEntity!.palettes[key] };
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
const customPalettes = this.variantEntity.customPalettes;
|
|
45
|
+
if (customPalettes) {
|
|
46
|
+
Object.keys(this.customPalettes).forEach((key) => {
|
|
47
|
+
palettes[key] = {
|
|
48
|
+
sourceColorkey: key,
|
|
49
|
+
tonalPalette: customPalettes,
|
|
50
|
+
};
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
this.schemeManager.createOrUpdate({
|
|
54
|
+
sourcesColorHex: this.customPalettes,
|
|
55
|
+
palettes: palettes,
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import {
|
|
2
|
+
sanitizeDegreesDouble,
|
|
3
|
+
TonalPalette,
|
|
4
|
+
} from '@material/material-color-utilities';
|
|
5
|
+
import { Hct } from '../material-color-utilities/htc';
|
|
6
|
+
import { AddColors } from '../color';
|
|
7
|
+
|
|
8
|
+
export const getPiecewiseHue = (
|
|
9
|
+
sourceColorHct: Hct,
|
|
10
|
+
hueBreakpoints: number[],
|
|
11
|
+
hues: number[],
|
|
12
|
+
): number => {
|
|
13
|
+
const size = Math.min(hueBreakpoints.length - 1, hues.length);
|
|
14
|
+
const sourceHue = sourceColorHct.hue;
|
|
15
|
+
for (let i = 0; i < size; i++) {
|
|
16
|
+
if (sourceHue >= hueBreakpoints[i] && sourceHue < hueBreakpoints[i + 1]) {
|
|
17
|
+
return sanitizeDegreesDouble(hues[i]);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return sourceHue;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export const getRotatedHue = (
|
|
24
|
+
sourceColorHct: Hct,
|
|
25
|
+
hueBreakpoints: number[],
|
|
26
|
+
rotations: number[],
|
|
27
|
+
): number => {
|
|
28
|
+
let rotation = getPiecewiseHue(sourceColorHct, hueBreakpoints, rotations);
|
|
29
|
+
if (Math.min(hueBreakpoints.length - 1, rotations.length) <= 0) {
|
|
30
|
+
rotation = 0;
|
|
31
|
+
}
|
|
32
|
+
return sanitizeDegreesDouble(sourceColorHct.hue + rotation);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export class Variant {
|
|
36
|
+
constructor(
|
|
37
|
+
public palettes: Record<
|
|
38
|
+
string,
|
|
39
|
+
(args: { sourceColorHct: Hct; isDark: boolean }) => TonalPalette
|
|
40
|
+
> = {},
|
|
41
|
+
public name: string,
|
|
42
|
+
public customPalettes?: (args: {
|
|
43
|
+
isDark: boolean;
|
|
44
|
+
sourceColorHct: Hct;
|
|
45
|
+
colorHct: Hct;
|
|
46
|
+
}) => TonalPalette,
|
|
47
|
+
/** TODO
|
|
48
|
+
* Defines color modifications through variation.
|
|
49
|
+
* Allows customization of specific colors in the theme.
|
|
50
|
+
*/
|
|
51
|
+
public colors?: AddColors['colors'],
|
|
52
|
+
) {}
|
|
53
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
|
|
2
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
3
|
+
import { Hct } from '../../material-color-utilities/htc';
|
|
4
|
+
|
|
5
|
+
const getExpressiveNeutralHue = (sourceColorHct: Hct): number => {
|
|
6
|
+
const hue = getRotatedHue(
|
|
7
|
+
sourceColorHct,
|
|
8
|
+
[0, 71, 124, 253, 278, 300, 360],
|
|
9
|
+
[10, 0, 10, 0, 10, 0],
|
|
10
|
+
);
|
|
11
|
+
return hue;
|
|
12
|
+
};
|
|
13
|
+
const getExpressiveNeutralChroma = (
|
|
14
|
+
sourceColorHct: Hct,
|
|
15
|
+
isDark: boolean,
|
|
16
|
+
): number => {
|
|
17
|
+
const neutralHue = getExpressiveNeutralHue(sourceColorHct);
|
|
18
|
+
return isDark ? (Hct.isYellow(neutralHue) ? 6 : 14) : 18;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export const expressiveVariant: Variant = {
|
|
22
|
+
name: 'expressive',
|
|
23
|
+
palettes: {
|
|
24
|
+
primary: ({ sourceColorHct, isDark }) =>
|
|
25
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 36 : 48),
|
|
26
|
+
secondary: ({ sourceColorHct, isDark }) =>
|
|
27
|
+
TonalPalette.fromHueAndChroma(
|
|
28
|
+
getRotatedHue(
|
|
29
|
+
sourceColorHct,
|
|
30
|
+
[0, 105, 140, 204, 253, 278, 300, 333, 360],
|
|
31
|
+
[-160, 155, -100, 96, -96, -156, -165, -160],
|
|
32
|
+
),
|
|
33
|
+
isDark ? 16 : 24,
|
|
34
|
+
),
|
|
35
|
+
tertiary: ({ sourceColorHct }) =>
|
|
36
|
+
TonalPalette.fromHueAndChroma(
|
|
37
|
+
getRotatedHue(
|
|
38
|
+
sourceColorHct,
|
|
39
|
+
[0, 105, 140, 204, 253, 278, 300, 333, 360],
|
|
40
|
+
[-165, 160, -105, 101, -101, -160, -170, -165],
|
|
41
|
+
),
|
|
42
|
+
48,
|
|
43
|
+
),
|
|
44
|
+
neutral: ({ sourceColorHct, isDark }) =>
|
|
45
|
+
TonalPalette.fromHueAndChroma(
|
|
46
|
+
getExpressiveNeutralHue(sourceColorHct),
|
|
47
|
+
getExpressiveNeutralChroma(sourceColorHct, isDark),
|
|
48
|
+
),
|
|
49
|
+
neutralVariant: ({ sourceColorHct, isDark }) => {
|
|
50
|
+
const expressiveNeutralHue = getExpressiveNeutralHue(sourceColorHct);
|
|
51
|
+
const expressiveNeutralChroma = getExpressiveNeutralChroma(
|
|
52
|
+
sourceColorHct,
|
|
53
|
+
isDark,
|
|
54
|
+
);
|
|
55
|
+
return TonalPalette.fromHueAndChroma(
|
|
56
|
+
expressiveNeutralHue,
|
|
57
|
+
expressiveNeutralChroma *
|
|
58
|
+
(expressiveNeutralHue >= 105 && expressiveNeutralHue < 125
|
|
59
|
+
? 1.6
|
|
60
|
+
: 2.3),
|
|
61
|
+
);
|
|
62
|
+
},
|
|
63
|
+
error: ({ sourceColorHct }) => {
|
|
64
|
+
const errorHue = getPiecewiseHue(
|
|
65
|
+
sourceColorHct,
|
|
66
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
67
|
+
[12, 22, 32, 12, 22, 32, 22, 12],
|
|
68
|
+
);
|
|
69
|
+
return TonalPalette.fromHueAndChroma(errorHue, 64);
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
customPalettes: ({ colorHct, isDark }) =>
|
|
73
|
+
TonalPalette.fromHueAndChroma(
|
|
74
|
+
getRotatedHue(
|
|
75
|
+
colorHct,
|
|
76
|
+
[0, 105, 140, 204, 253, 278, 300, 333, 360],
|
|
77
|
+
[-160, 155, -100, 96, -96, -156, -165, -160],
|
|
78
|
+
),
|
|
79
|
+
isDark ? 16 : 24,
|
|
80
|
+
),
|
|
81
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { expressiveVariant } from './expressive.variant';
|
|
2
|
+
import { neutralVariant } from './neutral.variant';
|
|
3
|
+
import { tonalSpotVariant } from './tonal-spot.variant';
|
|
4
|
+
import { vibrantVariant } from './vibrant.variant';
|
|
5
|
+
|
|
6
|
+
export * from './tonal-spot.variant';
|
|
7
|
+
export * from './vibrant.variant';
|
|
8
|
+
export * from './expressive.variant';
|
|
9
|
+
export * from './neutral.variant';
|
|
10
|
+
|
|
11
|
+
export const Variants = {
|
|
12
|
+
Expressive: expressiveVariant,
|
|
13
|
+
Neutral: neutralVariant,
|
|
14
|
+
TonalSpot: tonalSpotVariant,
|
|
15
|
+
Vibrant: vibrantVariant,
|
|
16
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
|
|
2
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
3
|
+
import { Hct } from '../../material-color-utilities/htc';
|
|
4
|
+
|
|
5
|
+
export const neutralVariant: Variant = {
|
|
6
|
+
name: 'neutral',
|
|
7
|
+
palettes: {
|
|
8
|
+
primary: ({ sourceColorHct }) =>
|
|
9
|
+
TonalPalette.fromHueAndChroma(
|
|
10
|
+
sourceColorHct.hue,
|
|
11
|
+
Hct.isBlue(sourceColorHct.hue) ? 12 : 8,
|
|
12
|
+
),
|
|
13
|
+
secondary: ({ sourceColorHct }) =>
|
|
14
|
+
TonalPalette.fromHueAndChroma(
|
|
15
|
+
sourceColorHct.hue,
|
|
16
|
+
Hct.isBlue(sourceColorHct.hue) ? 6 : 4,
|
|
17
|
+
),
|
|
18
|
+
tertiary: ({ sourceColorHct }) =>
|
|
19
|
+
TonalPalette.fromHueAndChroma(
|
|
20
|
+
getRotatedHue(
|
|
21
|
+
sourceColorHct,
|
|
22
|
+
[0, 38, 105, 161, 204, 278, 333, 360],
|
|
23
|
+
[-32, 26, 10, -39, 24, -15, -32],
|
|
24
|
+
),
|
|
25
|
+
20,
|
|
26
|
+
),
|
|
27
|
+
neutral: ({ sourceColorHct }) =>
|
|
28
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4),
|
|
29
|
+
neutralVariant: ({ sourceColorHct }) =>
|
|
30
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4 * 2.2),
|
|
31
|
+
error: ({ sourceColorHct }) => {
|
|
32
|
+
const errorHue = getPiecewiseHue(
|
|
33
|
+
sourceColorHct,
|
|
34
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
35
|
+
[12, 22, 32, 12, 22, 32, 22, 12],
|
|
36
|
+
);
|
|
37
|
+
return TonalPalette.fromHueAndChroma(errorHue, 50);
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
customPalettes: ({ colorHct }) =>
|
|
41
|
+
TonalPalette.fromHueAndChroma(
|
|
42
|
+
colorHct.hue,
|
|
43
|
+
Hct.isBlue(colorHct.hue) ? 6 : 4,
|
|
44
|
+
),
|
|
45
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
|
|
2
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
3
|
+
|
|
4
|
+
export const tonalSpotVariant: Variant = {
|
|
5
|
+
name: 'tonalSpot',
|
|
6
|
+
palettes: {
|
|
7
|
+
primary: ({ sourceColorHct, isDark }) =>
|
|
8
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
|
|
9
|
+
secondary: ({ sourceColorHct }) =>
|
|
10
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
|
|
11
|
+
tertiary: ({ sourceColorHct }) =>
|
|
12
|
+
TonalPalette.fromHueAndChroma(
|
|
13
|
+
getRotatedHue(
|
|
14
|
+
sourceColorHct,
|
|
15
|
+
[0, 20, 71, 161, 333, 360],
|
|
16
|
+
[-40, 48, -32, 40, -32],
|
|
17
|
+
),
|
|
18
|
+
28,
|
|
19
|
+
),
|
|
20
|
+
neutral: ({ sourceColorHct }) =>
|
|
21
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
|
|
22
|
+
neutralVariant: ({ sourceColorHct }) =>
|
|
23
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
|
|
24
|
+
error: ({ sourceColorHct }) => {
|
|
25
|
+
const errorHue = getPiecewiseHue(
|
|
26
|
+
sourceColorHct,
|
|
27
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
28
|
+
[12, 22, 32, 12, 22, 32, 22, 12],
|
|
29
|
+
);
|
|
30
|
+
return TonalPalette.fromHueAndChroma(errorHue, 60);
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
customPalettes: ({ colorHct }) =>
|
|
34
|
+
TonalPalette.fromHueAndChroma(colorHct.hue, 16),
|
|
35
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
|
|
2
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
3
|
+
import { Hct } from '../../material-color-utilities/htc';
|
|
4
|
+
|
|
5
|
+
const getVibrantNeutralHue = (sourceColorHct: Hct): number => {
|
|
6
|
+
return getRotatedHue(
|
|
7
|
+
sourceColorHct,
|
|
8
|
+
[0, 38, 105, 140, 333, 360],
|
|
9
|
+
[-14, 10, -14, 10, -14],
|
|
10
|
+
);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const getVibrantNeutralChroma = (sourceColorHct: Hct): number => {
|
|
14
|
+
const neutralHue = getVibrantNeutralHue(sourceColorHct);
|
|
15
|
+
return 28;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export const vibrantVariant: Variant = {
|
|
19
|
+
name: 'vibrant',
|
|
20
|
+
palettes: {
|
|
21
|
+
primary: ({ sourceColorHct }) =>
|
|
22
|
+
TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
|
|
23
|
+
secondary: ({ sourceColorHct }) =>
|
|
24
|
+
TonalPalette.fromHueAndChroma(
|
|
25
|
+
getRotatedHue(
|
|
26
|
+
sourceColorHct,
|
|
27
|
+
[0, 38, 105, 140, 333, 360],
|
|
28
|
+
[-14, 10, -14, 10, -14],
|
|
29
|
+
),
|
|
30
|
+
56,
|
|
31
|
+
),
|
|
32
|
+
tertiary: ({ sourceColorHct }) =>
|
|
33
|
+
TonalPalette.fromHueAndChroma(
|
|
34
|
+
getRotatedHue(
|
|
35
|
+
sourceColorHct,
|
|
36
|
+
[0, 38, 71, 105, 140, 161, 253, 333, 360],
|
|
37
|
+
[-72, 35, 24, -24, 62, 50, 62, -72],
|
|
38
|
+
),
|
|
39
|
+
56,
|
|
40
|
+
),
|
|
41
|
+
neutral: ({ sourceColorHct }) =>
|
|
42
|
+
TonalPalette.fromHueAndChroma(
|
|
43
|
+
getVibrantNeutralHue(sourceColorHct),
|
|
44
|
+
getVibrantNeutralChroma(sourceColorHct),
|
|
45
|
+
),
|
|
46
|
+
neutralVariant: ({ sourceColorHct }) => {
|
|
47
|
+
const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
|
|
48
|
+
const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
|
|
49
|
+
return TonalPalette.fromHueAndChroma(
|
|
50
|
+
vibrantNeutralHue,
|
|
51
|
+
vibrantNeutralChroma * 1.29,
|
|
52
|
+
);
|
|
53
|
+
},
|
|
54
|
+
error: ({ sourceColorHct }) => {
|
|
55
|
+
const errorHue = getPiecewiseHue(
|
|
56
|
+
sourceColorHct,
|
|
57
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
58
|
+
[12, 22, 32, 12, 22, 32, 22, 12],
|
|
59
|
+
);
|
|
60
|
+
return TonalPalette.fromHueAndChroma(errorHue, 80);
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
customPalettes: ({ colorHct }) =>
|
|
64
|
+
TonalPalette.fromHueAndChroma(
|
|
65
|
+
getRotatedHue(
|
|
66
|
+
colorHct,
|
|
67
|
+
[0, 38, 105, 140, 333, 360],
|
|
68
|
+
[-14, 10, -14, 10, -14],
|
|
69
|
+
),
|
|
70
|
+
56,
|
|
71
|
+
),
|
|
72
|
+
};
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../tsconfig.base.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"baseUrl": ".",
|
|
5
|
+
"rootDir": "src",
|
|
6
|
+
"outDir": "dist",
|
|
7
|
+
"tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
|
|
8
|
+
"emitDeclarationOnly": true,
|
|
9
|
+
"forceConsistentCasingInFileNames": true,
|
|
10
|
+
"types": [
|
|
11
|
+
"node",
|
|
12
|
+
"vite/client"
|
|
13
|
+
]
|
|
14
|
+
},
|
|
15
|
+
"include": [
|
|
16
|
+
"src/**/*.ts"
|
|
17
|
+
],
|
|
18
|
+
"references": [],
|
|
19
|
+
"exclude": [
|
|
20
|
+
"vite.config.ts",
|
|
21
|
+
"vite.config.mts",
|
|
22
|
+
"vitest.config.ts",
|
|
23
|
+
"vitest.config.mts",
|
|
24
|
+
"src/**/*.test.ts",
|
|
25
|
+
"src/**/*.spec.ts",
|
|
26
|
+
"src/**/*.test.tsx",
|
|
27
|
+
"src/**/*.spec.tsx",
|
|
28
|
+
"src/**/*.test.js",
|
|
29
|
+
"src/**/*.spec.js",
|
|
30
|
+
"src/**/*.test.jsx",
|
|
31
|
+
"src/**/*.spec.jsx"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../tsconfig.base.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"outDir": "./out-tsc/vitest",
|
|
5
|
+
"types": [
|
|
6
|
+
"vitest/globals",
|
|
7
|
+
"vitest/importMeta",
|
|
8
|
+
"vite/client",
|
|
9
|
+
"node",
|
|
10
|
+
"vitest"
|
|
11
|
+
],
|
|
12
|
+
"module": "nodenext",
|
|
13
|
+
"moduleResolution": "nodenext",
|
|
14
|
+
"forceConsistentCasingInFileNames": true
|
|
15
|
+
},
|
|
16
|
+
"include": [
|
|
17
|
+
"vite.config.ts",
|
|
18
|
+
"vite.config.mts",
|
|
19
|
+
"vitest.config.ts",
|
|
20
|
+
"vitest.config.mts",
|
|
21
|
+
"src/**/*.test.ts",
|
|
22
|
+
"src/**/*.spec.ts",
|
|
23
|
+
"src/**/*.test.tsx",
|
|
24
|
+
"src/**/*.spec.tsx",
|
|
25
|
+
"src/**/*.test.js",
|
|
26
|
+
"src/**/*.spec.js",
|
|
27
|
+
"src/**/*.test.jsx",
|
|
28
|
+
"src/**/*.spec.jsx",
|
|
29
|
+
"src/**/*.d.ts"
|
|
30
|
+
],
|
|
31
|
+
"references": [
|
|
32
|
+
{
|
|
33
|
+
"path": "./tsconfig.lib.json"
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
}
|
package/vite.config.ts
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/// <reference types='vitest' />
|
|
2
|
+
import { defineConfig } from 'vite';
|
|
3
|
+
import dts from 'vite-plugin-dts';
|
|
4
|
+
import * as path from 'path';
|
|
5
|
+
|
|
6
|
+
export default defineConfig(() => ({
|
|
7
|
+
root: __dirname,
|
|
8
|
+
cacheDir: '../../node_modules/.vite/packages/theme',
|
|
9
|
+
plugins: [
|
|
10
|
+
dts({
|
|
11
|
+
entryRoot: 'src',
|
|
12
|
+
tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
|
|
13
|
+
}),
|
|
14
|
+
],
|
|
15
|
+
// Uncomment this if you are using workers.
|
|
16
|
+
// worker: {
|
|
17
|
+
// plugins: [ nxViteTsPaths() ],
|
|
18
|
+
// },
|
|
19
|
+
// Configuration for building your library.
|
|
20
|
+
// See: https://vitejs.dev/guide/build.html#library-mode
|
|
21
|
+
build: {
|
|
22
|
+
outDir: './dist',
|
|
23
|
+
emptyOutDir: true,
|
|
24
|
+
reportCompressedSize: true,
|
|
25
|
+
ssr: true,
|
|
26
|
+
commonjsOptions: {
|
|
27
|
+
transformMixedEsModules: true,
|
|
28
|
+
},
|
|
29
|
+
lib: {
|
|
30
|
+
// Could also be a dictionary or array of multiple entry points.
|
|
31
|
+
entry: 'src/index.ts',
|
|
32
|
+
name: '@udixio/theme',
|
|
33
|
+
fileName: 'index',
|
|
34
|
+
// Change this to the formats you want to support.
|
|
35
|
+
// Don't forget to update your package.json as well.
|
|
36
|
+
formats: ['es' as const, 'cjs' as const],
|
|
37
|
+
},
|
|
38
|
+
rollupOptions: {
|
|
39
|
+
// External packages that should not be bundled into your library.
|
|
40
|
+
external: ['pathe'],
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
test: {
|
|
44
|
+
watch: false,
|
|
45
|
+
globals: true,
|
|
46
|
+
environment: 'node',
|
|
47
|
+
include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
|
48
|
+
reporters: ['default'],
|
|
49
|
+
coverage: {
|
|
50
|
+
reportsDirectory: './test-output/vitest/coverage',
|
|
51
|
+
provider: 'v8' as const,
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
}));
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 vigreux-joël
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
package/dist/app.service.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ColorService } from './color';
|
|
2
|
-
import { ThemeService } from './theme';
|
|
3
|
-
import { PluginService } from './plugin/plugin.service';
|
|
4
|
-
export declare class AppService {
|
|
5
|
-
colorService: ColorService;
|
|
6
|
-
themeService: ThemeService;
|
|
7
|
-
pluginService: PluginService;
|
|
8
|
-
constructor({ colorService, themeService, pluginService, }: {
|
|
9
|
-
colorService: ColorService;
|
|
10
|
-
themeService: ThemeService;
|
|
11
|
-
pluginService: PluginService;
|
|
12
|
-
});
|
|
13
|
-
}
|