@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.
Files changed (144) hide show
  1. package/CHANGELOG.md +23 -2
  2. package/dist/API.d.ts +7 -4
  3. package/dist/API.d.ts.map +1 -1
  4. package/dist/app.container.d.ts +1 -2
  5. package/dist/app.container.d.ts.map +1 -1
  6. package/dist/bin.cjs +1 -1
  7. package/dist/bin.js +1 -1
  8. package/dist/browser.cjs +23 -18
  9. package/dist/browser.js +34 -29
  10. package/dist/color/color.api.d.ts +16 -31
  11. package/dist/color/color.api.d.ts.map +1 -1
  12. package/dist/color/color.d.ts +100 -0
  13. package/dist/color/color.d.ts.map +1 -0
  14. package/dist/color/color.manager.d.ts +9 -18
  15. package/dist/color/color.manager.d.ts.map +1 -1
  16. package/dist/color/color.utils.d.ts +14 -3
  17. package/dist/color/color.utils.d.ts.map +1 -1
  18. package/dist/color/default-color.d.ts +5 -1
  19. package/dist/color/default-color.d.ts.map +1 -1
  20. package/dist/color/index.d.ts +1 -1
  21. package/dist/color/index.d.ts.map +1 -1
  22. package/dist/config/config.interface.d.ts +4 -4
  23. package/dist/config/config.interface.d.ts.map +1 -1
  24. package/dist/context/context.d.ts +41 -0
  25. package/dist/context/context.d.ts.map +1 -0
  26. package/dist/context/context.module.d.ts +3 -0
  27. package/dist/context/context.module.d.ts.map +1 -0
  28. package/dist/context/index.d.ts +3 -0
  29. package/dist/context/index.d.ts.map +1 -0
  30. package/dist/font.plugin-5Xpo-ntw.js +228 -0
  31. package/dist/font.plugin-FPU_gL1Y.cjs +227 -0
  32. package/dist/index.d.ts +6 -4
  33. package/dist/index.d.ts.map +1 -1
  34. package/dist/{load-from-path-Bo1kCfh9.js → load-from-path-CBnO8ESw.js} +1 -1
  35. package/dist/{load-from-path-DoZnR1-p.cjs → load-from-path-kuofMGN3.cjs} +2 -2
  36. package/dist/loader/loader.d.ts +1 -1
  37. package/dist/loader/loader.d.ts.map +1 -1
  38. package/dist/loader-BzsrGBu-.cjs +3905 -0
  39. package/dist/loader-CoayTlSl.js +3906 -0
  40. package/dist/material-color-utilities/dynamic_color.d.ts +0 -22
  41. package/dist/material-color-utilities/dynamic_color.d.ts.map +1 -1
  42. package/dist/material-color-utilities/toneDeltaPair.d.ts +8 -8
  43. package/dist/material-color-utilities/toneDeltaPair.d.ts.map +1 -1
  44. package/dist/node.cjs +24 -19
  45. package/dist/node.js +36 -31
  46. package/dist/palette/index.d.ts +4 -0
  47. package/dist/palette/index.d.ts.map +1 -0
  48. package/dist/palette/palette.api.d.ts +13 -0
  49. package/dist/palette/palette.api.d.ts.map +1 -0
  50. package/dist/palette/palette.d.ts +33 -0
  51. package/dist/palette/palette.d.ts.map +1 -0
  52. package/dist/palette/palette.manager.d.ts +20 -0
  53. package/dist/palette/palette.manager.d.ts.map +1 -0
  54. package/dist/palette/palette.module.d.ts +3 -0
  55. package/dist/palette/palette.module.d.ts.map +1 -0
  56. package/dist/plugins/font/font.plugin.d.ts +1 -1
  57. package/dist/plugins/font/font.plugin.d.ts.map +1 -1
  58. package/dist/variant/index.d.ts +3 -0
  59. package/dist/variant/index.d.ts.map +1 -0
  60. package/dist/variant/variant.d.ts +31 -0
  61. package/dist/variant/variant.d.ts.map +1 -0
  62. package/dist/variant/variants/expressive.variant.d.ts +2 -0
  63. package/dist/variant/variants/expressive.variant.d.ts.map +1 -0
  64. package/dist/{theme → variant}/variants/index.d.ts +1 -1
  65. package/dist/variant/variants/index.d.ts.map +1 -0
  66. package/dist/variant/variants/neutral.variant.d.ts.map +1 -0
  67. package/dist/variant/variants/tonal-spot.variant.d.ts.map +1 -0
  68. package/dist/variant/variants/udixio.variant.d.ts +3 -0
  69. package/dist/variant/variants/udixio.variant.d.ts.map +1 -0
  70. package/dist/variant/variants/vibrant.variant.d.ts.map +1 -0
  71. package/package.json +1 -1
  72. package/src/API.ts +12 -5
  73. package/src/app.container.ts +22 -11
  74. package/src/bootstrap.ts +1 -1
  75. package/src/color/color.api.ts +189 -47
  76. package/src/color/color.manager.ts +34 -189
  77. package/src/color/color.ts +295 -0
  78. package/src/color/color.utils.ts +48 -3
  79. package/src/color/default-color.ts +390 -425
  80. package/src/color/index.ts +1 -1
  81. package/src/config/config.interface.ts +5 -4
  82. package/src/context/context.module.ts +7 -0
  83. package/src/context/context.ts +169 -0
  84. package/src/context/index.ts +2 -0
  85. package/src/index.ts +6 -4
  86. package/src/loader/loader.ts +11 -24
  87. package/src/material-color-utilities/dynamic_color.ts +25 -34
  88. package/src/material-color-utilities/toneDeltaPair.ts +44 -41
  89. package/src/palette/index.ts +3 -0
  90. package/src/palette/palette.api.ts +43 -0
  91. package/src/palette/palette.manager.ts +74 -0
  92. package/src/palette/palette.module.ts +9 -0
  93. package/src/palette/palette.ts +206 -0
  94. package/src/plugins/font/font.plugin.ts +1 -1
  95. package/src/variant/index.ts +2 -0
  96. package/src/variant/variant.ts +84 -0
  97. package/src/{theme → variant}/variants/expressive.variant.ts +33 -29
  98. package/src/{theme → variant}/variants/index.ts +2 -2
  99. package/src/variant/variants/neutral.variant.ts +47 -0
  100. package/src/variant/variants/tonal-spot.variant.ts +37 -0
  101. package/src/variant/variants/udixio.variant.ts +846 -0
  102. package/src/{theme → variant}/variants/vibrant.variant.ts +23 -22
  103. package/dist/color/configurable-color.d.ts +0 -31
  104. package/dist/color/configurable-color.d.ts.map +0 -1
  105. package/dist/define-config-BasMdCqD.js +0 -430
  106. package/dist/define-config-CKSsLMnc.cjs +0 -429
  107. package/dist/loader-C8_TyOuS.js +0 -2698
  108. package/dist/loader-R7hccp8_.cjs +0 -2697
  109. package/dist/theme/index.d.ts +0 -8
  110. package/dist/theme/index.d.ts.map +0 -1
  111. package/dist/theme/scheme.d.ts +0 -20
  112. package/dist/theme/scheme.d.ts.map +0 -1
  113. package/dist/theme/scheme.manager.d.ts +0 -31
  114. package/dist/theme/scheme.manager.d.ts.map +0 -1
  115. package/dist/theme/theme.api.d.ts +0 -24
  116. package/dist/theme/theme.api.d.ts.map +0 -1
  117. package/dist/theme/theme.module.d.ts +0 -3
  118. package/dist/theme/theme.module.d.ts.map +0 -1
  119. package/dist/theme/variant.d.ts +0 -36
  120. package/dist/theme/variant.d.ts.map +0 -1
  121. package/dist/theme/variant.manager.d.ts +0 -14
  122. package/dist/theme/variant.manager.d.ts.map +0 -1
  123. package/dist/theme/variants/expressive.variant.d.ts +0 -3
  124. package/dist/theme/variants/expressive.variant.d.ts.map +0 -1
  125. package/dist/theme/variants/fidelity.variant.d.ts +0 -3
  126. package/dist/theme/variants/fidelity.variant.d.ts.map +0 -1
  127. package/dist/theme/variants/index.d.ts.map +0 -1
  128. package/dist/theme/variants/neutral.variant.d.ts.map +0 -1
  129. package/dist/theme/variants/tonal-spot.variant.d.ts.map +0 -1
  130. package/dist/theme/variants/vibrant.variant.d.ts.map +0 -1
  131. package/src/color/configurable-color.ts +0 -67
  132. package/src/theme/index.ts +0 -7
  133. package/src/theme/scheme.manager.ts +0 -100
  134. package/src/theme/scheme.ts +0 -66
  135. package/src/theme/theme.api.ts +0 -82
  136. package/src/theme/theme.module.ts +0 -11
  137. package/src/theme/variant.manager.ts +0 -58
  138. package/src/theme/variant.ts +0 -53
  139. package/src/theme/variants/fidelity.variant.ts +0 -38
  140. package/src/theme/variants/neutral.variant.ts +0 -45
  141. package/src/theme/variants/tonal-spot.variant.ts +0 -35
  142. /package/dist/{theme → variant}/variants/neutral.variant.d.ts +0 -0
  143. /package/dist/{theme → variant}/variants/tonal-spot.variant.d.ts +0 -0
  144. /package/dist/{theme → variant}/variants/vibrant.variant.d.ts +0 -0
