hudini 0.17.2 → 0.18.1
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/dist/components/card/card.d.ts +34 -9
- package/dist/components/card/card.d.ts.map +1 -1
- package/dist/components/card/card.js +118 -49
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/card/card.spec.js +28 -1
- package/dist/components/card/card.spec.js.map +1 -1
- package/dist/components/circular-progress/circular-progress.d.ts +4 -4
- package/dist/components/circular-progress/circular-progress.d.ts.map +1 -1
- package/dist/components/circular-progress/circular-progress.js +9 -8
- package/dist/components/circular-progress/circular-progress.js.map +1 -1
- package/dist/components/circular-progress/circular-progress.spec.js +4 -4
- package/dist/components/circular-progress/circular-progress.spec.js.map +1 -1
- package/dist/components/container-interactive/container-interactive.d.ts +65 -0
- package/dist/components/container-interactive/container-interactive.d.ts.map +1 -0
- package/dist/components/container-interactive/container-interactive.js +99 -0
- package/dist/components/container-interactive/container-interactive.js.map +1 -0
- package/dist/components/container-interactive/index.d.ts +2 -0
- package/dist/components/container-interactive/index.d.ts.map +1 -0
- package/dist/components/container-interactive/index.js +2 -0
- package/dist/components/container-interactive/index.js.map +1 -0
- package/dist/components/flat-icon-button/flat-icon-button.d.ts +3 -0
- package/dist/components/flat-icon-button/flat-icon-button.d.ts.map +1 -1
- package/dist/components/flat-icon-button/flat-icon-button.js +111 -20
- package/dist/components/flat-icon-button/flat-icon-button.js.map +1 -1
- package/dist/components/flat-section-header/flat-section-header.d.ts +143 -0
- package/dist/components/flat-section-header/flat-section-header.d.ts.map +1 -0
- package/dist/components/flat-section-header/flat-section-header.js +275 -0
- package/dist/components/flat-section-header/flat-section-header.js.map +1 -0
- package/dist/components/flat-section-header/flat-section-header.spec.d.ts +2 -0
- package/dist/components/flat-section-header/flat-section-header.spec.d.ts.map +1 -0
- package/dist/components/flat-section-header/flat-section-header.spec.js +255 -0
- package/dist/components/flat-section-header/flat-section-header.spec.js.map +1 -0
- package/dist/components/flat-section-header/index.d.ts +2 -0
- package/dist/components/flat-section-header/index.d.ts.map +1 -0
- package/dist/components/flat-section-header/index.js +2 -0
- package/dist/components/flat-section-header/index.js.map +1 -0
- package/dist/components/flat-text-button/flat-text-button.d.ts +165 -0
- package/dist/components/flat-text-button/flat-text-button.d.ts.map +1 -0
- package/dist/components/flat-text-button/flat-text-button.js +325 -0
- package/dist/components/flat-text-button/flat-text-button.js.map +1 -0
- package/dist/components/flat-text-button/flat-text-button.spec.d.ts +2 -0
- package/dist/components/flat-text-button/flat-text-button.spec.d.ts.map +1 -0
- package/dist/components/flat-text-button/flat-text-button.spec.js +243 -0
- package/dist/components/flat-text-button/flat-text-button.spec.js.map +1 -0
- package/dist/components/flat-text-button/index.d.ts +2 -0
- package/dist/components/flat-text-button/index.d.ts.map +1 -0
- package/dist/components/flat-text-button/index.js +2 -0
- package/dist/components/flat-text-button/index.js.map +1 -0
- package/dist/components/icon-button/icon-button.d.ts +11 -3
- package/dist/components/icon-button/icon-button.d.ts.map +1 -1
- package/dist/components/icon-button/icon-button.js +126 -71
- package/dist/components/icon-button/icon-button.js.map +1 -1
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +4 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/panel/panel.d.ts +0 -1
- package/dist/components/panel/panel.d.ts.map +1 -1
- package/dist/components/panel/panel.js +7 -10
- package/dist/components/panel/panel.js.map +1 -1
- package/dist/components/section-header/section-header.d.ts +33 -39
- package/dist/components/section-header/section-header.d.ts.map +1 -1
- package/dist/components/section-header/section-header.js +124 -155
- package/dist/components/section-header/section-header.js.map +1 -1
- package/dist/components/section-header/section-header.spec.js +57 -17
- package/dist/components/section-header/section-header.spec.js.map +1 -1
- package/dist/components/text/index.d.ts +2 -0
- package/dist/components/text/index.d.ts.map +1 -0
- package/dist/components/text/index.js +2 -0
- package/dist/components/text/index.js.map +1 -0
- package/dist/components/text/text.d.ts +45 -0
- package/dist/components/text/text.d.ts.map +1 -0
- package/dist/components/text/text.js +35 -0
- package/dist/components/text/text.js.map +1 -0
- package/dist/components/text-button/text-button.d.ts +26 -23
- package/dist/components/text-button/text-button.d.ts.map +1 -1
- package/dist/components/text-button/text-button.js +114 -88
- package/dist/components/text-button/text-button.js.map +1 -1
- package/dist/components/text-button/text-button.spec.js +108 -9
- package/dist/components/text-button/text-button.spec.js.map +1 -1
- package/dist/hudini.js +4220 -467
- package/dist/hudini.min.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/loaders/index.d.ts +2 -0
- package/dist/loaders/index.d.ts.map +1 -0
- package/dist/loaders/index.js +2 -0
- package/dist/loaders/index.js.map +1 -0
- package/dist/loaders/load-fonts.d.ts +8 -0
- package/dist/loaders/load-fonts.d.ts.map +1 -0
- package/dist/loaders/load-fonts.js +41 -0
- package/dist/loaders/load-fonts.js.map +1 -0
- package/dist/test-setup.js +8 -2
- package/dist/test-setup.js.map +1 -1
- package/dist/utils/color-variants.d.ts +43 -0
- package/dist/utils/color-variants.d.ts.map +1 -0
- package/dist/utils/color-variants.js +72 -0
- package/dist/utils/color-variants.js.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/dist/utils/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/loaders/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loaders/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"load-fonts.d.ts","sourceRoot":"","sources":["../../src/loaders/load-fonts.ts"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAiCF,eAAO,MAAM,SAAS,GAAU,UAAU,gBAAgB,KAAG,OAAO,CAAC,IAAI,CAexE,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { loadFont as loadFontAwesomeForPhaser } from 'font-awesome-for-phaser';
|
|
2
|
+
const loadStylesheet = (url) => {
|
|
3
|
+
return new Promise((resolve, reject) => {
|
|
4
|
+
const existingLink = document.querySelector(`link[href="${url}"]`);
|
|
5
|
+
if (existingLink) {
|
|
6
|
+
resolve();
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
const link = document.createElement('link');
|
|
10
|
+
link.rel = 'stylesheet';
|
|
11
|
+
link.href = url;
|
|
12
|
+
link.onload = () => {
|
|
13
|
+
resolve();
|
|
14
|
+
};
|
|
15
|
+
link.onerror = () => {
|
|
16
|
+
reject(new Error(`Failed to load stylesheet: ${url}`));
|
|
17
|
+
};
|
|
18
|
+
document.head.appendChild(link);
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
const ensureBaseFontReady = async (fontFamily) => {
|
|
22
|
+
const loads = [
|
|
23
|
+
document.fonts.load(`400 16px "${fontFamily}"`, 'A'),
|
|
24
|
+
document.fonts.load(`700 16px "${fontFamily}"`, 'B'),
|
|
25
|
+
];
|
|
26
|
+
await Promise.all(loads);
|
|
27
|
+
await document['fonts'].ready;
|
|
28
|
+
};
|
|
29
|
+
export const loadFonts = async (options) => {
|
|
30
|
+
const { fontAwesomeUrl, baseFont = 'https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap', baseFontFamily = 'Bebas Neue', } = options ?? {};
|
|
31
|
+
try {
|
|
32
|
+
await loadFontAwesomeForPhaser(fontAwesomeUrl);
|
|
33
|
+
await loadStylesheet(baseFont);
|
|
34
|
+
await ensureBaseFontReady(baseFontFamily);
|
|
35
|
+
await document.fonts.ready;
|
|
36
|
+
}
|
|
37
|
+
catch (error) {
|
|
38
|
+
throw new Error(`Failed to load fonts: ${error instanceof Error ? error.message : String(error)}`);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=load-fonts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"load-fonts.js","sourceRoot":"","sources":["../../src/loaders/load-fonts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAQ/E,MAAM,cAAc,GAAG,CAAC,GAAW,EAAiB,EAAE;IACpD,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAQ,EAAE;QAC3C,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;QACnE,IAAI,YAAY,EAAE,CAAC;YACjB,OAAO,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,GAAS,EAAE;YACvB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;QACF,IAAI,CAAC,OAAO,GAAG,GAAS,EAAE;YACxB,MAAM,CAAC,IAAI,KAAK,CAAC,8BAA8B,GAAG,EAAE,CAAC,CAAC,CAAC;QACzD,CAAC,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,KAAK,EAAE,UAAkB,EAAiB,EAAE;IACtE,MAAM,KAAK,GAAG;QACZ,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,UAAU,GAAG,EAAE,GAAG,CAAC;QACpD,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,UAAU,GAAG,EAAE,GAAG,CAAC;KACrD,CAAC;IACF,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACzB,MAAO,QAA2D,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;AACpF,CAAC,CAAC;AAGF,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,EAAE,OAA0B,EAAiB,EAAE;IAC3E,MAAM,EACJ,cAAc,EACd,QAAQ,GAAG,kEAAkE,EAC7E,cAAc,GAAG,YAAY,GAC9B,GAAG,OAAO,IAAI,EAAE,CAAC;IAElB,IAAI,CAAC;QACH,MAAM,wBAAwB,CAAC,cAAc,CAAC,CAAC;QAC/C,MAAM,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC/B,MAAM,mBAAmB,CAAC,cAAc,CAAC,CAAC;QAC1C,MAAM,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;IAC7B,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,yBAAyB,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrG,CAAC;AACH,CAAC,CAAC"}
|
package/dist/test-setup.js
CHANGED
|
@@ -29,8 +29,14 @@ vi.mock('phaser', () => {
|
|
|
29
29
|
return this;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
class Text {
|
|
33
|
+
// Mock Text class for Phaser.GameObjects.Text
|
|
34
|
+
// eslint-disable-next-line no-unused-vars
|
|
35
|
+
constructor(..._args) { }
|
|
36
|
+
}
|
|
37
|
+
const GameObjects = { Container, Text };
|
|
38
|
+
const Phaser = { GameObjects, Scene };
|
|
39
|
+
return { GameObjects, Scene, Phaser, default: Phaser };
|
|
34
40
|
});
|
|
35
41
|
// Mock phaser-wind globally (after Phaser mock)
|
|
36
42
|
vi.mock('phaser-wind', () => {
|
package/dist/test-setup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"test-setup.js","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE5B,+DAA+D;AAC/D,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;IACrB,MAAM,KAAK;KAAI;IAIf,MAAM,SAAS;QACN,IAAI,GAAc,EAAE,CAAC;QACrB,CAAC,CAAS;QACV,CAAC,CAAS;QACV,KAAK,GAAG,CAAC,CAAC;QACV,MAAM,GAAG,CAAC,CAAC;QAElB,YAAY,MAAa,EAAE,CAAS,EAAE,CAAS;YAC7C,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;YACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACb,CAAC;QAED,GAAG,CAAC,KAAoC;YACtC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACzB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC;YAC3B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CAAC,KAAa,EAAE,MAAc;YACnC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,OAAO,IAAI,CAAC;QACd,CAAC;KACF;IAED,MAAM,WAAW,GAAG,EAAE,SAAS,EAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"test-setup.js","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { type ColorKey } from 'phaser-wind';
|
|
2
|
+
/**
|
|
3
|
+
* Calculates a color variant by adjusting brightness.
|
|
4
|
+
*
|
|
5
|
+
* @param color - The base color (can be a Phaser Wind token like "blue-500", a color name like "red", or a CSS color like "#3B82F6")
|
|
6
|
+
* @param tokenDiff - Amount to adjust the shade for color tokens. Positive values make it darker, negative lighter.
|
|
7
|
+
* For example: -400 for lighter (blue-500 → blue-100), +400 for darker (blue-500 → blue-900)
|
|
8
|
+
* @param colorDiff - Amount to lighten/darken CSS colors. Positive values lighten, negative values darken.
|
|
9
|
+
* Range: 0-100. For example: 90 to lighten, -90 to darken
|
|
10
|
+
* @returns The adjusted color as a number
|
|
11
|
+
*
|
|
12
|
+
* @remarks
|
|
13
|
+
* - If only a color name is provided without a shade (e.g., "red"), it automatically adds "-500" as the default shade
|
|
14
|
+
* - If a color token is provided (e.g., "blue-500"), it uses the token system to calculate variants
|
|
15
|
+
* by adjusting the shade value with tokenDiff (clamped between 100-900)
|
|
16
|
+
* - If a CSS color is provided (hex or rgb), it uses Phaser's lighten/darken methods
|
|
17
|
+
* with colorDiff (positive = lighten, negative = darken)
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```typescript
|
|
21
|
+
* // Using color name only - defaults to -500
|
|
22
|
+
* const defaultRed = getColorVariant('red', 0, 0);
|
|
23
|
+
* // Returns red-500 color value
|
|
24
|
+
*
|
|
25
|
+
* // Using color token - lighter variant
|
|
26
|
+
* const lightBlue = getColorVariant('blue-500', -400, 0);
|
|
27
|
+
* // Returns blue-100 color value
|
|
28
|
+
*
|
|
29
|
+
* // Using color token - darker variant
|
|
30
|
+
* const darkBlue = getColorVariant('blue-500', 400, 0);
|
|
31
|
+
* // Returns blue-900 color value
|
|
32
|
+
*
|
|
33
|
+
* // Using CSS color - lighter
|
|
34
|
+
* const lightCss = getColorVariant('#3B82F6', 0, 90);
|
|
35
|
+
* // Returns lightened color
|
|
36
|
+
*
|
|
37
|
+
* // Using CSS color - darker
|
|
38
|
+
* const darkCss = getColorVariant('#3B82F6', 0, -90);
|
|
39
|
+
* // Returns darkened color
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
export declare const getColorVariant: (color: ColorKey | string, tokenDiff: number, colorDiff: number) => number;
|
|
43
|
+
//# sourceMappingURL=color-variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-variants.d.ts","sourceRoot":"","sources":["../../src/utils/color-variants.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,QAAQ,EAAiB,MAAM,aAAa,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,QAAQ,GAAG,MAAM,EACxB,WAAW,MAAM,EACjB,WAAW,MAAM,KAChB,MAsCF,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import Phaser from 'phaser';
|
|
2
|
+
import { Color, palette } from 'phaser-wind';
|
|
3
|
+
/**
|
|
4
|
+
* Calculates a color variant by adjusting brightness.
|
|
5
|
+
*
|
|
6
|
+
* @param color - The base color (can be a Phaser Wind token like "blue-500", a color name like "red", or a CSS color like "#3B82F6")
|
|
7
|
+
* @param tokenDiff - Amount to adjust the shade for color tokens. Positive values make it darker, negative lighter.
|
|
8
|
+
* For example: -400 for lighter (blue-500 → blue-100), +400 for darker (blue-500 → blue-900)
|
|
9
|
+
* @param colorDiff - Amount to lighten/darken CSS colors. Positive values lighten, negative values darken.
|
|
10
|
+
* Range: 0-100. For example: 90 to lighten, -90 to darken
|
|
11
|
+
* @returns The adjusted color as a number
|
|
12
|
+
*
|
|
13
|
+
* @remarks
|
|
14
|
+
* - If only a color name is provided without a shade (e.g., "red"), it automatically adds "-500" as the default shade
|
|
15
|
+
* - If a color token is provided (e.g., "blue-500"), it uses the token system to calculate variants
|
|
16
|
+
* by adjusting the shade value with tokenDiff (clamped between 100-900)
|
|
17
|
+
* - If a CSS color is provided (hex or rgb), it uses Phaser's lighten/darken methods
|
|
18
|
+
* with colorDiff (positive = lighten, negative = darken)
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```typescript
|
|
22
|
+
* // Using color name only - defaults to -500
|
|
23
|
+
* const defaultRed = getColorVariant('red', 0, 0);
|
|
24
|
+
* // Returns red-500 color value
|
|
25
|
+
*
|
|
26
|
+
* // Using color token - lighter variant
|
|
27
|
+
* const lightBlue = getColorVariant('blue-500', -400, 0);
|
|
28
|
+
* // Returns blue-100 color value
|
|
29
|
+
*
|
|
30
|
+
* // Using color token - darker variant
|
|
31
|
+
* const darkBlue = getColorVariant('blue-500', 400, 0);
|
|
32
|
+
* // Returns blue-900 color value
|
|
33
|
+
*
|
|
34
|
+
* // Using CSS color - lighter
|
|
35
|
+
* const lightCss = getColorVariant('#3B82F6', 0, 90);
|
|
36
|
+
* // Returns lightened color
|
|
37
|
+
*
|
|
38
|
+
* // Using CSS color - darker
|
|
39
|
+
* const darkCss = getColorVariant('#3B82F6', 0, -90);
|
|
40
|
+
* // Returns darkened color
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
export const getColorVariant = (color, tokenDiff, colorDiff) => {
|
|
44
|
+
// If only the color name is provided (without shade), validate and add -500 as default
|
|
45
|
+
let normalizedColor = color;
|
|
46
|
+
if (typeof color === 'string' && !color.includes('-') && !Color.isValidColorToken(color)) {
|
|
47
|
+
// Check if the color exists in the palette
|
|
48
|
+
if (color in palette && color !== 'black' && color !== 'white') {
|
|
49
|
+
normalizedColor = `${color}-500`;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
const colorRgb = Color.rgb(normalizedColor);
|
|
53
|
+
if (Color.isValidColorToken(normalizedColor)) {
|
|
54
|
+
// Token-based calculation
|
|
55
|
+
const parts = normalizedColor.split('-');
|
|
56
|
+
const colorShade = parseInt(parts[1].toString(), 10);
|
|
57
|
+
const shadeMin = 100;
|
|
58
|
+
const shadeMax = 900;
|
|
59
|
+
const newShade = Math.max(Math.min(colorShade + tokenDiff, shadeMax), shadeMin).toString();
|
|
60
|
+
return Color.hex(`${parts[0]}-${newShade}`);
|
|
61
|
+
}
|
|
62
|
+
// CSS color calculation
|
|
63
|
+
const baseColor = Phaser.Display.Color.ValueToColor(colorRgb);
|
|
64
|
+
if (colorDiff === 0) {
|
|
65
|
+
return baseColor.color;
|
|
66
|
+
}
|
|
67
|
+
if (colorDiff > 0) {
|
|
68
|
+
return baseColor.clone().lighten(colorDiff).color;
|
|
69
|
+
}
|
|
70
|
+
return baseColor.clone().darken(Math.abs(colorDiff)).color;
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=color-variants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-variants.js","sourceRoot":"","sources":["../../src/utils/color-variants.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgC,MAAM,aAAa,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAwB,EACxB,SAAiB,EACjB,SAAiB,EACT,EAAE;IACV,uFAAuF;IACvF,IAAI,eAAe,GAAG,KAAK,CAAC;IAC5B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;QACzF,2CAA2C;QAC3C,IAAI,KAAK,IAAI,OAAO,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;YAC/D,eAAe,GAAG,GAAG,KAAK,MAAM,CAAC;QACnC,CAAC;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,eAA2B,CAAC,CAAC;IAExD,IAAI,KAAK,CAAC,iBAAiB,CAAC,eAAyB,CAAC,EAAE,CAAC;QACvD,0BAA0B;QAC1B,MAAM,KAAK,GAAqB,eAAe,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAC;QAC/E,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;QACrD,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,MAAM,QAAQ,GAAG,GAAG,CAAC;QACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAC1C,QAAQ,CACT,CAAC,QAAQ,EAAc,CAAC;QAEzB,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,wBAAwB;IACxB,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAE9D,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,SAAS,CAAC,KAAK,CAAC;IACzB,CAAC;IAED,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;QAClB,OAAO,SAAS,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;IACpD,CAAC;IAED,OAAO,SAAS,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;AAC7D,CAAC,CAAC"}
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
|
package/dist/utils/index.js
CHANGED
package/dist/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hudini",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.1",
|
|
4
4
|
"description": "🎩 Magical Phaser UI components - Reusable HUD elements for game development. Is magic, like a wizard",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"vitest": "^3.2.4"
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"phaser-wind": "0.
|
|
66
|
-
"font-awesome-for-phaser": "0.
|
|
65
|
+
"phaser-wind": "0.9.1",
|
|
66
|
+
"font-awesome-for-phaser": "0.10.0"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
69
|
"phaser": "*"
|