@uni-design-system/uni-core 0.0.27 → 0.0.28
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/cjs/core/color/color.helper.js +4 -4
- package/dist/cjs/core/color/color.helper.js.map +1 -1
- package/dist/cjs/core/color/color.records.d.ts +5 -0
- package/dist/cjs/core/color/color.records.js +31 -0
- package/dist/cjs/core/color/color.records.js.map +1 -0
- package/dist/cjs/core/color/color.types.d.ts +6 -10
- package/dist/cjs/core/color/color.types.js +0 -28
- package/dist/cjs/core/color/color.types.js.map +1 -1
- package/dist/cjs/core/color/color.utils.d.ts +5 -0
- package/dist/cjs/core/color/color.utils.js +17 -1
- package/dist/cjs/core/color/color.utils.js.map +1 -1
- package/dist/cjs/core/color/index.d.ts +1 -0
- package/dist/cjs/core/color/index.js +1 -0
- package/dist/cjs/core/color/index.js.map +1 -1
- package/dist/cjs/core/palette/index.d.ts +1 -0
- package/dist/cjs/core/palette/index.js +18 -0
- package/dist/cjs/core/palette/index.js.map +1 -0
- package/dist/cjs/core/palette/palette.model.d.ts +6 -0
- package/dist/cjs/core/palette/palette.model.js +3 -0
- package/dist/cjs/core/palette/palette.model.js.map +1 -0
- package/dist/esm/core/color/color.helper.js +1 -1
- package/dist/esm/core/color/color.helper.js.map +1 -1
- package/dist/esm/core/color/color.records.d.ts +5 -0
- package/dist/esm/core/color/color.records.js +28 -0
- package/dist/esm/core/color/color.records.js.map +1 -0
- package/dist/esm/core/color/color.types.d.ts +6 -10
- package/dist/esm/core/color/color.types.js +1 -27
- package/dist/esm/core/color/color.types.js.map +1 -1
- package/dist/esm/core/color/color.utils.d.ts +5 -0
- package/dist/esm/core/color/color.utils.js +11 -0
- package/dist/esm/core/color/color.utils.js.map +1 -1
- package/dist/esm/core/color/index.d.ts +1 -0
- package/dist/esm/core/color/index.js +1 -0
- package/dist/esm/core/color/index.js.map +1 -1
- package/dist/esm/core/palette/index.d.ts +1 -0
- package/dist/esm/core/palette/index.js +2 -0
- package/dist/esm/core/palette/index.js.map +1 -0
- package/dist/esm/core/palette/palette.model.d.ts +6 -0
- package/dist/esm/core/palette/palette.model.js +2 -0
- package/dist/esm/core/palette/palette.model.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.uniColor = exports.hslaToString = void 0;
|
|
4
|
-
const
|
|
4
|
+
const color_records_1 = require("./color.records");
|
|
5
5
|
const color_utils_1 = require("./color.utils");
|
|
6
6
|
function hslaToString({ hue, saturation, lightness, alpha = 1 }) {
|
|
7
7
|
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
|
|
8
8
|
}
|
|
9
9
|
exports.hslaToString = hslaToString;
|
|
10
10
|
function uniColor({ role, category, alpha = 1 }) {
|
|
11
|
-
const hue = (0, color_utils_1.randomRangeValue)(
|
|
12
|
-
const saturation = (0, color_utils_1.randomRangeValue)(
|
|
13
|
-
const lightness = (0, color_utils_1.randomRangeValue)(
|
|
11
|
+
const hue = (0, color_utils_1.randomRangeValue)(color_records_1.RoleHues[role]);
|
|
12
|
+
const saturation = (0, color_utils_1.randomRangeValue)(color_records_1.CategorySaturation[category]);
|
|
13
|
+
const lightness = (0, color_utils_1.randomRangeValue)(color_records_1.CategoryLightness[category]);
|
|
14
14
|
return hslaToString({ hue, saturation, lightness, alpha });
|
|
15
15
|
}
|
|
16
16
|
exports.uniColor = uniColor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.helper.js","sourceRoot":"","sources":["../../../../src/core/color/color.helper.ts"],"names":[],"mappings":";;;AACA
|
|
1
|
+
{"version":3,"file":"color.helper.js","sourceRoot":"","sources":["../../../../src/core/color/color.helper.ts"],"names":[],"mappings":";;;AACA,mDAAkF;AAClF,+CAAiD;AAEjD,SAAgB,YAAY,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,GAAG,CAAC,EAAQ;IAC1E,OAAO,QAAQ,GAAG,KAAK,UAAU,MAAM,SAAS,MAAM,KAAK,GAAG,CAAC;AACjE,CAAC;AAFD,oCAEC;AAED,SAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAY;IAC9D,MAAM,GAAG,GAAG,IAAA,8BAAgB,EAAC,wBAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,IAAA,8BAAgB,EAAC,kCAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,IAAA,8BAAgB,EAAC,iCAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEhE,OAAO,YAAY,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;AAC7D,CAAC;AAND,4BAMC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Range } from './color.model';
|
|
2
|
+
import { ColorCategory, ColorRole, UtilityColorRole } from './color.types';
|
|
3
|
+
export declare const CategorySaturation: Record<ColorCategory, Range>;
|
|
4
|
+
export declare const CategoryLightness: Record<ColorCategory, Range>;
|
|
5
|
+
export declare const RoleHues: Record<ColorRole | UtilityColorRole, Range>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.RoleHues = exports.CategoryLightness = exports.CategorySaturation = void 0;
|
|
4
|
+
exports.CategorySaturation = {
|
|
5
|
+
jewel: { low: 73, high: 83 },
|
|
6
|
+
pastel: { low: 14, high: 21 },
|
|
7
|
+
earth: { low: 36, high: 41 },
|
|
8
|
+
neutral: { low: 1, high: 10 },
|
|
9
|
+
florescent: { low: 63, high: 100 },
|
|
10
|
+
shades: { low: 0, high: 0 },
|
|
11
|
+
};
|
|
12
|
+
exports.CategoryLightness = {
|
|
13
|
+
jewel: { low: 56, high: 76 },
|
|
14
|
+
pastel: { low: 89, high: 96 },
|
|
15
|
+
earth: { low: 36, high: 77 },
|
|
16
|
+
neutral: { low: 70, high: 99 },
|
|
17
|
+
florescent: { low: 82, high: 100 },
|
|
18
|
+
shades: { low: 0, high: 100 },
|
|
19
|
+
};
|
|
20
|
+
exports.RoleHues = {
|
|
21
|
+
primary: { low: 73, high: 83, default: 0 },
|
|
22
|
+
secondary: { low: 14, high: 21, default: 0 },
|
|
23
|
+
tertiary: { low: 36, high: 41, default: 0 },
|
|
24
|
+
inverse: { low: 63, high: 100, default: 0 },
|
|
25
|
+
ghost: { low: 0, high: 0, default: 0 },
|
|
26
|
+
warn: { low: 320, high: 20, default: 0 },
|
|
27
|
+
alert: { low: 40, high: 70, default: 60 },
|
|
28
|
+
success: { low: 90, high: 150, default: 120 },
|
|
29
|
+
info: { low: 200, high: 260, default: 240 }, // blue
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=color.records.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color.records.js","sourceRoot":"","sources":["../../../../src/core/color/color.records.ts"],"names":[],"mappings":";;;AAGa,QAAA,kBAAkB,GAAiC;IAC9D,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5B,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5B,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE;IAClC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;CAC5B,CAAC;AAEW,QAAA,iBAAiB,GAAiC;IAC7D,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5B,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5B,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9B,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE;IAClC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE;CAC9B,CAAC;AAEW,QAAA,QAAQ,GAAgD;IACnE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IAC5C,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IAC3C,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC3C,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE;IACtC,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IACxC,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IACzC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;IAC7C,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,OAAO;CACrD,CAAC"}
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
import { Range } from './color.model';
|
|
2
|
-
export declare type colorStyles = 'solid' | 'transparent' | 'gradient';
|
|
3
|
-
export declare type ColorOutput = 'HEX' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA';
|
|
4
1
|
export declare type ColorScheme = 'monochromatic' | 'analogous' | 'complimentary' | 'splitComplimentary' | 'triadic';
|
|
5
2
|
export declare type ColorCategory = 'jewel' | 'pastel' | 'earth' | 'neutral' | 'florescent' | 'shades';
|
|
6
|
-
export declare
|
|
7
|
-
export declare
|
|
8
|
-
export declare type UtilityColorRole = 'warn' | 'alert' | 'success' | 'info';
|
|
9
|
-
export declare type ColorRole = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'ghost';
|
|
10
|
-
export declare const RoleHues: Record<ColorRole | UtilityColorRole, Range>;
|
|
3
|
+
export declare type colorStyles = 'solid' | 'transparent' | 'gradient';
|
|
4
|
+
export declare type ColorOutput = 'HEX' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA';
|
|
11
5
|
export declare type ColorModes = 'base' | 'hover' | 'active' | 'disabled';
|
|
12
|
-
export declare type
|
|
6
|
+
export declare type ColorRole = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'ghost';
|
|
7
|
+
export declare type ColorToken = ElementColorToken | UtilityColorToken | ContainerColorToken | ContentColorToken;
|
|
13
8
|
export declare type ElementColorToken = 'primary' | 'secondary' | 'tertiary' | 'error';
|
|
9
|
+
export declare type UtilityColorToken = 'outline' | 'shadow' | 'surface-tint' | 'transparent';
|
|
10
|
+
export declare type UtilityColorRole = 'warn' | 'alert' | 'success' | 'info';
|
|
14
11
|
export declare type ContainerColorToken = 'primary-container' | 'secondary-container' | 'tertiary-container' | 'error-container' | 'background' | 'surface' | 'surface-variant' | 'inverse-surface' | 'transparent';
|
|
15
12
|
export declare type ContentColorToken = 'on-primary' | 'on-primary-container' | 'on-secondary' | 'on-secondary-container' | 'on-tertiary' | 'on-tertiary-container' | 'on-error' | 'on-error-container' | 'on-background' | 'on-surface' | 'on-surface-variant' | 'inverse-on-surface' | 'inverse-on-surface-primary';
|
|
16
|
-
export declare type UtilityColorToken = 'outline' | 'shadow' | 'surface-tint' | 'transparent';
|
|
@@ -2,32 +2,4 @@
|
|
|
2
2
|
// https://designerup.co/blog/ui-design-choosing-color-palettes/
|
|
3
3
|
// https://designerup.co/blog/practical-guide-to-perfect-ui-color-palettes/
|
|
4
4
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
5
|
-
exports.RoleHues = exports.CategoryLightness = exports.CategorySaturation = void 0;
|
|
6
|
-
exports.CategorySaturation = {
|
|
7
|
-
jewel: { low: 73, high: 83 },
|
|
8
|
-
pastel: { low: 14, high: 21 },
|
|
9
|
-
earth: { low: 36, high: 41 },
|
|
10
|
-
neutral: { low: 1, high: 10 },
|
|
11
|
-
florescent: { low: 63, high: 100 },
|
|
12
|
-
shades: { low: 0, high: 0 },
|
|
13
|
-
};
|
|
14
|
-
exports.CategoryLightness = {
|
|
15
|
-
jewel: { low: 56, high: 76 },
|
|
16
|
-
pastel: { low: 89, high: 96 },
|
|
17
|
-
earth: { low: 36, high: 77 },
|
|
18
|
-
neutral: { low: 70, high: 99 },
|
|
19
|
-
florescent: { low: 82, high: 100 },
|
|
20
|
-
shades: { low: 0, high: 100 },
|
|
21
|
-
};
|
|
22
|
-
exports.RoleHues = {
|
|
23
|
-
primary: { low: 73, high: 83, default: 0 },
|
|
24
|
-
secondary: { low: 14, high: 21, default: 0 },
|
|
25
|
-
tertiary: { low: 36, high: 41, default: 0 },
|
|
26
|
-
inverse: { low: 63, high: 100, default: 0 },
|
|
27
|
-
ghost: { low: 0, high: 0, default: 0 },
|
|
28
|
-
warn: { low: 320, high: 20, default: 0 },
|
|
29
|
-
alert: { low: 40, high: 70, default: 60 },
|
|
30
|
-
success: { low: 90, high: 150, default: 120 },
|
|
31
|
-
info: { low: 200, high: 260, default: 240 }, // blue
|
|
32
|
-
};
|
|
33
5
|
//# sourceMappingURL=color.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../../src/core/color/color.types.ts"],"names":[],"mappings":";AAAA,gEAAgE;AAChE,2EAA2E
|
|
1
|
+
{"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../../src/core/color/color.types.ts"],"names":[],"mappings":";AAAA,gEAAgE;AAChE,2EAA2E"}
|
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
import { Range } from './color.model';
|
|
2
2
|
export declare const randomRangeValue: ({ low, high }: Range) => number;
|
|
3
|
+
export declare const cycle: (angle: number) => number;
|
|
4
|
+
export declare const getAnalogousHues: (hue: number) => number[];
|
|
5
|
+
export declare const getComplimentaryHue: (hue: number) => number;
|
|
6
|
+
export declare const getTriadicHues: (hue: number) => number[];
|
|
7
|
+
export declare const getSplitComplimentaryHues: (hue: number) => number[];
|
|
@@ -1,10 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.randomRangeValue = void 0;
|
|
3
|
+
exports.getSplitComplimentaryHues = exports.getTriadicHues = exports.getComplimentaryHue = exports.getAnalogousHues = exports.cycle = exports.randomRangeValue = void 0;
|
|
4
4
|
const randomRangeValue = ({ low, high }) => {
|
|
5
5
|
low = Math.ceil(low);
|
|
6
6
|
high = Math.floor(high);
|
|
7
7
|
return Math.floor(Math.random() * (high - low + 1)) + low;
|
|
8
8
|
};
|
|
9
9
|
exports.randomRangeValue = randomRangeValue;
|
|
10
|
+
const cycle = (angle) => {
|
|
11
|
+
if (angle > 360)
|
|
12
|
+
return angle - 360;
|
|
13
|
+
if (angle < 0)
|
|
14
|
+
return angle + 360;
|
|
15
|
+
return angle;
|
|
16
|
+
};
|
|
17
|
+
exports.cycle = cycle;
|
|
18
|
+
const getAnalogousHues = (hue) => [(0, exports.cycle)(hue + 30), (0, exports.cycle)(hue + 60)];
|
|
19
|
+
exports.getAnalogousHues = getAnalogousHues;
|
|
20
|
+
const getComplimentaryHue = (hue) => (0, exports.cycle)(hue + 180);
|
|
21
|
+
exports.getComplimentaryHue = getComplimentaryHue;
|
|
22
|
+
const getTriadicHues = (hue) => [(0, exports.cycle)(hue + 120), (0, exports.cycle)(hue - 120)];
|
|
23
|
+
exports.getTriadicHues = getTriadicHues;
|
|
24
|
+
const getSplitComplimentaryHues = (hue) => [(0, exports.cycle)(hue + 150), (0, exports.cycle)(hue - 150)];
|
|
25
|
+
exports.getSplitComplimentaryHues = getSplitComplimentaryHues;
|
|
10
26
|
//# sourceMappingURL=color.utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.utils.js","sourceRoot":"","sources":["../../../../src/core/color/color.utils.ts"],"names":[],"mappings":";;;AAEO,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAS,EAAU,EAAE;IAC/D,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAC5D,CAAC,CAAC;AAJW,QAAA,gBAAgB,oBAI3B"}
|
|
1
|
+
{"version":3,"file":"color.utils.js","sourceRoot":"","sources":["../../../../src/core/color/color.utils.ts"],"names":[],"mappings":";;;AAEO,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAS,EAAU,EAAE;IAC/D,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAC5D,CAAC,CAAC;AAJW,QAAA,gBAAgB,oBAI3B;AAEK,MAAM,KAAK,GAAG,CAAC,KAAa,EAAU,EAAE;IAC7C,IAAI,KAAK,GAAG,GAAG;QAAE,OAAO,KAAK,GAAG,GAAG,CAAC;IACpC,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,KAAK,GAAG,GAAG,CAAC;IAClC,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAJW,QAAA,KAAK,SAIhB;AAEK,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAY,EAAE,CAAC,CAAC,IAAA,aAAK,EAAC,GAAG,GAAG,EAAE,CAAC,EAAE,IAAA,aAAK,EAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;AAAjF,QAAA,gBAAgB,oBAAiE;AACvF,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,IAAA,aAAK,EAAC,GAAG,GAAG,GAAG,CAAC,CAAC;AAAhE,QAAA,mBAAmB,uBAA6C;AACtE,MAAM,cAAc,GAAG,CAAC,GAAW,EAAY,EAAE,CAAC,CAAC,IAAA,aAAK,EAAC,GAAG,GAAG,GAAG,CAAC,EAAE,IAAA,aAAK,EAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;AAAjF,QAAA,cAAc,kBAAmE;AACvF,MAAM,yBAAyB,GAAG,CAAC,GAAW,EAAY,EAAE,CAAC,CAAC,IAAA,aAAK,EAAC,GAAG,GAAG,GAAG,CAAC,EAAE,IAAA,aAAK,EAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;AAA5F,QAAA,yBAAyB,6BAAmE"}
|
|
@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
__exportStar(require("./color.helper"), exports);
|
|
18
18
|
__exportStar(require("./color.model"), exports);
|
|
19
19
|
__exportStar(require("./color.types"), exports);
|
|
20
|
+
__exportStar(require("./color.records"), exports);
|
|
20
21
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/color/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B;AAC/B,gDAA8B;AAC9B,gDAA8B"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/color/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B;AAC/B,gDAA8B;AAC9B,gDAA8B;AAC9B,kDAAgC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './palette.model';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./palette.model"), exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/palette/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palette.model.js","sourceRoot":"","sources":["../../../../src/core/palette/palette.model.ts"],"names":[],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CategoryLightness, CategorySaturation, RoleHues } from './color.
|
|
1
|
+
import { CategoryLightness, CategorySaturation, RoleHues } from './color.records';
|
|
2
2
|
import { randomRangeValue } from './color.utils';
|
|
3
3
|
export function hslaToString({ hue, saturation, lightness, alpha = 1 }) {
|
|
4
4
|
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.helper.js","sourceRoot":"","sources":["../../../../src/core/color/color.helper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"color.helper.js","sourceRoot":"","sources":["../../../../src/core/color/color.helper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,MAAM,UAAU,YAAY,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,GAAG,CAAC,EAAQ;IAC1E,OAAO,QAAQ,GAAG,KAAK,UAAU,MAAM,SAAS,MAAM,KAAK,GAAG,CAAC;AACjE,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAY;IAC9D,MAAM,GAAG,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEhE,OAAO,YAAY,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;AAC7D,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Range } from './color.model';
|
|
2
|
+
import { ColorCategory, ColorRole, UtilityColorRole } from './color.types';
|
|
3
|
+
export declare const CategorySaturation: Record<ColorCategory, Range>;
|
|
4
|
+
export declare const CategoryLightness: Record<ColorCategory, Range>;
|
|
5
|
+
export declare const RoleHues: Record<ColorRole | UtilityColorRole, Range>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export const CategorySaturation = {
|
|
2
|
+
jewel: { low: 73, high: 83 },
|
|
3
|
+
pastel: { low: 14, high: 21 },
|
|
4
|
+
earth: { low: 36, high: 41 },
|
|
5
|
+
neutral: { low: 1, high: 10 },
|
|
6
|
+
florescent: { low: 63, high: 100 },
|
|
7
|
+
shades: { low: 0, high: 0 },
|
|
8
|
+
};
|
|
9
|
+
export const CategoryLightness = {
|
|
10
|
+
jewel: { low: 56, high: 76 },
|
|
11
|
+
pastel: { low: 89, high: 96 },
|
|
12
|
+
earth: { low: 36, high: 77 },
|
|
13
|
+
neutral: { low: 70, high: 99 },
|
|
14
|
+
florescent: { low: 82, high: 100 },
|
|
15
|
+
shades: { low: 0, high: 100 },
|
|
16
|
+
};
|
|
17
|
+
export const RoleHues = {
|
|
18
|
+
primary: { low: 73, high: 83, default: 0 },
|
|
19
|
+
secondary: { low: 14, high: 21, default: 0 },
|
|
20
|
+
tertiary: { low: 36, high: 41, default: 0 },
|
|
21
|
+
inverse: { low: 63, high: 100, default: 0 },
|
|
22
|
+
ghost: { low: 0, high: 0, default: 0 },
|
|
23
|
+
warn: { low: 320, high: 20, default: 0 },
|
|
24
|
+
alert: { low: 40, high: 70, default: 60 },
|
|
25
|
+
success: { low: 90, high: 150, default: 120 },
|
|
26
|
+
info: { low: 200, high: 260, default: 240 }, // blue
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=color.records.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color.records.js","sourceRoot":"","sources":["../../../../src/core/color/color.records.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAiC;IAC9D,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5B,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5B,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE;IAClC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAiC;IAC7D,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5B,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5B,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9B,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE;IAClC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAgD;IACnE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IAC5C,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IAC3C,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC3C,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE;IACtC,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;IACxC,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IACzC,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;IAC7C,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,OAAO;CACrD,CAAC"}
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
import { Range } from './color.model';
|
|
2
|
-
export declare type colorStyles = 'solid' | 'transparent' | 'gradient';
|
|
3
|
-
export declare type ColorOutput = 'HEX' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA';
|
|
4
1
|
export declare type ColorScheme = 'monochromatic' | 'analogous' | 'complimentary' | 'splitComplimentary' | 'triadic';
|
|
5
2
|
export declare type ColorCategory = 'jewel' | 'pastel' | 'earth' | 'neutral' | 'florescent' | 'shades';
|
|
6
|
-
export declare
|
|
7
|
-
export declare
|
|
8
|
-
export declare type UtilityColorRole = 'warn' | 'alert' | 'success' | 'info';
|
|
9
|
-
export declare type ColorRole = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'ghost';
|
|
10
|
-
export declare const RoleHues: Record<ColorRole | UtilityColorRole, Range>;
|
|
3
|
+
export declare type colorStyles = 'solid' | 'transparent' | 'gradient';
|
|
4
|
+
export declare type ColorOutput = 'HEX' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA';
|
|
11
5
|
export declare type ColorModes = 'base' | 'hover' | 'active' | 'disabled';
|
|
12
|
-
export declare type
|
|
6
|
+
export declare type ColorRole = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'ghost';
|
|
7
|
+
export declare type ColorToken = ElementColorToken | UtilityColorToken | ContainerColorToken | ContentColorToken;
|
|
13
8
|
export declare type ElementColorToken = 'primary' | 'secondary' | 'tertiary' | 'error';
|
|
9
|
+
export declare type UtilityColorToken = 'outline' | 'shadow' | 'surface-tint' | 'transparent';
|
|
10
|
+
export declare type UtilityColorRole = 'warn' | 'alert' | 'success' | 'info';
|
|
14
11
|
export declare type ContainerColorToken = 'primary-container' | 'secondary-container' | 'tertiary-container' | 'error-container' | 'background' | 'surface' | 'surface-variant' | 'inverse-surface' | 'transparent';
|
|
15
12
|
export declare type ContentColorToken = 'on-primary' | 'on-primary-container' | 'on-secondary' | 'on-secondary-container' | 'on-tertiary' | 'on-tertiary-container' | 'on-error' | 'on-error-container' | 'on-background' | 'on-surface' | 'on-surface-variant' | 'inverse-on-surface' | 'inverse-on-surface-primary';
|
|
16
|
-
export declare type UtilityColorToken = 'outline' | 'shadow' | 'surface-tint' | 'transparent';
|
|
@@ -1,30 +1,4 @@
|
|
|
1
1
|
// https://designerup.co/blog/ui-design-choosing-color-palettes/
|
|
2
2
|
// https://designerup.co/blog/practical-guide-to-perfect-ui-color-palettes/
|
|
3
|
-
export
|
|
4
|
-
jewel: { low: 73, high: 83 },
|
|
5
|
-
pastel: { low: 14, high: 21 },
|
|
6
|
-
earth: { low: 36, high: 41 },
|
|
7
|
-
neutral: { low: 1, high: 10 },
|
|
8
|
-
florescent: { low: 63, high: 100 },
|
|
9
|
-
shades: { low: 0, high: 0 },
|
|
10
|
-
};
|
|
11
|
-
export const CategoryLightness = {
|
|
12
|
-
jewel: { low: 56, high: 76 },
|
|
13
|
-
pastel: { low: 89, high: 96 },
|
|
14
|
-
earth: { low: 36, high: 77 },
|
|
15
|
-
neutral: { low: 70, high: 99 },
|
|
16
|
-
florescent: { low: 82, high: 100 },
|
|
17
|
-
shades: { low: 0, high: 100 },
|
|
18
|
-
};
|
|
19
|
-
export const RoleHues = {
|
|
20
|
-
primary: { low: 73, high: 83, default: 0 },
|
|
21
|
-
secondary: { low: 14, high: 21, default: 0 },
|
|
22
|
-
tertiary: { low: 36, high: 41, default: 0 },
|
|
23
|
-
inverse: { low: 63, high: 100, default: 0 },
|
|
24
|
-
ghost: { low: 0, high: 0, default: 0 },
|
|
25
|
-
warn: { low: 320, high: 20, default: 0 },
|
|
26
|
-
alert: { low: 40, high: 70, default: 60 },
|
|
27
|
-
success: { low: 90, high: 150, default: 120 },
|
|
28
|
-
info: { low: 200, high: 260, default: 240 }, // blue
|
|
29
|
-
};
|
|
3
|
+
export {};
|
|
30
4
|
//# sourceMappingURL=color.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../../src/core/color/color.types.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,2EAA2E
|
|
1
|
+
{"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../../src/core/color/color.types.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,2EAA2E"}
|
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
import { Range } from './color.model';
|
|
2
2
|
export declare const randomRangeValue: ({ low, high }: Range) => number;
|
|
3
|
+
export declare const cycle: (angle: number) => number;
|
|
4
|
+
export declare const getAnalogousHues: (hue: number) => number[];
|
|
5
|
+
export declare const getComplimentaryHue: (hue: number) => number;
|
|
6
|
+
export declare const getTriadicHues: (hue: number) => number[];
|
|
7
|
+
export declare const getSplitComplimentaryHues: (hue: number) => number[];
|
|
@@ -3,4 +3,15 @@ export const randomRangeValue = ({ low, high }) => {
|
|
|
3
3
|
high = Math.floor(high);
|
|
4
4
|
return Math.floor(Math.random() * (high - low + 1)) + low;
|
|
5
5
|
};
|
|
6
|
+
export const cycle = (angle) => {
|
|
7
|
+
if (angle > 360)
|
|
8
|
+
return angle - 360;
|
|
9
|
+
if (angle < 0)
|
|
10
|
+
return angle + 360;
|
|
11
|
+
return angle;
|
|
12
|
+
};
|
|
13
|
+
export const getAnalogousHues = (hue) => [cycle(hue + 30), cycle(hue + 60)];
|
|
14
|
+
export const getComplimentaryHue = (hue) => cycle(hue + 180);
|
|
15
|
+
export const getTriadicHues = (hue) => [cycle(hue + 120), cycle(hue - 120)];
|
|
16
|
+
export const getSplitComplimentaryHues = (hue) => [cycle(hue + 150), cycle(hue - 150)];
|
|
6
17
|
//# sourceMappingURL=color.utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.utils.js","sourceRoot":"","sources":["../../../../src/core/color/color.utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAS,EAAU,EAAE;IAC/D,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAC5D,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"color.utils.js","sourceRoot":"","sources":["../../../../src/core/color/color.utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAS,EAAU,EAAE;IAC/D,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAC5D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAU,EAAE;IAC7C,IAAI,KAAK,GAAG,GAAG;QAAE,OAAO,KAAK,GAAG,GAAG,CAAC;IACpC,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,KAAK,GAAG,GAAG,CAAC;IAClC,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAY,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;AAC9F,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAW,EAAY,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;AAC9F,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,GAAW,EAAY,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/color/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/color/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './palette.model';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/palette/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palette.model.js","sourceRoot":"","sources":["../../../../src/core/palette/palette.model.ts"],"names":[],"mappings":""}
|
package/package.json
CHANGED