@@ -1,8 +0,0 @@
1
- export * from './theme.module';
2
- export * from './variants';
3
- export * from './scheme.manager';
4
- export * from './scheme';
5
- export * from './theme.api';
6
- export * from './variant';
7
- export * from './variant.manager';
8
- //# sourceMappingURL=index.d.ts.map
@@ -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"}
@@ -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,3 +0,0 @@
1
- import { Module } from '../app.container';
2
- export declare const ThemeModule: Module;
3
- //# sourceMappingURL=theme.module.d.ts.map
@@ -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"}
@@ -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,3 +0,0 @@
1
- import { Variant } from '../variant';
2
- export declare const expressiveVariant: Variant;
3
- //# sourceMappingURL=expressive.variant.d.ts.map
@@ -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,3 +0,0 @@
1
- import { Variant } from '../variant';
2
- export declare const fidelityVariant: Variant;
3
- //# sourceMappingURL=fidelity.variant.d.ts.map
@@ -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
- }
@@ -1,7 +0,0 @@
1
- export * from './theme.module';
2
- export * from './variants';
3
- export * from './scheme.manager';
4
- export * from './scheme';
5
- export * from './theme.api';
6
- export * from './variant';
7
- export * from './variant.manager';
@@ -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
- }
@@ -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
- }
@@ -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
- }
@@ -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
- }