@uni-design-system/uni-core 0.0.25 → 0.0.27

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.
@@ -1,4 +1,3 @@
1
- import { Color } from './color.model';
2
- import { colorRoles } from './color.types';
3
- export declare function hslColor(c: Color): string;
4
- export declare function roleColor(r: colorRoles): string;
1
+ import { HSLA, UniColor } from './color.model';
2
+ export declare function hslaToString({ hue, saturation, lightness, alpha }: HSLA): string;
3
+ export declare function uniColor({ role, category, alpha }: UniColor): string;
@@ -1,17 +1,17 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.roleColor = exports.hslColor = void 0;
3
+ exports.uniColor = exports.hslaToString = void 0;
4
4
  const color_types_1 = require("./color.types");
5
- function hslColor(c) {
6
- return `hsl(${c.hue}, ${c.saturation}, ${c.lightness}, ${c.alpha})`;
5
+ const color_utils_1 = require("./color.utils");
6
+ function hslaToString({ hue, saturation, lightness, alpha = 1 }) {
7
+ return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
7
8
  }
8
- exports.hslColor = hslColor;
9
- function roleColor(r) {
10
- const hue = color_types_1.roleHues[r].default;
11
- const role = r;
12
- const alpha = 1;
13
- const category = 'jewel';
14
- return hslColor({ role, category, hue, alpha });
9
+ exports.hslaToString = hslaToString;
10
+ function uniColor({ role, category, alpha = 1 }) {
11
+ const hue = (0, color_utils_1.randomRangeValue)(color_types_1.RoleHues[role]);
12
+ const saturation = (0, color_utils_1.randomRangeValue)(color_types_1.CategorySaturation[category]);
13
+ const lightness = (0, color_utils_1.randomRangeValue)(color_types_1.CategoryLightness[category]);
14
+ return hslaToString({ hue, saturation, lightness, alpha });
15
15
  }
16
- exports.roleColor = roleColor;
16
+ exports.uniColor = uniColor;
17
17
  //# sourceMappingURL=color.helper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"color.helper.js","sourceRoot":"","sources":["../../../../src/core/color/color.helper.ts"],"names":[],"mappings":";;;AACA,+CAAsE;AAEtE,SAAgB,QAAQ,CAAC,CAAQ;IAC/B,OAAO,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,UAAU,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC;AACtE,CAAC;AAFD,4BAEC;AAED,SAAgB,SAAS,CAAC,CAAa;IAErC,MAAM,GAAG,GAAG,sBAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChC,MAAM,IAAI,GAAe,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,CAAC,CAAC;IAChB,MAAM,QAAQ,GAAoB,OAAO,CAAC;IAE1C,OAAO,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;AAClD,CAAC;AARD,8BAQC"}
1
+ {"version":3,"file":"color.helper.js","sourceRoot":"","sources":["../../../../src/core/color/color.helper.ts"],"names":[],"mappings":";;;AACA,+CAAgF;AAChF,+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,sBAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7C,MAAM,UAAU,GAAG,IAAA,8BAAgB,EAAC,gCAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,IAAA,8BAAgB,EAAC,+BAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEhE,OAAO,YAAY,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;AAC7D,CAAC;AAND,4BAMC"}
@@ -1,9 +1,15 @@
1
- import { colorCategories, colorRoles, colorSchemes, colorStyles } from './color.types';
1
+ import { ColorCategory, ColorRole, ColorScheme, colorStyles } from './color.types';
2
+ export interface UniColor {
3
+ scheme: ColorScheme;
4
+ role: ColorRole;
5
+ category: ColorCategory;
6
+ alpha?: number;
7
+ }
2
8
  export interface Color {
3
- scheme?: colorSchemes;
9
+ scheme?: ColorScheme;
10
+ role?: ColorRole;
11
+ category?: ColorCategory;
4
12
  style?: colorStyles;
5
- role?: colorRoles;
6
- category?: colorCategories;
7
13
  GradientPosition?: GradientPosition;
8
14
  saturationRange?: Range;
9
15
  brightnessRangeMap?: Range;
@@ -20,3 +26,9 @@ export interface Range {
20
26
  high: number;
21
27
  default?: number;
22
28
  }
29
+ export interface HSLA {
30
+ hue?: number;
31
+ saturation?: number;
32
+ lightness?: number;
33
+ alpha?: number;
34
+ }
@@ -1,14 +1,13 @@
1
1
  import { Range } from './color.model';
2
2
  export declare type colorStyles = 'solid' | 'transparent' | 'gradient';
3
3
  export declare type ColorOutput = 'HEX' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA';
4
- export declare type colorSchemes = 'monochromatic' | 'analogous' | 'complimentary' | 'splitComplimentary' | 'triadic';
5
- export declare type colorCategories = 'jewel' | 'pastel' | 'earth' | 'neutral' | 'florescent' | 'shades';
6
- export declare const saturationRanges: Record<colorCategories, Range>;
7
- export declare const lightnessRanges: Record<colorCategories, Range>;
8
- export declare type utilColorRoles = 'warn' | 'alert' | 'success' | 'info';
9
- export declare type colorRoles = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'ghost';
10
- export declare const roleHues: Record<colorRoles, Range>;
11
- export declare const utilHues: Record<utilColorRoles, Range>;
4
+ export declare type ColorScheme = 'monochromatic' | 'analogous' | 'complimentary' | 'splitComplimentary' | 'triadic';
5
+ export declare type ColorCategory = 'jewel' | 'pastel' | 'earth' | 'neutral' | 'florescent' | 'shades';
6
+ export declare const CategorySaturation: Record<ColorCategory, Range>;
7
+ export declare const CategoryLightness: Record<ColorCategory, Range>;
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>;
12
11
  export declare type ColorModes = 'base' | 'hover' | 'active' | 'disabled';
13
12
  export declare type ColorToken = ElementColorToken | ContainerColorToken | ContentColorToken | UtilityColorToken;
14
13
  export declare type ElementColorToken = 'primary' | 'secondary' | 'tertiary' | 'error';
@@ -2,8 +2,8 @@
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.utilHues = exports.roleHues = exports.lightnessRanges = exports.saturationRanges = void 0;
6
- exports.saturationRanges = {
5
+ exports.RoleHues = exports.CategoryLightness = exports.CategorySaturation = void 0;
6
+ exports.CategorySaturation = {
7
7
  jewel: { low: 73, high: 83 },
8
8
  pastel: { low: 14, high: 21 },
9
9
  earth: { low: 36, high: 41 },
@@ -11,22 +11,20 @@ exports.saturationRanges = {
11
11
  florescent: { low: 63, high: 100 },
12
12
  shades: { low: 0, high: 0 },
13
13
  };
14
- exports.lightnessRanges = {
14
+ exports.CategoryLightness = {
15
15
  jewel: { low: 56, high: 76 },
16
16
  pastel: { low: 89, high: 96 },
17
17
  earth: { low: 36, high: 77 },
18
18
  neutral: { low: 70, high: 99 },
19
19
  florescent: { low: 82, high: 100 },
20
- shades: { low: 0, high: 100 }
20
+ shades: { low: 0, high: 100 },
21
21
  };
22
- exports.roleHues = {
22
+ exports.RoleHues = {
23
23
  primary: { low: 73, high: 83, default: 0 },
24
24
  secondary: { low: 14, high: 21, default: 0 },
25
25
  tertiary: { low: 36, high: 41, default: 0 },
26
26
  inverse: { low: 63, high: 100, default: 0 },
27
27
  ghost: { low: 0, high: 0, default: 0 },
28
- };
29
- exports.utilHues = {
30
28
  warn: { low: 320, high: 20, default: 0 },
31
29
  alert: { low: 40, high: 70, default: 60 },
32
30
  success: { low: 90, high: 150, default: 120 },
@@ -1 +1 @@
1
- {"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../../src/core/color/color.types.ts"],"names":[],"mappings":";AAAA,gEAAgE;AAChE,2EAA2E;;;AA+B9D,QAAA,gBAAgB,GAAmC;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,eAAe,GAAmC;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;AAqBW,QAAA,QAAQ,GAA8B;IACjD,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;CACvC,CAAA;AAEY,QAAA,QAAQ,GAAkC;IACrD,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,CAAA"}
1
+ {"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../../src/core/color/color.types.ts"],"names":[],"mappings":";AAAA,gEAAgE;AAChE,2EAA2E;;;AAY9D,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;AAUW,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"}
@@ -0,0 +1,2 @@
1
+ import { Range } from './color.model';
2
+ export declare const randomRangeValue: ({ low, high }: Range) => number;
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.randomRangeValue = void 0;
4
+ const randomRangeValue = ({ low, high }) => {
5
+ low = Math.ceil(low);
6
+ high = Math.floor(high);
7
+ return Math.floor(Math.random() * (high - low + 1)) + low;
8
+ };
9
+ exports.randomRangeValue = randomRangeValue;
10
+ //# sourceMappingURL=color.utils.js.map
@@ -0,0 +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,4 +1,3 @@
1
- import { Color } from './color.model';
2
- import { colorRoles } from './color.types';
3
- export declare function hslColor(c: Color): string;
4
- export declare function roleColor(r: colorRoles): string;
1
+ import { HSLA, UniColor } from './color.model';
2
+ export declare function hslaToString({ hue, saturation, lightness, alpha }: HSLA): string;
3
+ export declare function uniColor({ role, category, alpha }: UniColor): string;
@@ -1,12 +1,12 @@
1
- import { roleHues } from './color.types';
2
- export function hslColor(c) {
3
- return `hsl(${c.hue}, ${c.saturation}, ${c.lightness}, ${c.alpha})`;
1
+ import { CategoryLightness, CategorySaturation, RoleHues } from './color.types';
2
+ import { randomRangeValue } from './color.utils';
3
+ export function hslaToString({ hue, saturation, lightness, alpha = 1 }) {
4
+ return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
4
5
  }
5
- export function roleColor(r) {
6
- const hue = roleHues[r].default;
7
- const role = r;
8
- const alpha = 1;
9
- const category = 'jewel';
10
- return hslColor({ role, category, hue, alpha });
6
+ export function uniColor({ role, category, alpha = 1 }) {
7
+ const hue = randomRangeValue(RoleHues[role]);
8
+ const saturation = randomRangeValue(CategorySaturation[category]);
9
+ const lightness = randomRangeValue(CategoryLightness[category]);
10
+ return hslaToString({ hue, saturation, lightness, alpha });
11
11
  }
12
12
  //# sourceMappingURL=color.helper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"color.helper.js","sourceRoot":"","sources":["../../../../src/core/color/color.helper.ts"],"names":[],"mappings":"AACA,OAAO,EAA+B,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEtE,MAAM,UAAU,QAAQ,CAAC,CAAQ;IAC/B,OAAO,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,UAAU,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC;AACtE,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,CAAa;IAErC,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChC,MAAM,IAAI,GAAe,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,CAAC,CAAC;IAChB,MAAM,QAAQ,GAAoB,OAAO,CAAC;IAE1C,OAAO,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;AAClD,CAAC"}
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,eAAe,CAAC;AAChF,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"}
@@ -1,9 +1,15 @@
1
- import { colorCategories, colorRoles, colorSchemes, colorStyles } from './color.types';
1
+ import { ColorCategory, ColorRole, ColorScheme, colorStyles } from './color.types';
2
+ export interface UniColor {
3
+ scheme: ColorScheme;
4
+ role: ColorRole;
5
+ category: ColorCategory;
6
+ alpha?: number;
7
+ }
2
8
  export interface Color {
3
- scheme?: colorSchemes;
9
+ scheme?: ColorScheme;
10
+ role?: ColorRole;
11
+ category?: ColorCategory;
4
12
  style?: colorStyles;
5
- role?: colorRoles;
6
- category?: colorCategories;
7
13
  GradientPosition?: GradientPosition;
8
14
  saturationRange?: Range;
9
15
  brightnessRangeMap?: Range;
@@ -20,3 +26,9 @@ export interface Range {
20
26
  high: number;
21
27
  default?: number;
22
28
  }
29
+ export interface HSLA {
30
+ hue?: number;
31
+ saturation?: number;
32
+ lightness?: number;
33
+ alpha?: number;
34
+ }
@@ -1,14 +1,13 @@
1
1
  import { Range } from './color.model';
2
2
  export declare type colorStyles = 'solid' | 'transparent' | 'gradient';
3
3
  export declare type ColorOutput = 'HEX' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA';
4
- export declare type colorSchemes = 'monochromatic' | 'analogous' | 'complimentary' | 'splitComplimentary' | 'triadic';
5
- export declare type colorCategories = 'jewel' | 'pastel' | 'earth' | 'neutral' | 'florescent' | 'shades';
6
- export declare const saturationRanges: Record<colorCategories, Range>;
7
- export declare const lightnessRanges: Record<colorCategories, Range>;
8
- export declare type utilColorRoles = 'warn' | 'alert' | 'success' | 'info';
9
- export declare type colorRoles = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'ghost';
10
- export declare const roleHues: Record<colorRoles, Range>;
11
- export declare const utilHues: Record<utilColorRoles, Range>;
4
+ export declare type ColorScheme = 'monochromatic' | 'analogous' | 'complimentary' | 'splitComplimentary' | 'triadic';
5
+ export declare type ColorCategory = 'jewel' | 'pastel' | 'earth' | 'neutral' | 'florescent' | 'shades';
6
+ export declare const CategorySaturation: Record<ColorCategory, Range>;
7
+ export declare const CategoryLightness: Record<ColorCategory, Range>;
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>;
12
11
  export declare type ColorModes = 'base' | 'hover' | 'active' | 'disabled';
13
12
  export declare type ColorToken = ElementColorToken | ContainerColorToken | ContentColorToken | UtilityColorToken;
14
13
  export declare type ElementColorToken = 'primary' | 'secondary' | 'tertiary' | 'error';
@@ -1,6 +1,6 @@
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 const saturationRanges = {
3
+ export const CategorySaturation = {
4
4
  jewel: { low: 73, high: 83 },
5
5
  pastel: { low: 14, high: 21 },
6
6
  earth: { low: 36, high: 41 },
@@ -8,22 +8,20 @@ export const saturationRanges = {
8
8
  florescent: { low: 63, high: 100 },
9
9
  shades: { low: 0, high: 0 },
10
10
  };
11
- export const lightnessRanges = {
11
+ export const CategoryLightness = {
12
12
  jewel: { low: 56, high: 76 },
13
13
  pastel: { low: 89, high: 96 },
14
14
  earth: { low: 36, high: 77 },
15
15
  neutral: { low: 70, high: 99 },
16
16
  florescent: { low: 82, high: 100 },
17
- shades: { low: 0, high: 100 }
17
+ shades: { low: 0, high: 100 },
18
18
  };
19
- export const roleHues = {
19
+ export const RoleHues = {
20
20
  primary: { low: 73, high: 83, default: 0 },
21
21
  secondary: { low: 14, high: 21, default: 0 },
22
22
  tertiary: { low: 36, high: 41, default: 0 },
23
23
  inverse: { low: 63, high: 100, default: 0 },
24
24
  ghost: { low: 0, high: 0, default: 0 },
25
- };
26
- export const utilHues = {
27
25
  warn: { low: 320, high: 20, default: 0 },
28
26
  alert: { low: 40, high: 70, default: 60 },
29
27
  success: { low: 90, high: 150, default: 120 },
@@ -1 +1 @@
1
- {"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../../src/core/color/color.types.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,2EAA2E;AA+B3E,MAAM,CAAC,MAAM,gBAAgB,GAAmC;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,eAAe,GAAmC;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;AAqBF,MAAM,CAAC,MAAM,QAAQ,GAA8B;IACjD,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;CACvC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC;IACrD,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,CAAA"}
1
+ {"version":3,"file":"color.types.js","sourceRoot":"","sources":["../../../../src/core/color/color.types.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,2EAA2E;AAY3E,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;AAUF,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"}
@@ -0,0 +1,2 @@
1
+ import { Range } from './color.model';
2
+ export declare const randomRangeValue: ({ low, high }: Range) => number;
@@ -0,0 +1,6 @@
1
+ export const randomRangeValue = ({ low, high }) => {
2
+ low = Math.ceil(low);
3
+ high = Math.floor(high);
4
+ return Math.floor(Math.random() * (high - low + 1)) + low;
5
+ };
6
+ //# sourceMappingURL=color.utils.js.map
@@ -0,0 +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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@uni-design-system/uni-core",
3
3
  "description": "UNI Design System core dependencies.",
4
- "version": "0.0.25",
4
+ "version": "0.0.27",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+https://github.com/uni-design-system/uni-core.git"
@@ -29,7 +29,7 @@
29
29
  "homepage": "https://github.com/uni-design-system/uni-core#readme",
30
30
  "devDependencies": {
31
31
  "@types/node": "^17.0.21",
32
+ "prettier": "2.7.1",
32
33
  "typescript": "^4.6.2"
33
- },
34
- "peerDependencies": {}
34
+ }
35
35
  }