@uni-design-system/uni-core 0.0.24 → 0.0.26
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/button/button.model.d.ts +1 -0
- package/dist/cjs/core/color/color.helper.d.ts +3 -4
- package/dist/cjs/core/color/color.helper.js +11 -11
- package/dist/cjs/core/color/color.helper.js.map +1 -1
- package/dist/cjs/core/color/color.model.d.ts +16 -4
- package/dist/cjs/core/color/color.types.d.ts +7 -8
- package/dist/cjs/core/color/color.types.js +5 -7
- package/dist/cjs/core/color/color.types.js.map +1 -1
- package/dist/cjs/core/color/color.utils.d.ts +2 -0
- package/dist/cjs/core/color/color.utils.js +10 -0
- package/dist/cjs/core/color/color.utils.js.map +1 -0
- package/dist/cjs/core/container/container.model.d.ts +3 -2
- package/dist/cjs/core/theme/themes/base.theme.js +13 -12
- package/dist/cjs/core/theme/themes/base.theme.js.map +1 -1
- package/dist/esm/core/button/button.model.d.ts +1 -0
- package/dist/esm/core/color/color.helper.d.ts +3 -4
- package/dist/esm/core/color/color.helper.js +9 -9
- package/dist/esm/core/color/color.helper.js.map +1 -1
- package/dist/esm/core/color/color.model.d.ts +16 -4
- package/dist/esm/core/color/color.types.d.ts +7 -8
- package/dist/esm/core/color/color.types.js +4 -6
- package/dist/esm/core/color/color.types.js.map +1 -1
- package/dist/esm/core/color/color.utils.d.ts +2 -0
- package/dist/esm/core/color/color.utils.js +6 -0
- package/dist/esm/core/color/color.utils.js.map +1 -0
- package/dist/esm/core/container/container.model.d.ts +3 -2
- package/dist/esm/core/theme/themes/base.theme.js +13 -12
- package/dist/esm/core/theme/themes/base.theme.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
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.
|
|
3
|
+
exports.uniColor = exports.hslaToString = void 0;
|
|
4
4
|
const color_types_1 = require("./color.types");
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
const color_utils_1 = require("./color.utils");
|
|
6
|
+
function hslaToString({ hue, saturation, lightness, alpha }) {
|
|
7
|
+
return `hsla(${hue}, ${saturation}, ${lightness}, ${alpha})`;
|
|
7
8
|
}
|
|
8
|
-
exports.
|
|
9
|
-
function
|
|
10
|
-
const hue = color_types_1.
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
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.
|
|
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,+
|
|
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,EAAQ;IACtE,OAAO,QAAQ,GAAG,KAAK,UAAU,KAAK,SAAS,KAAK,KAAK,GAAG,CAAC;AAC/D,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 {
|
|
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?:
|
|
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
|
|
5
|
-
export declare type
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
8
|
-
export declare type
|
|
9
|
-
export declare type
|
|
10
|
-
export declare const
|
|
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.
|
|
6
|
-
exports.
|
|
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.
|
|
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.
|
|
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;;;
|
|
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,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"}
|
|
@@ -6,10 +6,11 @@ import { ShadowElevation, ShadowMode } from '../shadow';
|
|
|
6
6
|
export interface Container {
|
|
7
7
|
maxWidth?: number;
|
|
8
8
|
align?: HorizontalAlign;
|
|
9
|
-
contentSpacing?: SizeMap;
|
|
10
9
|
topPadding?: SizeMap;
|
|
11
|
-
|
|
10
|
+
bottomPadding?: SizeMap;
|
|
11
|
+
horizontalPadding?: SizeMap;
|
|
12
12
|
spacing?: SizeMap;
|
|
13
|
+
contentSpacing?: SizeMap;
|
|
13
14
|
backgroundType?: BackgroundType;
|
|
14
15
|
borderRadii?: SizeMap;
|
|
15
16
|
shadowMode?: ShadowMode;
|
|
@@ -2,17 +2,18 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.BaseTheme = void 0;
|
|
4
4
|
const BaseButton = {
|
|
5
|
-
verticalPadding: { xs: 4, sm: 8, md: 12, lg: 16, xl: 20 },
|
|
6
|
-
horizontalPadding: { xs: 12, sm: 18, md: 24, lg: 30, xl: 36 },
|
|
7
5
|
borderRadius: 100,
|
|
8
|
-
color: 'primary-container'
|
|
6
|
+
color: 'primary-container',
|
|
7
|
+
contentColor: 'on-primary-container',
|
|
8
|
+
verticalPadding: { xs: 5, sm: 8, md: 12, lg: 16, xl: 20 },
|
|
9
|
+
horizontalPadding: { xs: 8, sm: 12, md: 18, lg: 24, xl: 30 },
|
|
9
10
|
};
|
|
10
11
|
const BaseContainer = {
|
|
12
|
+
color: 'primary-container',
|
|
13
|
+
contentColor: 'on-primary-container',
|
|
11
14
|
borderRadii: { xs: 8, sm: 12, md: 16, lg: 20, xl: 24 },
|
|
12
|
-
|
|
15
|
+
horizontalPadding: { xs: 12, sm: 18, md: 24, lg: 30, xl: 36 },
|
|
13
16
|
contentSpacing: { xs: 8, sm: 12, md: 16, lg: 20, xl: 24 },
|
|
14
|
-
color: 'primary-container',
|
|
15
|
-
contentColor: 'on-primary-container'
|
|
16
17
|
};
|
|
17
18
|
exports.BaseTheme = {
|
|
18
19
|
id: 'BaseTheme',
|
|
@@ -182,13 +183,13 @@ exports.BaseTheme = {
|
|
|
182
183
|
}
|
|
183
184
|
},
|
|
184
185
|
buttons: {
|
|
185
|
-
elevated: Object.assign(Object.assign({}, BaseButton), { color: 'surface', shadowElevation: 'raised' }),
|
|
186
|
+
elevated: Object.assign(Object.assign({}, BaseButton), { color: 'surface', contentColor: 'on-surface', shadowElevation: 'raised' }),
|
|
186
187
|
filled: Object.assign(Object.assign({}, BaseButton), { color: 'primary' }),
|
|
187
|
-
'filled-secondary': Object.assign(Object.assign({}, BaseButton), { color: 'secondary' }),
|
|
188
|
-
outlined: Object.assign(Object.assign({}, BaseButton), { color: 'transparent', borderColor: 'primary', borderWidth: 1 }),
|
|
189
|
-
text: Object.assign(Object.assign({}, BaseButton), { color: 'transparent' }),
|
|
190
|
-
icon: Object.assign(Object.assign({}, BaseButton), { color: 'transparent' }),
|
|
191
|
-
'floating-action': Object.assign(Object.assign({}, BaseButton), { color: 'secondary',
|
|
188
|
+
'filled-secondary': Object.assign(Object.assign({}, BaseButton), { color: 'secondary', contentColor: 'on-secondary' }),
|
|
189
|
+
outlined: Object.assign(Object.assign({}, BaseButton), { color: 'transparent', borderColor: 'primary', contentColor: 'on-primary', borderWidth: 1 }),
|
|
190
|
+
text: Object.assign(Object.assign({}, BaseButton), { color: 'transparent', contentColor: 'on-surface' }),
|
|
191
|
+
icon: Object.assign(Object.assign({}, BaseButton), { color: 'transparent', contentColor: 'on-surface' }),
|
|
192
|
+
'floating-action': Object.assign(Object.assign({}, BaseButton), { color: 'secondary', contentColor: 'on-secondary', borderRadii: { xs: 5, sm: 8, md: 12, lg: 16, xl: 12 }, shadowElevation: 'navigation', verticalPadding: { xs: 8, sm: 12, md: 18, lg: 24, xl: 30 }, horizontalPadding: { xs: 8, sm: 12, md: 18, lg: 24, xl: 30 } })
|
|
192
193
|
},
|
|
193
194
|
containers: {
|
|
194
195
|
card: Object.assign(Object.assign({}, BaseContainer), { color: 'surface', contentColor: 'on-surface', shadowMode: 'interactive' }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/base.theme.ts"],"names":[],"mappings":";;;AAIA,MAAM,UAAU,GAAW;IACzB,eAAe,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IACzD,iBAAiB,EAAE,EAAE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"base.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/base.theme.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
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 {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { CategoryLightness, CategorySaturation, RoleHues } from './color.types';
|
|
2
|
+
import { randomRangeValue } from './color.utils';
|
|
3
|
+
export function hslaToString({ hue, saturation, lightness, alpha }) {
|
|
4
|
+
return `hsla(${hue}, ${saturation}, ${lightness}, ${alpha})`;
|
|
4
5
|
}
|
|
5
|
-
export function
|
|
6
|
-
const hue =
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
|
|
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,
|
|
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,EAAQ;IACtE,OAAO,QAAQ,GAAG,KAAK,UAAU,KAAK,SAAS,KAAK,KAAK,GAAG,CAAC;AAC/D,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 {
|
|
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?:
|
|
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
|
|
5
|
-
export declare type
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
8
|
-
export declare type
|
|
9
|
-
export declare type
|
|
10
|
-
export declare const
|
|
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
|
|
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
|
|
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
|
|
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;
|
|
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 @@
|
|
|
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"}
|
|
@@ -6,10 +6,11 @@ import { ShadowElevation, ShadowMode } from '../shadow';
|
|
|
6
6
|
export interface Container {
|
|
7
7
|
maxWidth?: number;
|
|
8
8
|
align?: HorizontalAlign;
|
|
9
|
-
contentSpacing?: SizeMap;
|
|
10
9
|
topPadding?: SizeMap;
|
|
11
|
-
|
|
10
|
+
bottomPadding?: SizeMap;
|
|
11
|
+
horizontalPadding?: SizeMap;
|
|
12
12
|
spacing?: SizeMap;
|
|
13
|
+
contentSpacing?: SizeMap;
|
|
13
14
|
backgroundType?: BackgroundType;
|
|
14
15
|
borderRadii?: SizeMap;
|
|
15
16
|
shadowMode?: ShadowMode;
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
const BaseButton = {
|
|
2
|
-
verticalPadding: { xs: 4, sm: 8, md: 12, lg: 16, xl: 20 },
|
|
3
|
-
horizontalPadding: { xs: 12, sm: 18, md: 24, lg: 30, xl: 36 },
|
|
4
2
|
borderRadius: 100,
|
|
5
|
-
color: 'primary-container'
|
|
3
|
+
color: 'primary-container',
|
|
4
|
+
contentColor: 'on-primary-container',
|
|
5
|
+
verticalPadding: { xs: 5, sm: 8, md: 12, lg: 16, xl: 20 },
|
|
6
|
+
horizontalPadding: { xs: 8, sm: 12, md: 18, lg: 24, xl: 30 },
|
|
6
7
|
};
|
|
7
8
|
const BaseContainer = {
|
|
9
|
+
color: 'primary-container',
|
|
10
|
+
contentColor: 'on-primary-container',
|
|
8
11
|
borderRadii: { xs: 8, sm: 12, md: 16, lg: 20, xl: 24 },
|
|
9
|
-
|
|
12
|
+
horizontalPadding: { xs: 12, sm: 18, md: 24, lg: 30, xl: 36 },
|
|
10
13
|
contentSpacing: { xs: 8, sm: 12, md: 16, lg: 20, xl: 24 },
|
|
11
|
-
color: 'primary-container',
|
|
12
|
-
contentColor: 'on-primary-container'
|
|
13
14
|
};
|
|
14
15
|
export const BaseTheme = {
|
|
15
16
|
id: 'BaseTheme',
|
|
@@ -179,13 +180,13 @@ export const BaseTheme = {
|
|
|
179
180
|
}
|
|
180
181
|
},
|
|
181
182
|
buttons: {
|
|
182
|
-
elevated: Object.assign(Object.assign({}, BaseButton), { color: 'surface', shadowElevation: 'raised' }),
|
|
183
|
+
elevated: Object.assign(Object.assign({}, BaseButton), { color: 'surface', contentColor: 'on-surface', shadowElevation: 'raised' }),
|
|
183
184
|
filled: Object.assign(Object.assign({}, BaseButton), { color: 'primary' }),
|
|
184
|
-
'filled-secondary': Object.assign(Object.assign({}, BaseButton), { color: 'secondary' }),
|
|
185
|
-
outlined: Object.assign(Object.assign({}, BaseButton), { color: 'transparent', borderColor: 'primary', borderWidth: 1 }),
|
|
186
|
-
text: Object.assign(Object.assign({}, BaseButton), { color: 'transparent' }),
|
|
187
|
-
icon: Object.assign(Object.assign({}, BaseButton), { color: 'transparent' }),
|
|
188
|
-
'floating-action': Object.assign(Object.assign({}, BaseButton), { color: 'secondary',
|
|
185
|
+
'filled-secondary': Object.assign(Object.assign({}, BaseButton), { color: 'secondary', contentColor: 'on-secondary' }),
|
|
186
|
+
outlined: Object.assign(Object.assign({}, BaseButton), { color: 'transparent', borderColor: 'primary', contentColor: 'on-primary', borderWidth: 1 }),
|
|
187
|
+
text: Object.assign(Object.assign({}, BaseButton), { color: 'transparent', contentColor: 'on-surface' }),
|
|
188
|
+
icon: Object.assign(Object.assign({}, BaseButton), { color: 'transparent', contentColor: 'on-surface' }),
|
|
189
|
+
'floating-action': Object.assign(Object.assign({}, BaseButton), { color: 'secondary', contentColor: 'on-secondary', borderRadii: { xs: 5, sm: 8, md: 12, lg: 16, xl: 12 }, shadowElevation: 'navigation', verticalPadding: { xs: 8, sm: 12, md: 18, lg: 24, xl: 30 }, horizontalPadding: { xs: 8, sm: 12, md: 18, lg: 24, xl: 30 } })
|
|
189
190
|
},
|
|
190
191
|
containers: {
|
|
191
192
|
card: Object.assign(Object.assign({}, BaseContainer), { color: 'surface', contentColor: 'on-surface', shadowMode: 'interactive' }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/base.theme.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,GAAW;IACzB,eAAe,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IACzD,iBAAiB,EAAE,EAAE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"base.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/base.theme.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,GAAW;IACzB,YAAY,EAAE,GAAG;IACjB,KAAK,EAAE,mBAAmB;IAC1B,YAAY,EAAE,sBAAsB;IACpC,eAAe,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IACzD,iBAAiB,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;CAC7D,CAAA;AAED,MAAM,aAAa,GAAc;IAC/B,KAAK,EAAE,mBAAmB;IAC1B,YAAY,EAAE,sBAAsB;IACpC,WAAW,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IACtD,iBAAiB,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAC7D,cAAc,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;CAC1D,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE;QACN,SAAS,EAAE,SAAS;QACpB,YAAY,EAAE,SAAS;QACvB,mBAAmB,EAAE,SAAS;QAC9B,sBAAsB,EAAE,SAAS;QACjC,WAAW,EAAE,SAAS;QACtB,cAAc,EAAE,SAAS;QACzB,qBAAqB,EAAE,SAAS;QAChC,wBAAwB,EAAE,SAAS;QACnC,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,oBAAoB,EAAE,SAAS;QAC/B,uBAAuB,EAAE,SAAS;QAClC,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,SAAS;QACrB,iBAAiB,EAAE,SAAS;QAC5B,oBAAoB,EAAE,SAAS;QAC/B,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,SAAS,EAAE,SAAS;QACpB,YAAY,EAAE,SAAS;QACvB,iBAAiB,EAAE,SAAS;QAC5B,oBAAoB,EAAE,SAAS;QAC/B,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,SAAS;QACnB,cAAc,EAAE,SAAS;QACzB,iBAAiB,EAAE,SAAS;QAC5B,oBAAoB,EAAE,SAAS;QAC/B,4BAA4B,EAAE,SAAS;QACvC,aAAa,EAAE,eAAe;KAC/B;IACD,UAAU,EAAE;QACV,eAAe,EAAE;YACf,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,CAAC,IAAI;SACrB;QACD,gBAAgB,EAAE;YAChB,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;SACrB;QACD,eAAe,EAAE;YACf,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;SACrB;QACD,gBAAgB,EAAE;YAChB,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;SACrB;QACD,iBAAiB,EAAE;YACjB,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;SACrB;QACD,gBAAgB,EAAE;YAChB,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;SACrB;QACD,aAAa,EAAE;YACb,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;SACrB;QACD,cAAc,EAAE;YACd,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,IAAI;SACpB;QACD,aAAa,EAAE;YACb,UAAU,EAAE,iBAAiB;YAC7B,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,GAAG;SACnB;QACD,aAAa,EAAE;YACb,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,cAAc,EAAE;YACd,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,aAAa,EAAE;YACb,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,cAAc,EAAE;YACd,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,YAAY,EAAE;YACZ,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,IAAI;SACpB;QACD,YAAY,EAAE;YACZ,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,GAAG;SACnB;QACD,KAAK,EAAE;YACL,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,MAAM,EAAE;YACN,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,YAAY;SAC5B;QACD,OAAO,EAAE;YACP,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,GAAG;SACnB;QACD,QAAQ,EAAE;YACR,UAAU,EAAE,iBAAiB;YAC7B,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,GAAG;YAClB,aAAa,EAAE,WAAW;SAC3B;QACD,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,KAAK,EAAE;YACL,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,SAAS,EAAE,QAAQ;SACpB;KACF;IACD,OAAO,EAAE;QACP,QAAQ,kCACH,UAAU,KACb,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,QAAQ,GAC1B;QACD,MAAM,kCACD,UAAU,KACb,KAAK,EAAE,SAAS,GACjB;QACD,kBAAkB,kCACb,UAAU,KACb,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,cAAc,GAC7B;QACD,QAAQ,kCACH,UAAU,KACb,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,SAAS,EACtB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,CAAC,GACf;QACD,IAAI,kCACC,UAAU,KACb,KAAK,EAAE,aAAa,EACpB,YAAY,EAAE,YAAY,GAC3B;QACD,IAAI,kCACC,UAAU,KACb,KAAK,EAAE,aAAa,EACpB,YAAY,EAAE,YAAY,GAC3B;QACD,iBAAiB,kCACZ,UAAU,KACb,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,cAAc,EAC5B,WAAW,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EACrD,eAAe,EAAE,YAAY,EAC7B,eAAe,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAC1D,iBAAiB,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAC7D;KACF;IACD,UAAU,EAAE;QACV,IAAI,kCACC,aAAa,KAChB,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,aAAa,GAC1B;QACD,MAAM,kCACD,aAAa,KAChB,KAAK,EAAE,YAAY,EACnB,YAAY,EAAE,eAAe,GAC9B;QACD,KAAK,kCACA,aAAa,KAChB,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EACvD,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,QAAQ,EACpB,eAAe,EAAE,OAAO,EACxB,QAAQ,EAAE,GAAG,GACd;KACF;CACF,CAAA"}
|
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.
|
|
4
|
+
"version": "0.0.26",
|
|
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
|
}
|