@udixio/theme 1.3.1 → 2.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/CHANGELOG.md +23 -2
- package/dist/API.d.ts +7 -4
- package/dist/API.d.ts.map +1 -1
- package/dist/app.container.d.ts +1 -2
- package/dist/app.container.d.ts.map +1 -1
- package/dist/bin.cjs +1 -1
- package/dist/bin.js +1 -1
- package/dist/browser.cjs +23 -18
- package/dist/browser.js +34 -29
- package/dist/color/color.api.d.ts +16 -31
- package/dist/color/color.api.d.ts.map +1 -1
- package/dist/color/color.d.ts +100 -0
- package/dist/color/color.d.ts.map +1 -0
- package/dist/color/color.manager.d.ts +9 -18
- package/dist/color/color.manager.d.ts.map +1 -1
- package/dist/color/color.utils.d.ts +14 -3
- package/dist/color/color.utils.d.ts.map +1 -1
- package/dist/color/default-color.d.ts +5 -1
- package/dist/color/default-color.d.ts.map +1 -1
- package/dist/color/index.d.ts +1 -1
- package/dist/color/index.d.ts.map +1 -1
- package/dist/config/config.interface.d.ts +4 -4
- package/dist/config/config.interface.d.ts.map +1 -1
- package/dist/context/context.d.ts +41 -0
- package/dist/context/context.d.ts.map +1 -0
- package/dist/context/context.module.d.ts +3 -0
- package/dist/context/context.module.d.ts.map +1 -0
- package/dist/context/index.d.ts +3 -0
- package/dist/context/index.d.ts.map +1 -0
- package/dist/font.plugin-5Xpo-ntw.js +228 -0
- package/dist/font.plugin-FPU_gL1Y.cjs +227 -0
- package/dist/index.d.ts +6 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/{load-from-path-Bo1kCfh9.js → load-from-path-CBnO8ESw.js} +1 -1
- package/dist/{load-from-path-DoZnR1-p.cjs → load-from-path-kuofMGN3.cjs} +2 -2
- package/dist/loader/loader.d.ts +1 -1
- package/dist/loader/loader.d.ts.map +1 -1
- package/dist/loader-BzsrGBu-.cjs +3905 -0
- package/dist/loader-CoayTlSl.js +3906 -0
- package/dist/material-color-utilities/dynamic_color.d.ts +0 -22
- package/dist/material-color-utilities/dynamic_color.d.ts.map +1 -1
- package/dist/material-color-utilities/toneDeltaPair.d.ts +8 -8
- package/dist/material-color-utilities/toneDeltaPair.d.ts.map +1 -1
- package/dist/node.cjs +24 -19
- package/dist/node.js +36 -31
- package/dist/palette/index.d.ts +4 -0
- package/dist/palette/index.d.ts.map +1 -0
- package/dist/palette/palette.api.d.ts +13 -0
- package/dist/palette/palette.api.d.ts.map +1 -0
- package/dist/palette/palette.d.ts +33 -0
- package/dist/palette/palette.d.ts.map +1 -0
- package/dist/palette/palette.manager.d.ts +20 -0
- package/dist/palette/palette.manager.d.ts.map +1 -0
- package/dist/palette/palette.module.d.ts +3 -0
- package/dist/palette/palette.module.d.ts.map +1 -0
- package/dist/plugins/font/font.plugin.d.ts +1 -1
- package/dist/plugins/font/font.plugin.d.ts.map +1 -1
- package/dist/variant/index.d.ts +3 -0
- package/dist/variant/index.d.ts.map +1 -0
- package/dist/variant/variant.d.ts +31 -0
- package/dist/variant/variant.d.ts.map +1 -0
- package/dist/variant/variants/expressive.variant.d.ts +2 -0
- package/dist/variant/variants/expressive.variant.d.ts.map +1 -0
- package/dist/{theme → variant}/variants/index.d.ts +1 -1
- package/dist/variant/variants/index.d.ts.map +1 -0
- package/dist/variant/variants/neutral.variant.d.ts.map +1 -0
- package/dist/variant/variants/tonal-spot.variant.d.ts.map +1 -0
- package/dist/variant/variants/udixio.variant.d.ts +3 -0
- package/dist/variant/variants/udixio.variant.d.ts.map +1 -0
- package/dist/variant/variants/vibrant.variant.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/API.ts +12 -5
- package/src/app.container.ts +22 -11
- package/src/bootstrap.ts +1 -1
- package/src/color/color.api.ts +189 -47
- package/src/color/color.manager.ts +34 -189
- package/src/color/color.ts +295 -0
- package/src/color/color.utils.ts +48 -3
- package/src/color/default-color.ts +390 -425
- package/src/color/index.ts +1 -1
- package/src/config/config.interface.ts +5 -4
- package/src/context/context.module.ts +7 -0
- package/src/context/context.ts +169 -0
- package/src/context/index.ts +2 -0
- package/src/index.ts +6 -4
- package/src/loader/loader.ts +11 -24
- package/src/material-color-utilities/dynamic_color.ts +25 -34
- package/src/material-color-utilities/toneDeltaPair.ts +44 -41
- package/src/palette/index.ts +3 -0
- package/src/palette/palette.api.ts +43 -0
- package/src/palette/palette.manager.ts +74 -0
- package/src/palette/palette.module.ts +9 -0
- package/src/palette/palette.ts +206 -0
- package/src/plugins/font/font.plugin.ts +1 -1
- package/src/variant/index.ts +2 -0
- package/src/variant/variant.ts +84 -0
- package/src/{theme → variant}/variants/expressive.variant.ts +33 -29
- package/src/{theme → variant}/variants/index.ts +2 -2
- package/src/variant/variants/neutral.variant.ts +47 -0
- package/src/variant/variants/tonal-spot.variant.ts +37 -0
- package/src/variant/variants/udixio.variant.ts +846 -0
- package/src/{theme → variant}/variants/vibrant.variant.ts +23 -22
- package/dist/color/configurable-color.d.ts +0 -31
- package/dist/color/configurable-color.d.ts.map +0 -1
- package/dist/define-config-BasMdCqD.js +0 -430
- package/dist/define-config-CKSsLMnc.cjs +0 -429
- package/dist/loader-C8_TyOuS.js +0 -2698
- package/dist/loader-R7hccp8_.cjs +0 -2697
- package/dist/theme/index.d.ts +0 -8
- package/dist/theme/index.d.ts.map +0 -1
- package/dist/theme/scheme.d.ts +0 -20
- package/dist/theme/scheme.d.ts.map +0 -1
- package/dist/theme/scheme.manager.d.ts +0 -31
- package/dist/theme/scheme.manager.d.ts.map +0 -1
- package/dist/theme/theme.api.d.ts +0 -24
- package/dist/theme/theme.api.d.ts.map +0 -1
- package/dist/theme/theme.module.d.ts +0 -3
- package/dist/theme/theme.module.d.ts.map +0 -1
- package/dist/theme/variant.d.ts +0 -36
- package/dist/theme/variant.d.ts.map +0 -1
- package/dist/theme/variant.manager.d.ts +0 -14
- package/dist/theme/variant.manager.d.ts.map +0 -1
- package/dist/theme/variants/expressive.variant.d.ts +0 -3
- package/dist/theme/variants/expressive.variant.d.ts.map +0 -1
- package/dist/theme/variants/fidelity.variant.d.ts +0 -3
- package/dist/theme/variants/fidelity.variant.d.ts.map +0 -1
- package/dist/theme/variants/index.d.ts.map +0 -1
- package/dist/theme/variants/neutral.variant.d.ts.map +0 -1
- package/dist/theme/variants/tonal-spot.variant.d.ts.map +0 -1
- package/dist/theme/variants/vibrant.variant.d.ts.map +0 -1
- package/src/color/configurable-color.ts +0 -67
- package/src/theme/index.ts +0 -7
- package/src/theme/scheme.manager.ts +0 -100
- package/src/theme/scheme.ts +0 -66
- package/src/theme/theme.api.ts +0 -82
- package/src/theme/theme.module.ts +0 -11
- package/src/theme/variant.manager.ts +0 -58
- package/src/theme/variant.ts +0 -53
- package/src/theme/variants/fidelity.variant.ts +0 -38
- package/src/theme/variants/neutral.variant.ts +0 -45
- package/src/theme/variants/tonal-spot.variant.ts +0 -35
- /package/dist/{theme → variant}/variants/neutral.variant.d.ts +0 -0
- /package/dist/{theme → variant}/variants/tonal-spot.variant.d.ts +0 -0
- /package/dist/{theme → variant}/variants/vibrant.variant.d.ts +0 -0
package/dist/theme/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC"}
|
package/dist/theme/scheme.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { TonalPalette } from '@material/material-color-utilities';
|
|
2
|
-
import { Hct } from '../material-color-utilities/htc';
|
|
3
|
-
import { Variant } from './variant';
|
|
4
|
-
export interface SchemeOptions {
|
|
5
|
-
sourceColorArgb: number;
|
|
6
|
-
contrastLevel: number;
|
|
7
|
-
isDark: boolean;
|
|
8
|
-
palettes: Map<string, TonalPalette>;
|
|
9
|
-
variant: Variant;
|
|
10
|
-
}
|
|
11
|
-
export declare class Scheme {
|
|
12
|
-
readonly options: SchemeOptions;
|
|
13
|
-
constructor(options: SchemeOptions);
|
|
14
|
-
get variant(): 'expressive' | 'neutral' | 'tonalSpot' | 'vibrant' | 'fidelity' | string;
|
|
15
|
-
get contrastLevel(): number;
|
|
16
|
-
get isDark(): boolean;
|
|
17
|
-
get sourceColorHct(): Hct;
|
|
18
|
-
getPalette(key: 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'neutralVariant' | 'error' | string): TonalPalette;
|
|
19
|
-
}
|
|
20
|
-
//# sourceMappingURL=scheme.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"scheme.d.ts","sourceRoot":"","sources":["../../src/theme/scheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,MAAM;IACL,QAAQ,CAAC,OAAO,EAAE,aAAa;gBAAtB,OAAO,EAAE,aAAa;IAE3C,IAAI,OAAO,IACP,YAAY,GACZ,SAAS,GACT,WAAW,GACX,SAAS,GACT,UAAU,GACV,MAAM,CAET;IAED,IAAI,aAAa,WAKhB;IAED,IAAI,MAAM,YAKT;IAED,IAAI,cAAc,QAKjB;IAED,UAAU,CACR,GAAG,EACC,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,MAAM,GACT,YAAY;CAUhB"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { Scheme, SchemeOptions } from './scheme';
|
|
2
|
-
import { TonalPalette } from '@material/material-color-utilities';
|
|
3
|
-
import { Hct } from '../material-color-utilities/htc';
|
|
4
|
-
export type SchemeServiceOptions = Omit<SchemeOptions, 'palettes' | 'sourceColorArgb'> & {
|
|
5
|
-
sourcesColorHex: Record<string, string> & {
|
|
6
|
-
primary?: string;
|
|
7
|
-
};
|
|
8
|
-
palettes: Record<string, {
|
|
9
|
-
sourceColorkey: string;
|
|
10
|
-
tonalPalette: CustomPaletteFunction;
|
|
11
|
-
} | {
|
|
12
|
-
sourceColorkey?: never;
|
|
13
|
-
tonalPalette: PaletteFunction;
|
|
14
|
-
}>;
|
|
15
|
-
};
|
|
16
|
-
type PaletteFunctionArgs = {
|
|
17
|
-
isDark: boolean;
|
|
18
|
-
sourceColorHct: Hct;
|
|
19
|
-
};
|
|
20
|
-
export type PaletteFunction = (args: PaletteFunctionArgs) => TonalPalette;
|
|
21
|
-
export type CustomPaletteFunction = (args: PaletteFunctionArgs & {
|
|
22
|
-
colorHct: Hct;
|
|
23
|
-
}) => TonalPalette;
|
|
24
|
-
export declare class SchemeManager {
|
|
25
|
-
private schemeEntity?;
|
|
26
|
-
private options?;
|
|
27
|
-
createOrUpdate(options: Partial<SchemeServiceOptions>): void;
|
|
28
|
-
get(): Scheme;
|
|
29
|
-
}
|
|
30
|
-
export {};
|
|
31
|
-
//# sourceMappingURL=scheme.manager.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"scheme.manager.d.ts","sourceRoot":"","sources":["../../src/theme/scheme.manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAe,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAEtD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,aAAa,EACb,UAAU,GAAG,iBAAiB,CAC/B,GAAG;IACF,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,QAAQ,EAAE,MAAM,CACd,MAAM,EACJ;QACE,cAAc,EAAE,MAAM,CAAC;QACvB,YAAY,EAAE,qBAAqB,CAAC;KACrC,GACD;QACE,cAAc,CAAC,EAAE,KAAK,CAAC;QACvB,YAAY,EAAE,eAAe,CAAC;KAC/B,CACJ,CAAC;CACH,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,mBAAmB,KAAK,YAAY,CAAC;AAC1E,MAAM,MAAM,qBAAqB,GAAG,CAClC,IAAI,EAAE,mBAAmB,GAAG;IAC1B,QAAQ,EAAE,GAAG,CAAC;CACf,KACE,YAAY,CAAC;AAElB,qBAAa,aAAa;IACxB,OAAO,CAAC,YAAY,CAAC,CAAS;IAC9B,OAAO,CAAC,OAAO,CAAC,CAAuB;IAEvC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAuDrD,GAAG,IAAI,MAAM;CAMd"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { SchemeManager, SchemeServiceOptions } from './scheme.manager';
|
|
2
|
-
import { VariantManager } from './variant.manager';
|
|
3
|
-
import { Variant } from './variant';
|
|
4
|
-
type ThemeOptions = Omit<SchemeServiceOptions, 'palettes' | 'sourcesColorHex'> & {
|
|
5
|
-
sourceColorHex: string;
|
|
6
|
-
};
|
|
7
|
-
export declare class ThemeApi {
|
|
8
|
-
private readonly schemeManager;
|
|
9
|
-
private readonly variantManager;
|
|
10
|
-
constructor({ schemeManager, variantManager, }: {
|
|
11
|
-
schemeManager: SchemeManager;
|
|
12
|
-
variantManager: VariantManager;
|
|
13
|
-
});
|
|
14
|
-
get sourceColorHex(): import('../material-color-utilities/htc').Hct;
|
|
15
|
-
create(options: ThemeOptions & {
|
|
16
|
-
variant: Variant;
|
|
17
|
-
}): void;
|
|
18
|
-
update(options: Partial<ThemeOptions> & {
|
|
19
|
-
variant?: Variant;
|
|
20
|
-
}): void;
|
|
21
|
-
addCustomPalette(key: string, colorHex: string): void;
|
|
22
|
-
}
|
|
23
|
-
export {};
|
|
24
|
-
//# sourceMappingURL=theme.api.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme.api.d.ts","sourceRoot":"","sources":["../../src/theme/theme.api.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,KAAK,YAAY,GAAG,IAAI,CACtB,oBAAoB,EACpB,UAAU,GAAG,iBAAiB,CAC/B,GAAG;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,CAAC;AAQ/B,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgB;IAC9C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;gBAEpC,EACV,aAAa,EACb,cAAc,GACf,EAAE;QACD,aAAa,EAAE,aAAa,CAAC;QAC7B,cAAc,EAAE,cAAc,CAAC;KAChC;IA4BD,IAAI,cAAc,kDAEjB;IAED,MAAM,CAAC,OAAO,EAAE,YAAY,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE;IAQnD,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;IAQ7D,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAO/C"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme.module.d.ts","sourceRoot":"","sources":["../../src/theme/theme.module.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAK1C,eAAO,MAAM,WAAW,EAAE,MAIzB,CAAC"}
|
package/dist/theme/variant.d.ts
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { TonalPalette } from '@material/material-color-utilities';
|
|
2
|
-
import { Hct } from '../material-color-utilities/htc';
|
|
3
|
-
import { AddColors } from '../color';
|
|
4
|
-
export declare const getPiecewiseHue: (sourceColorHct: Hct, hueBreakpoints: number[], hues: number[]) => number;
|
|
5
|
-
export declare const getRotatedHue: (sourceColorHct: Hct, hueBreakpoints: number[], rotations: number[]) => number;
|
|
6
|
-
export declare class Variant {
|
|
7
|
-
palettes: Record<string, (args: {
|
|
8
|
-
sourceColorHct: Hct;
|
|
9
|
-
isDark: boolean;
|
|
10
|
-
}) => TonalPalette>;
|
|
11
|
-
name: string;
|
|
12
|
-
customPalettes?: ((args: {
|
|
13
|
-
isDark: boolean;
|
|
14
|
-
sourceColorHct: Hct;
|
|
15
|
-
colorHct: Hct;
|
|
16
|
-
}) => TonalPalette) | undefined;
|
|
17
|
-
/** TODO
|
|
18
|
-
* Defines color modifications through variation.
|
|
19
|
-
* Allows customization of specific colors in the theme.
|
|
20
|
-
*/
|
|
21
|
-
colors?: AddColors['colors'];
|
|
22
|
-
constructor(palettes: Record<string, (args: {
|
|
23
|
-
sourceColorHct: Hct;
|
|
24
|
-
isDark: boolean;
|
|
25
|
-
}) => TonalPalette> | undefined, name: string, customPalettes?: ((args: {
|
|
26
|
-
isDark: boolean;
|
|
27
|
-
sourceColorHct: Hct;
|
|
28
|
-
colorHct: Hct;
|
|
29
|
-
}) => TonalPalette) | undefined,
|
|
30
|
-
/** TODO
|
|
31
|
-
* Defines color modifications through variation.
|
|
32
|
-
* Allows customization of specific colors in the theme.
|
|
33
|
-
*/
|
|
34
|
-
colors?: AddColors['colors']);
|
|
35
|
-
}
|
|
36
|
-
//# sourceMappingURL=variant.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../src/theme/variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,YAAY,EACb,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,eAAO,MAAM,eAAe,GAC1B,gBAAgB,GAAG,EACnB,gBAAgB,MAAM,EAAE,EACxB,MAAM,MAAM,EAAE,KACb,MASF,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,gBAAgB,GAAG,EACnB,gBAAgB,MAAM,EAAE,EACxB,WAAW,MAAM,EAAE,KAClB,MAMF,CAAC;AAEF,qBAAa,OAAO;IAET,QAAQ,EAAE,MAAM,CACrB,MAAM,EACN,CAAC,IAAI,EAAE;QAAE,cAAc,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,YAAY,CACjE;IACM,IAAI,EAAE,MAAM;IACZ,cAAc,CAAC,GAAE,CAAC,IAAI,EAAE;QAC7B,MAAM,EAAE,OAAO,CAAC;QAChB,cAAc,EAAE,GAAG,CAAC;QACpB,QAAQ,EAAE,GAAG,CAAC;KACf,KAAK,YAAY;IAClB;;;OAGG;IACI,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC;gBAd5B,QAAQ,EAAE,MAAM,CACrB,MAAM,EACN,CAAC,IAAI,EAAE;QAAE,cAAc,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,YAAY,CACjE,YAAK,EACC,IAAI,EAAE,MAAM,EACZ,cAAc,CAAC,GAAE,CAAC,IAAI,EAAE;QAC7B,MAAM,EAAE,OAAO,CAAC;QAChB,cAAc,EAAE,GAAG,CAAC;QACpB,QAAQ,EAAE,GAAG,CAAC;KACf,KAAK,YAAY,aAAA;IAClB;;;OAGG;IACI,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC;CAEtC"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { SchemeManager } from './scheme.manager';
|
|
2
|
-
import { Variant } from './variant';
|
|
3
|
-
export declare class VariantManager {
|
|
4
|
-
customPalettes: Record<string, string>;
|
|
5
|
-
private variantEntity?;
|
|
6
|
-
private readonly schemeManager;
|
|
7
|
-
constructor({ schemeManager }: {
|
|
8
|
-
schemeManager: SchemeManager;
|
|
9
|
-
});
|
|
10
|
-
addCustomPalette(key: string, colorHex: string): void;
|
|
11
|
-
set(variantEntity: Variant): void;
|
|
12
|
-
private update;
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=variant.manager.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"variant.manager.d.ts","sourceRoot":"","sources":["../../src/theme/variant.manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,qBAAa,cAAc;IAClB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACnD,OAAO,CAAC,aAAa,CAAC,CAAU;IAEhC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgB;gBAElC,EAAE,aAAa,EAAE,EAAE;QAAE,aAAa,EAAE,aAAa,CAAA;KAAE;IAI/D,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAK9C,GAAG,CAAC,aAAa,EAAE,OAAO;IAK1B,OAAO,CAAC,MAAM;CA8Bf"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"expressive.variant.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/expressive.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,OAAO,EAAE,MAAM,YAAY,CAAC;AAoBrE,eAAO,MAAM,iBAAiB,EAAE,OA4D/B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fidelity.variant.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/fidelity.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrE,eAAO,MAAM,eAAe,EAAE,OAkC7B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/index.ts"],"names":[],"mappings":"AAMA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAElC,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"neutral.variant.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/neutral.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,OAAO,EAAE,MAAM,YAAY,CAAC;AAIrE,eAAO,MAAM,cAAc,EAAE,OAwC5B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tonal-spot.variant.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/tonal-spot.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrE,eAAO,MAAM,gBAAgB,EAAE,OA+B9B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"vibrant.variant.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/vibrant.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,OAAO,EAAE,MAAM,YAAY,CAAC;AAiBrE,eAAO,MAAM,cAAc,EAAE,OAsD5B,CAAC"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { hexFromArgb } from '@material/material-color-utilities';
|
|
2
|
-
import { SchemeManager } from '../theme';
|
|
3
|
-
import { DynamicColor, FromPaletteOptions } from '../material-color-utilities';
|
|
4
|
-
import { ColorManager } from './color.manager';
|
|
5
|
-
|
|
6
|
-
export type ColorOptions = (
|
|
7
|
-
| (FromPaletteOptions & { alias?: string })
|
|
8
|
-
| (Partial<FromPaletteOptions> & {
|
|
9
|
-
alias: string;
|
|
10
|
-
palette?: never;
|
|
11
|
-
})
|
|
12
|
-
) & { name: string };
|
|
13
|
-
|
|
14
|
-
function argbToRgb(argb: number): { r: number; g: number; b: number } {
|
|
15
|
-
return {
|
|
16
|
-
r: (argb >> 16) & 0xff,
|
|
17
|
-
g: (argb >> 8) & 0xff,
|
|
18
|
-
b: argb & 0xff,
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export class ConfigurableColor {
|
|
23
|
-
private dynamicColor: DynamicColor | null = null;
|
|
24
|
-
|
|
25
|
-
constructor(
|
|
26
|
-
private option: ColorOptions,
|
|
27
|
-
private schemeService: SchemeManager,
|
|
28
|
-
private colorService: ColorManager,
|
|
29
|
-
) {}
|
|
30
|
-
|
|
31
|
-
update(args: Partial<ColorOptions & { name: string }>) {
|
|
32
|
-
this.dynamicColor = null;
|
|
33
|
-
this.option = { ...this.option, ...args };
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
getHex(): string {
|
|
37
|
-
return hexFromArgb(this.getArgb());
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
getArgb() {
|
|
41
|
-
return this.getMaterialColor().getArgb(this.schemeService.get());
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
getRgb() {
|
|
45
|
-
return argbToRgb(this.getArgb());
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
getName(): string {
|
|
49
|
-
return this.option.name.replace(/([A-Z])/g, '_$1').toLowerCase();
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
getMaterialColor(): DynamicColor {
|
|
53
|
-
if ('alias' in this.option) {
|
|
54
|
-
if (!this.option.alias) {
|
|
55
|
-
throw new Error('Alias option must be defined');
|
|
56
|
-
}
|
|
57
|
-
return this.colorService.get(this.option.alias).getMaterialColor();
|
|
58
|
-
}
|
|
59
|
-
if (!this.dynamicColor) {
|
|
60
|
-
this.dynamicColor = DynamicColor.fromPalette({
|
|
61
|
-
...this.option,
|
|
62
|
-
name: this.getName(),
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
return this.dynamicColor;
|
|
66
|
-
}
|
|
67
|
-
}
|
package/src/theme/index.ts
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { Scheme, SchemeOptions } from './scheme';
|
|
2
|
-
import { argbFromHex, TonalPalette } from '@material/material-color-utilities';
|
|
3
|
-
import { Hct } from '../material-color-utilities/htc';
|
|
4
|
-
|
|
5
|
-
export type SchemeServiceOptions = Omit<
|
|
6
|
-
SchemeOptions,
|
|
7
|
-
'palettes' | 'sourceColorArgb'
|
|
8
|
-
> & {
|
|
9
|
-
sourcesColorHex: Record<string, string> & { primary?: string };
|
|
10
|
-
palettes: Record<
|
|
11
|
-
string,
|
|
12
|
-
| {
|
|
13
|
-
sourceColorkey: string;
|
|
14
|
-
tonalPalette: CustomPaletteFunction;
|
|
15
|
-
}
|
|
16
|
-
| {
|
|
17
|
-
sourceColorkey?: never;
|
|
18
|
-
tonalPalette: PaletteFunction;
|
|
19
|
-
}
|
|
20
|
-
>;
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
type PaletteFunctionArgs = {
|
|
24
|
-
isDark: boolean;
|
|
25
|
-
sourceColorHct: Hct;
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export type PaletteFunction = (args: PaletteFunctionArgs) => TonalPalette;
|
|
29
|
-
export type CustomPaletteFunction = (
|
|
30
|
-
args: PaletteFunctionArgs & {
|
|
31
|
-
colorHct: Hct;
|
|
32
|
-
},
|
|
33
|
-
) => TonalPalette;
|
|
34
|
-
|
|
35
|
-
export class SchemeManager {
|
|
36
|
-
private schemeEntity?: Scheme;
|
|
37
|
-
private options?: SchemeServiceOptions;
|
|
38
|
-
|
|
39
|
-
createOrUpdate(options: Partial<SchemeServiceOptions>) {
|
|
40
|
-
this.options = {
|
|
41
|
-
...this.options,
|
|
42
|
-
...options,
|
|
43
|
-
sourcesColorHex: {
|
|
44
|
-
...this.options?.sourcesColorHex,
|
|
45
|
-
...options.sourcesColorHex,
|
|
46
|
-
},
|
|
47
|
-
palettes: {
|
|
48
|
-
...this.options?.palettes,
|
|
49
|
-
...options.palettes,
|
|
50
|
-
},
|
|
51
|
-
} as SchemeServiceOptions;
|
|
52
|
-
const palettes = new Map<string, TonalPalette>();
|
|
53
|
-
|
|
54
|
-
if (!this.options.sourcesColorHex.primary) {
|
|
55
|
-
throw new Error('Primary source color is not set');
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const sourceColorArgb = argbFromHex(this.options.sourcesColorHex.primary);
|
|
59
|
-
const sourceColorHct: Hct = Hct.fromInt(sourceColorArgb);
|
|
60
|
-
|
|
61
|
-
if (!this.options.palettes) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
for (const [
|
|
65
|
-
key,
|
|
66
|
-
{ sourceColorkey, tonalPalette: paletteFunction },
|
|
67
|
-
] of Object.entries(this.options.palettes)) {
|
|
68
|
-
let palette: TonalPalette;
|
|
69
|
-
if (typeof sourceColorkey != 'string') {
|
|
70
|
-
palette = paletteFunction({
|
|
71
|
-
sourceColorHct: sourceColorHct,
|
|
72
|
-
isDark: options.isDark ?? false,
|
|
73
|
-
});
|
|
74
|
-
} else {
|
|
75
|
-
const sourceColorArgb = argbFromHex(
|
|
76
|
-
this.options.sourcesColorHex[sourceColorkey],
|
|
77
|
-
);
|
|
78
|
-
const colorHct: Hct = Hct.fromInt(sourceColorArgb);
|
|
79
|
-
palette = paletteFunction({
|
|
80
|
-
sourceColorHct: sourceColorHct,
|
|
81
|
-
colorHct: colorHct,
|
|
82
|
-
isDark: options.isDark ?? false,
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
palettes.set(key, palette);
|
|
86
|
-
}
|
|
87
|
-
this.schemeEntity = new Scheme({
|
|
88
|
-
...this.options,
|
|
89
|
-
palettes: palettes,
|
|
90
|
-
sourceColorArgb: sourceColorArgb,
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
get(): Scheme {
|
|
95
|
-
if (!this.schemeEntity) {
|
|
96
|
-
throw new Error('Scheme is not created');
|
|
97
|
-
}
|
|
98
|
-
return this.schemeEntity;
|
|
99
|
-
}
|
|
100
|
-
}
|
package/src/theme/scheme.ts
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { TonalPalette } from '@material/material-color-utilities';
|
|
2
|
-
import { Hct } from '../material-color-utilities/htc';
|
|
3
|
-
import { Variant } from './variant';
|
|
4
|
-
|
|
5
|
-
export interface SchemeOptions {
|
|
6
|
-
sourceColorArgb: number;
|
|
7
|
-
contrastLevel: number;
|
|
8
|
-
isDark: boolean;
|
|
9
|
-
palettes: Map<string, TonalPalette>;
|
|
10
|
-
variant: Variant;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export class Scheme {
|
|
14
|
-
constructor(readonly options: SchemeOptions) {}
|
|
15
|
-
|
|
16
|
-
get variant():
|
|
17
|
-
| 'expressive'
|
|
18
|
-
| 'neutral'
|
|
19
|
-
| 'tonalSpot'
|
|
20
|
-
| 'vibrant'
|
|
21
|
-
| 'fidelity'
|
|
22
|
-
| string {
|
|
23
|
-
return this.options.variant.name;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
get contrastLevel() {
|
|
27
|
-
if (!this.options) {
|
|
28
|
-
throw new Error('Scheme options is not set');
|
|
29
|
-
}
|
|
30
|
-
return this.options.contrastLevel;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
get isDark() {
|
|
34
|
-
if (!this.options) {
|
|
35
|
-
throw new Error('Scheme options is not set');
|
|
36
|
-
}
|
|
37
|
-
return this.options.isDark;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
get sourceColorHct() {
|
|
41
|
-
if (!this.options) {
|
|
42
|
-
throw new Error('Scheme options is not set');
|
|
43
|
-
}
|
|
44
|
-
return Hct.fromInt(this.options.sourceColorArgb);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
getPalette(
|
|
48
|
-
key:
|
|
49
|
-
| 'primary'
|
|
50
|
-
| 'secondary'
|
|
51
|
-
| 'tertiary'
|
|
52
|
-
| 'neutral'
|
|
53
|
-
| 'neutralVariant'
|
|
54
|
-
| 'error'
|
|
55
|
-
| string,
|
|
56
|
-
): TonalPalette {
|
|
57
|
-
if (!this.options) {
|
|
58
|
-
throw new Error('Scheme options is not set');
|
|
59
|
-
}
|
|
60
|
-
const palette = this.options.palettes.get(key);
|
|
61
|
-
if (!palette) {
|
|
62
|
-
throw new Error(`Palette ${key} not found`);
|
|
63
|
-
}
|
|
64
|
-
return palette;
|
|
65
|
-
}
|
|
66
|
-
}
|
package/src/theme/theme.api.ts
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import { DynamicColor } from '@material/material-color-utilities';
|
|
2
|
-
import { SchemeManager, SchemeServiceOptions } from './scheme.manager';
|
|
3
|
-
import { VariantManager } from './variant.manager';
|
|
4
|
-
import { Variant } from './variant';
|
|
5
|
-
|
|
6
|
-
type ThemeOptions = Omit<
|
|
7
|
-
SchemeServiceOptions,
|
|
8
|
-
'palettes' | 'sourcesColorHex'
|
|
9
|
-
> & { sourceColorHex: string };
|
|
10
|
-
|
|
11
|
-
const colorPaletteKeyColor = DynamicColor.fromPalette({
|
|
12
|
-
name: 'primary_palette_key_color',
|
|
13
|
-
palette: (s) => s.primaryPalette,
|
|
14
|
-
tone: (s) => s.primaryPalette.keyColor.tone,
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
export class ThemeApi {
|
|
18
|
-
private readonly schemeManager: SchemeManager;
|
|
19
|
-
private readonly variantManager: VariantManager;
|
|
20
|
-
|
|
21
|
-
constructor({
|
|
22
|
-
schemeManager,
|
|
23
|
-
variantManager,
|
|
24
|
-
}: {
|
|
25
|
-
schemeManager: SchemeManager;
|
|
26
|
-
variantManager: VariantManager;
|
|
27
|
-
}) {
|
|
28
|
-
this.schemeManager = schemeManager;
|
|
29
|
-
this.variantManager = variantManager;
|
|
30
|
-
|
|
31
|
-
// this.addPalette({key: "primary", addDefaultColors: true})
|
|
32
|
-
// this.addPalette({key: "secondary", addDefaultColors: true})
|
|
33
|
-
// this.addPalette({key: "tertiary", addDefaultColors: true})
|
|
34
|
-
// this.addPalette({key: "error", palette: TonalPalette.fromHueAndChroma(25.0, 84.0)})
|
|
35
|
-
// this.addPalette({key: "neutral"})
|
|
36
|
-
// this.addPalette({key: "neutralVariant"})
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// addPalette({key, palette, addDefaultColors}: {key: string; palette: TonalPalette; addDefaultColors: boolean}) {
|
|
40
|
-
// this.themeOptions.palettes.set(key, palette);
|
|
41
|
-
// if (addDefaultColors){
|
|
42
|
-
// this.colorService.addPalette(key)
|
|
43
|
-
// }
|
|
44
|
-
// }
|
|
45
|
-
|
|
46
|
-
// create(args: ThemeOptions): SchemeService {
|
|
47
|
-
// return new SchemeService(args, this.colorService)
|
|
48
|
-
// }
|
|
49
|
-
//
|
|
50
|
-
// update(options: Partial<ThemeOptions>): SchemeService {
|
|
51
|
-
// Object.assign(this.themeOptions, options);
|
|
52
|
-
// return this.theme();
|
|
53
|
-
// }
|
|
54
|
-
|
|
55
|
-
get sourceColorHex() {
|
|
56
|
-
return this.schemeManager.get().sourceColorHct;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
create(options: ThemeOptions & { variant: Variant }) {
|
|
60
|
-
this.schemeManager.createOrUpdate({
|
|
61
|
-
...options,
|
|
62
|
-
sourcesColorHex: { primary: options.sourceColorHex },
|
|
63
|
-
});
|
|
64
|
-
this.variantManager.set(options.variant);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
update(options: Partial<ThemeOptions> & { variant?: Variant }) {
|
|
68
|
-
const themeOptions: Partial<SchemeServiceOptions> = { ...options };
|
|
69
|
-
if (options.sourceColorHex)
|
|
70
|
-
themeOptions.sourcesColorHex = { primary: options.sourceColorHex };
|
|
71
|
-
this.schemeManager.createOrUpdate(themeOptions);
|
|
72
|
-
if (options.variant) this.variantManager.set(options.variant);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
addCustomPalette(key: string, colorHex: string) {
|
|
76
|
-
this.variantManager.addCustomPalette(key, colorHex);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// theme(): SchemeService {
|
|
80
|
-
// return new SchemeService(this.themeOptions, this.colorService)
|
|
81
|
-
// }
|
|
82
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { asClass } from 'awilix';
|
|
2
|
-
import { Module } from '../app.container';
|
|
3
|
-
import { SchemeManager } from './scheme.manager';
|
|
4
|
-
import { VariantManager } from './variant.manager';
|
|
5
|
-
import { ThemeApi } from './theme.api';
|
|
6
|
-
|
|
7
|
-
export const ThemeModule: Module = {
|
|
8
|
-
schemeManager: asClass(SchemeManager).singleton(),
|
|
9
|
-
variantManager: asClass(VariantManager).singleton(),
|
|
10
|
-
themeApi: asClass(ThemeApi).singleton(),
|
|
11
|
-
};
|
|
@@ -1,58 +0,0 @@
|
|
|
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
|
-
}
|
package/src/theme/variant.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
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
|
-
}
|