@uni-design-system/uni-core 0.0.5 → 0.0.8
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/README.md +3 -1
- package/dist/cjs/core/color/color.types.d.ts +1 -0
- package/dist/cjs/core/container/index.d.ts +1 -0
- package/dist/cjs/core/container/index.js +1 -0
- package/dist/cjs/core/container/index.js.map +1 -1
- package/dist/cjs/core/theme/index.d.ts +1 -0
- package/dist/cjs/core/theme/index.js +1 -0
- package/dist/cjs/core/theme/index.js.map +1 -1
- package/dist/cjs/core/theme/theme.model.d.ts +2 -0
- package/dist/cjs/core/theme/themes/base.theme.d.ts +2 -0
- package/dist/cjs/core/theme/themes/base.theme.js +97 -0
- package/dist/cjs/core/theme/themes/base.theme.js.map +1 -0
- package/dist/cjs/core/theme/themes/dark.theme.js +2 -5
- package/dist/cjs/core/theme/themes/dark.theme.js.map +1 -1
- package/dist/cjs/core/theme/themes/light.theme.js +2 -11
- package/dist/cjs/core/theme/themes/light.theme.js.map +1 -1
- package/dist/cjs/core/typography/index.d.ts +2 -0
- package/dist/cjs/core/typography/index.js +2 -0
- package/dist/cjs/core/typography/index.js.map +1 -1
- package/dist/cjs/core/typography/text.model.d.ts +14 -0
- package/dist/cjs/core/typography/text.model.js +3 -0
- package/dist/cjs/core/typography/text.model.js.map +1 -0
- package/dist/cjs/core/typography/typography.records.d.ts +2 -0
- package/dist/cjs/core/typography/typography.records.js +16 -0
- package/dist/cjs/core/typography/typography.records.js.map +1 -0
- package/dist/cjs/core/typography/typography.types.d.ts +4 -2
- package/dist/esm/core/color/color.types.d.ts +1 -0
- package/dist/esm/core/container/index.d.ts +1 -0
- package/dist/esm/core/container/index.js +1 -0
- package/dist/esm/core/container/index.js.map +1 -1
- package/dist/esm/core/theme/index.d.ts +1 -0
- package/dist/esm/core/theme/index.js +1 -0
- package/dist/esm/core/theme/index.js.map +1 -1
- package/dist/esm/core/theme/theme.model.d.ts +2 -0
- package/dist/esm/core/theme/themes/base.theme.d.ts +2 -0
- package/dist/esm/core/theme/themes/base.theme.js +94 -0
- package/dist/esm/core/theme/themes/base.theme.js.map +1 -0
- package/dist/esm/core/theme/themes/dark.theme.js +2 -5
- package/dist/esm/core/theme/themes/dark.theme.js.map +1 -1
- package/dist/esm/core/theme/themes/light.theme.js +2 -11
- package/dist/esm/core/theme/themes/light.theme.js.map +1 -1
- package/dist/esm/core/typography/index.d.ts +2 -0
- package/dist/esm/core/typography/index.js +2 -0
- package/dist/esm/core/typography/index.js.map +1 -1
- package/dist/esm/core/typography/text.model.d.ts +14 -0
- package/dist/esm/core/typography/text.model.js +2 -0
- package/dist/esm/core/typography/text.model.js.map +1 -0
- package/dist/esm/core/typography/typography.records.d.ts +2 -0
- package/dist/esm/core/typography/typography.records.js +13 -0
- package/dist/esm/core/typography/typography.records.js.map +1 -0
- package/dist/esm/core/typography/typography.types.d.ts +4 -2
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -9,4 +9,5 @@ export declare type utilColorRoles = 'warn' | 'alert' | 'success' | 'info';
|
|
|
9
9
|
export declare type colorRoles = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'ghost';
|
|
10
10
|
export declare const roleHues: Record<colorRoles, Range>;
|
|
11
11
|
export declare const utilHues: Record<utilColorRoles, Range>;
|
|
12
|
+
export declare type ColorModes = 'base' | 'hover' | 'active' | 'disabled';
|
|
12
13
|
export declare type ColorToken = 'background' | 'background-active' | 'background-brand' | 'background-hover' | 'background-inverse' | 'background-inverse-hover' | 'background-screen' | 'background-selected' | 'background-selected-hover' | 'border-disabled-01' | 'border-disabled-02' | 'border-disabled-03' | 'border-interactive' | 'border-inverse' | 'border-strong-01' | 'border-strong-02' | 'border-strong-03' | 'border-subtle-00' | 'border-subtle-01' | 'border-subtle-02' | 'border-subtle-03' | 'border-subtle-selected-01' | 'border-subtle-selected-02' | 'border-subtle-selected-03' | 'brand-primary' | 'button-primary' | 'button-primary-active' | 'button-primary-hover' | 'button-secondary' | 'button-secondary-active' | 'button-secondary-hover' | 'button-tertiary' | 'button-tertiary-active' | 'button-tertiary-hover' | 'button-danger-primary' | 'button-danger-secondary' | 'button-danger-active' | 'button-danger-hover' | 'button-disabled' | 'button-separator' | 'field-01' | 'field-02' | 'field-03' | 'field-disabled-01' | 'field-disabled-02' | 'field-disabled-03' | 'field-hover-01' | 'field-hover-02' | 'field-hover-03' | 'focus' | 'focus-inverse' | 'focus-inset' | 'highlight' | 'icon-primary' | 'icon-secondary' | 'icon-tertiary' | 'icon-inverse' | 'icon-on-color' | 'icon-on-color-disabled' | 'icon-disabled' | 'icon-subtle' | 'interactive' | 'layer-01' | 'layer-02' | 'layer-03' | 'layer-accent-01' | 'layer-accent-02' | 'layer-accent-03' | 'layer-accent-active-01' | 'layer-accent-active-02' | 'layer-accent-active-03' | 'layer-accent-hover-01' | 'layer-accent-hover-02' | 'layer-accent-hover-03' | 'layer-active-01' | 'layer-active-02' | 'layer-active-03' | 'layer-disabled-01' | 'layer-disabled-02' | 'layer-disabled-03' | 'layer-hover-01' | 'layer-hover-02' | 'layer-hover-03' | 'layer-selected-01' | 'layer-selected-02' | 'layer-selected-03' | 'layer-selected-hover-01' | 'layer-selected-hover-02' | 'layer-selected-hover-03' | 'layer-selected-disabled' | 'layer-selected-inverse' | 'link-primary' | 'link-primary-hover' | 'link-secondary' | 'link-inverse' | 'link-visited' | 'navigation-background' | 'navigation-badge' | 'navigation-border' | 'overlay' | 'screen-background' | 'skeleton-element' | 'skeleton-background' | 'status-online' | 'status-offline' | 'status-busy' | 'support-info' | 'support-warning' | 'support-success' | 'support-error' | 'support-info-inverse' | 'support-warning-inverse' | 'support-success-inverse' | 'support-error-inverse' | 'text-brand' | 'text-primary' | 'text-secondary' | 'text-disabled' | 'text-error' | 'text-ghost' | 'text-helper' | 'text-highlight' | 'text-link' | 'text-inverse' | 'text-on-color' | 'text-placeholder' | 'text-on-color-disabled' | 'text-warning' | 'toggle-off' | 'transparent' | 'shadowColor';
|
|
@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
__exportStar(require("./container.model"), exports);
|
|
18
|
+
__exportStar(require("./container.types"), exports);
|
|
18
19
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/container/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/container/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC;AAClC,oDAAkC"}
|
|
@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
__exportStar(require("./theme.model"), exports);
|
|
18
18
|
__exportStar(require("./theme.records"), exports);
|
|
19
19
|
__exportStar(require("./theme.types"), exports);
|
|
20
|
+
__exportStar(require("./themes/base.theme"), exports);
|
|
20
21
|
__exportStar(require("./themes/dark.theme"), exports);
|
|
21
22
|
__exportStar(require("./themes/light.theme"), exports);
|
|
22
23
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/theme/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,kDAAgC;AAChC,gDAA8B;AAC9B,sDAAoC;AACpC,uDAAqC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/theme/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,kDAAgC;AAChC,gDAA8B;AAC9B,sDAAoC;AACpC,sDAAoC;AACpC,uDAAqC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { TextRole, TextStyle } from '../typography';
|
|
1
2
|
export interface ThemeProps {
|
|
2
3
|
themeId?: string;
|
|
3
4
|
themes?: Record<string, Theme>;
|
|
@@ -7,4 +8,5 @@ export interface Theme {
|
|
|
7
8
|
name: string;
|
|
8
9
|
id: string;
|
|
9
10
|
colors: Record<string, string>;
|
|
11
|
+
typography: Record<TextRole, TextStyle>;
|
|
10
12
|
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BaseTheme = void 0;
|
|
4
|
+
exports.BaseTheme = {
|
|
5
|
+
id: 'BaseTheme',
|
|
6
|
+
name: 'Base Theme',
|
|
7
|
+
colors: {
|
|
8
|
+
primary: '#35A7FF',
|
|
9
|
+
secondary: '#38618C',
|
|
10
|
+
error: '#FFE74C',
|
|
11
|
+
warn: '#FF5964',
|
|
12
|
+
background: '#FFFFFF'
|
|
13
|
+
},
|
|
14
|
+
typography: {
|
|
15
|
+
'headline-1': {
|
|
16
|
+
fontSize: 96,
|
|
17
|
+
fontWeight: 'light',
|
|
18
|
+
letterSpacing: -1.5
|
|
19
|
+
},
|
|
20
|
+
'headline-2': {
|
|
21
|
+
fontSize: 60,
|
|
22
|
+
fontWeight: 'light',
|
|
23
|
+
letterSpacing: -0.1
|
|
24
|
+
},
|
|
25
|
+
'headline-3': {
|
|
26
|
+
fontSize: 48,
|
|
27
|
+
},
|
|
28
|
+
'headline-4': {
|
|
29
|
+
fontSize: 34,
|
|
30
|
+
letterSpacing: 0.25
|
|
31
|
+
},
|
|
32
|
+
'headline-5': {
|
|
33
|
+
fontSize: 24
|
|
34
|
+
},
|
|
35
|
+
'headline-6': {
|
|
36
|
+
fontSize: 20,
|
|
37
|
+
fontWeight: 'medium',
|
|
38
|
+
letterSpacing: 0.15
|
|
39
|
+
},
|
|
40
|
+
'body-1-long': {
|
|
41
|
+
fontSize: 16,
|
|
42
|
+
lineHeight: 22
|
|
43
|
+
},
|
|
44
|
+
'body-1-short': {
|
|
45
|
+
fontSize: 16,
|
|
46
|
+
lineHeight: 24
|
|
47
|
+
},
|
|
48
|
+
'body-2-long': {
|
|
49
|
+
fontSize: 14,
|
|
50
|
+
lineHeight: 18
|
|
51
|
+
},
|
|
52
|
+
'body-2-short': {
|
|
53
|
+
fontSize: 14,
|
|
54
|
+
lineHeight: 20
|
|
55
|
+
},
|
|
56
|
+
title: {
|
|
57
|
+
fontSize: 48
|
|
58
|
+
},
|
|
59
|
+
'subtitle-1': {
|
|
60
|
+
fontSize: 16,
|
|
61
|
+
letterSpacing: 0.15
|
|
62
|
+
},
|
|
63
|
+
'subtitle-2': {
|
|
64
|
+
fontSize: 14,
|
|
65
|
+
fontWeight: 'medium',
|
|
66
|
+
letterSpacing: 0.1
|
|
67
|
+
},
|
|
68
|
+
label: {
|
|
69
|
+
fontSize: 14
|
|
70
|
+
},
|
|
71
|
+
button: {
|
|
72
|
+
fontSize: 14,
|
|
73
|
+
fontWeight: 'medium',
|
|
74
|
+
textTransform: 'uppercase'
|
|
75
|
+
},
|
|
76
|
+
caption: {
|
|
77
|
+
fontSize: 12,
|
|
78
|
+
letterSpacing: 0.4
|
|
79
|
+
},
|
|
80
|
+
overline: {
|
|
81
|
+
fontSize: 10,
|
|
82
|
+
letterSpacing: 1.5,
|
|
83
|
+
textTransform: 'uppercase'
|
|
84
|
+
},
|
|
85
|
+
paragraph: {
|
|
86
|
+
fontSize: 16
|
|
87
|
+
},
|
|
88
|
+
quote: {
|
|
89
|
+
fontSize: 16
|
|
90
|
+
},
|
|
91
|
+
note: {
|
|
92
|
+
fontSize: 14,
|
|
93
|
+
fontStyle: 'italic'
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
//# sourceMappingURL=base.theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/base.theme.ts"],"names":[],"mappings":";;;AAEa,QAAA,SAAS,GAAU;IAC9B,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,SAAS;QACpB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,UAAU,EAAE,SAAS;KACtB;IACD,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,OAAO;YACnB,aAAa,EAAE,CAAC,GAAG;SACpB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,OAAO;YACnB,aAAa,EAAE,CAAC,GAAG;SACpB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;SACb;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,aAAa,EAAE,IAAI;SACpB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;SACb;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,IAAI;SACpB;QACD,aAAa,EAAE;YACb,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,cAAc,EAAE;YACd,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,aAAa,EAAE;YACb,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,cAAc,EAAE;YACd,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;SACb;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,aAAa,EAAE,IAAI;SACpB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,GAAG;SACnB;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;SACb;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,WAAW;SAC3B;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,aAAa,EAAE,GAAG;SACnB;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,EAAE;YACZ,aAAa,EAAE,GAAG;YAClB,aAAa,EAAE,WAAW;SAC3B;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;SACb;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;SACb;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,QAAQ;SACpB;KACF;CACF,CAAA"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.DarkTheme = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
name: 'Dark Theme',
|
|
7
|
-
colors: {}
|
|
8
|
-
};
|
|
4
|
+
const base_theme_1 = require("./base.theme");
|
|
5
|
+
exports.DarkTheme = Object.assign(Object.assign({}, base_theme_1.BaseTheme), { id: 'DarkTheme', name: 'Dark Theme', colors: Object.assign(Object.assign({}, base_theme_1.BaseTheme.colors), { background: '#000000' }) });
|
|
9
6
|
//# sourceMappingURL=dark.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dark.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/dark.theme.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"dark.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/dark.theme.ts"],"names":[],"mappings":";;;AACA,6CAAyC;AAE5B,QAAA,SAAS,mCACjB,sBAAS,KACZ,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,YAAY,EAClB,MAAM,kCACD,sBAAS,CAAC,MAAM,KACnB,UAAU,EAAE,SAAS,OAExB"}
|
|
@@ -1,15 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.LightTheme = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
name: 'Light Theme',
|
|
7
|
-
colors: {
|
|
8
|
-
primary: '#35A7FF',
|
|
9
|
-
secondary: '#38618C',
|
|
10
|
-
error: '#FFE74C',
|
|
11
|
-
warn: '#FF5964',
|
|
12
|
-
background: '#FFFFFF'
|
|
13
|
-
}
|
|
14
|
-
};
|
|
4
|
+
const base_theme_1 = require("./base.theme");
|
|
5
|
+
exports.LightTheme = Object.assign(Object.assign({}, base_theme_1.BaseTheme), { id: 'LightTheme', name: 'Light Theme' });
|
|
15
6
|
//# sourceMappingURL=light.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"light.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/light.theme.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"light.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/light.theme.ts"],"names":[],"mappings":";;;AACA,6CAAyC;AAE5B,QAAA,UAAU,mCAClB,sBAAS,KACZ,EAAE,EAAE,YAAY,EAChB,IAAI,EAAE,aAAa,IACpB"}
|
|
@@ -15,4 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
__exportStar(require("./typography.types"), exports);
|
|
18
|
+
__exportStar(require("./text.model"), exports);
|
|
19
|
+
__exportStar(require("./typography.records"), exports);
|
|
18
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/typography/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/typography/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAmC;AACnC,+CAA4B;AAC5B,uDAAoC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FontWeight, TextDecoration, TextTransform } from './typography.types';
|
|
2
|
+
export interface TextStyle {
|
|
3
|
+
fontFamily?: string;
|
|
4
|
+
fontSize: number;
|
|
5
|
+
fontWeight?: FontWeight;
|
|
6
|
+
fontStyle?: 'italic';
|
|
7
|
+
textTransform?: TextTransform;
|
|
8
|
+
textDecoration?: TextDecoration;
|
|
9
|
+
letterSpacing?: number;
|
|
10
|
+
textIndent?: number;
|
|
11
|
+
lineHeight?: number;
|
|
12
|
+
wordSpacing?: number;
|
|
13
|
+
whiteSpace?: 'nowrap';
|
|
14
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text.model.js","sourceRoot":"","sources":["../../../../src/core/typography/text.model.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.FontWeightMap = void 0;
|
|
4
|
+
exports.FontWeightMap = {
|
|
5
|
+
thin: 100,
|
|
6
|
+
'extra-light': 200,
|
|
7
|
+
light: 200,
|
|
8
|
+
normal: 400,
|
|
9
|
+
medium: 500,
|
|
10
|
+
'semi-bold': 600,
|
|
11
|
+
bold: 700,
|
|
12
|
+
'extra-bold': 800,
|
|
13
|
+
black: 900,
|
|
14
|
+
'extra-black': 950
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=typography.records.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typography.records.js","sourceRoot":"","sources":["../../../../src/core/typography/typography.records.ts"],"names":[],"mappings":";;;AAEa,QAAA,aAAa,GAA+B;IACvD,IAAI,EAAE,GAAG;IACT,aAAa,EAAE,GAAG;IAClB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,WAAW,EAAE,GAAG;IAChB,IAAI,EAAE,GAAG;IACT,YAAY,EAAE,GAAG;IACjB,KAAK,EAAE,GAAG;IACV,aAAa,EAAE,GAAG;CACnB,CAAA"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export declare type classes = 'sanserif' | 'serif' | 'slab' | 'script' | 'display' | 'monospace';
|
|
2
2
|
export declare type families = 'Open-Sans' | 'Times-New-Roman' | 'Noto-Serif-Display';
|
|
3
|
-
export declare type
|
|
3
|
+
export declare type FontWeight = 'thin' | 'extra-light' | 'light' | 'normal' | 'medium' | 'semi-bold' | 'bold' | 'extra-bold' | 'black' | 'extra-black' | number;
|
|
4
4
|
export declare type placement = 'overline' | 'title' | 'underline' | 'body' | 'label' | 'note' | 'footer';
|
|
5
|
-
export declare type
|
|
5
|
+
export declare type TextRole = 'headline-1' | 'headline-2' | 'headline-3' | 'headline-4' | 'headline-5' | 'headline-6' | 'body-1-long' | 'body-1-short' | 'body-2-long' | 'body-2-short' | 'title' | 'subtitle-1' | 'subtitle-2' | 'label' | 'button' | 'caption' | 'overline' | 'paragraph' | 'quote' | 'note';
|
|
6
|
+
export declare type TextDecoration = 'overline' | 'line-through' | 'underline' | 'overline-underline';
|
|
7
|
+
export declare type TextTransform = 'uppercase' | 'lowercase' | 'capitalize';
|
|
@@ -9,4 +9,5 @@ export declare type utilColorRoles = 'warn' | 'alert' | 'success' | 'info';
|
|
|
9
9
|
export declare type colorRoles = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'ghost';
|
|
10
10
|
export declare const roleHues: Record<colorRoles, Range>;
|
|
11
11
|
export declare const utilHues: Record<utilColorRoles, Range>;
|
|
12
|
+
export declare type ColorModes = 'base' | 'hover' | 'active' | 'disabled';
|
|
12
13
|
export declare type ColorToken = 'background' | 'background-active' | 'background-brand' | 'background-hover' | 'background-inverse' | 'background-inverse-hover' | 'background-screen' | 'background-selected' | 'background-selected-hover' | 'border-disabled-01' | 'border-disabled-02' | 'border-disabled-03' | 'border-interactive' | 'border-inverse' | 'border-strong-01' | 'border-strong-02' | 'border-strong-03' | 'border-subtle-00' | 'border-subtle-01' | 'border-subtle-02' | 'border-subtle-03' | 'border-subtle-selected-01' | 'border-subtle-selected-02' | 'border-subtle-selected-03' | 'brand-primary' | 'button-primary' | 'button-primary-active' | 'button-primary-hover' | 'button-secondary' | 'button-secondary-active' | 'button-secondary-hover' | 'button-tertiary' | 'button-tertiary-active' | 'button-tertiary-hover' | 'button-danger-primary' | 'button-danger-secondary' | 'button-danger-active' | 'button-danger-hover' | 'button-disabled' | 'button-separator' | 'field-01' | 'field-02' | 'field-03' | 'field-disabled-01' | 'field-disabled-02' | 'field-disabled-03' | 'field-hover-01' | 'field-hover-02' | 'field-hover-03' | 'focus' | 'focus-inverse' | 'focus-inset' | 'highlight' | 'icon-primary' | 'icon-secondary' | 'icon-tertiary' | 'icon-inverse' | 'icon-on-color' | 'icon-on-color-disabled' | 'icon-disabled' | 'icon-subtle' | 'interactive' | 'layer-01' | 'layer-02' | 'layer-03' | 'layer-accent-01' | 'layer-accent-02' | 'layer-accent-03' | 'layer-accent-active-01' | 'layer-accent-active-02' | 'layer-accent-active-03' | 'layer-accent-hover-01' | 'layer-accent-hover-02' | 'layer-accent-hover-03' | 'layer-active-01' | 'layer-active-02' | 'layer-active-03' | 'layer-disabled-01' | 'layer-disabled-02' | 'layer-disabled-03' | 'layer-hover-01' | 'layer-hover-02' | 'layer-hover-03' | 'layer-selected-01' | 'layer-selected-02' | 'layer-selected-03' | 'layer-selected-hover-01' | 'layer-selected-hover-02' | 'layer-selected-hover-03' | 'layer-selected-disabled' | 'layer-selected-inverse' | 'link-primary' | 'link-primary-hover' | 'link-secondary' | 'link-inverse' | 'link-visited' | 'navigation-background' | 'navigation-badge' | 'navigation-border' | 'overlay' | 'screen-background' | 'skeleton-element' | 'skeleton-background' | 'status-online' | 'status-offline' | 'status-busy' | 'support-info' | 'support-warning' | 'support-success' | 'support-error' | 'support-info-inverse' | 'support-warning-inverse' | 'support-success-inverse' | 'support-error-inverse' | 'text-brand' | 'text-primary' | 'text-secondary' | 'text-disabled' | 'text-error' | 'text-ghost' | 'text-helper' | 'text-highlight' | 'text-link' | 'text-inverse' | 'text-on-color' | 'text-placeholder' | 'text-on-color-disabled' | 'text-warning' | 'toggle-off' | 'transparent' | 'shadowColor';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { TextRole, TextStyle } from '../typography';
|
|
1
2
|
export interface ThemeProps {
|
|
2
3
|
themeId?: string;
|
|
3
4
|
themes?: Record<string, Theme>;
|
|
@@ -7,4 +8,5 @@ export interface Theme {
|
|
|
7
8
|
name: string;
|
|
8
9
|
id: string;
|
|
9
10
|
colors: Record<string, string>;
|
|
11
|
+
typography: Record<TextRole, TextStyle>;
|
|
10
12
|
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
export const BaseTheme = {
|
|
2
|
+
id: 'BaseTheme',
|
|
3
|
+
name: 'Base Theme',
|
|
4
|
+
colors: {
|
|
5
|
+
primary: '#35A7FF',
|
|
6
|
+
secondary: '#38618C',
|
|
7
|
+
error: '#FFE74C',
|
|
8
|
+
warn: '#FF5964',
|
|
9
|
+
background: '#FFFFFF'
|
|
10
|
+
},
|
|
11
|
+
typography: {
|
|
12
|
+
'headline-1': {
|
|
13
|
+
fontSize: 96,
|
|
14
|
+
fontWeight: 'light',
|
|
15
|
+
letterSpacing: -1.5
|
|
16
|
+
},
|
|
17
|
+
'headline-2': {
|
|
18
|
+
fontSize: 60,
|
|
19
|
+
fontWeight: 'light',
|
|
20
|
+
letterSpacing: -0.1
|
|
21
|
+
},
|
|
22
|
+
'headline-3': {
|
|
23
|
+
fontSize: 48,
|
|
24
|
+
},
|
|
25
|
+
'headline-4': {
|
|
26
|
+
fontSize: 34,
|
|
27
|
+
letterSpacing: 0.25
|
|
28
|
+
},
|
|
29
|
+
'headline-5': {
|
|
30
|
+
fontSize: 24
|
|
31
|
+
},
|
|
32
|
+
'headline-6': {
|
|
33
|
+
fontSize: 20,
|
|
34
|
+
fontWeight: 'medium',
|
|
35
|
+
letterSpacing: 0.15
|
|
36
|
+
},
|
|
37
|
+
'body-1-long': {
|
|
38
|
+
fontSize: 16,
|
|
39
|
+
lineHeight: 22
|
|
40
|
+
},
|
|
41
|
+
'body-1-short': {
|
|
42
|
+
fontSize: 16,
|
|
43
|
+
lineHeight: 24
|
|
44
|
+
},
|
|
45
|
+
'body-2-long': {
|
|
46
|
+
fontSize: 14,
|
|
47
|
+
lineHeight: 18
|
|
48
|
+
},
|
|
49
|
+
'body-2-short': {
|
|
50
|
+
fontSize: 14,
|
|
51
|
+
lineHeight: 20
|
|
52
|
+
},
|
|
53
|
+
title: {
|
|
54
|
+
fontSize: 48
|
|
55
|
+
},
|
|
56
|
+
'subtitle-1': {
|
|
57
|
+
fontSize: 16,
|
|
58
|
+
letterSpacing: 0.15
|
|
59
|
+
},
|
|
60
|
+
'subtitle-2': {
|
|
61
|
+
fontSize: 14,
|
|
62
|
+
fontWeight: 'medium',
|
|
63
|
+
letterSpacing: 0.1
|
|
64
|
+
},
|
|
65
|
+
label: {
|
|
66
|
+
fontSize: 14
|
|
67
|
+
},
|
|
68
|
+
button: {
|
|
69
|
+
fontSize: 14,
|
|
70
|
+
fontWeight: 'medium',
|
|
71
|
+
textTransform: 'uppercase'
|
|
72
|
+
},
|
|
73
|
+
caption: {
|
|
74
|
+
fontSize: 12,
|
|
75
|
+
letterSpacing: 0.4
|
|
76
|
+
},
|
|
77
|
+
overline: {
|
|
78
|
+
fontSize: 10,
|
|
79
|
+
letterSpacing: 1.5,
|
|
80
|
+
textTransform: 'uppercase'
|
|
81
|
+
},
|
|
82
|
+
paragraph: {
|
|
83
|
+
fontSize: 16
|
|
84
|
+
},
|
|
85
|
+
quote: {
|
|
86
|
+
fontSize: 16
|
|
87
|
+
},
|
|
88
|
+
note: {
|
|
89
|
+
fontSize: 14,
|
|
90
|
+
fontStyle: 'italic'
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
//# sourceMappingURL=base.theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/base.theme.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,SAAS;QACpB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,UAAU,EAAE,SAAS;KACtB;IACD,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,OAAO;YACnB,aAAa,EAAE,CAAC,GAAG;SACpB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,OAAO;YACnB,aAAa,EAAE,CAAC,GAAG;SACpB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;SACb;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,aAAa,EAAE,IAAI;SACpB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;SACb;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,IAAI;SACpB;QACD,aAAa,EAAE;YACb,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,cAAc,EAAE;YACd,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,aAAa,EAAE;YACb,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,cAAc,EAAE;YACd,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACf;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;SACb;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,aAAa,EAAE,IAAI;SACpB;QACD,YAAY,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,GAAG;SACnB;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;SACb;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,WAAW;SAC3B;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,aAAa,EAAE,GAAG;SACnB;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,EAAE;YACZ,aAAa,EAAE,GAAG;YAClB,aAAa,EAAE,WAAW;SAC3B;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;SACb;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;SACb;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,QAAQ;SACpB;KACF;CACF,CAAA"}
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
name: 'Dark Theme',
|
|
4
|
-
colors: {}
|
|
5
|
-
};
|
|
1
|
+
import { BaseTheme } from './base.theme';
|
|
2
|
+
export const DarkTheme = Object.assign(Object.assign({}, BaseTheme), { id: 'DarkTheme', name: 'Dark Theme', colors: Object.assign(Object.assign({}, BaseTheme.colors), { background: '#000000' }) });
|
|
6
3
|
//# sourceMappingURL=dark.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dark.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/dark.theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dark.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/dark.theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,mCACjB,SAAS,KACZ,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,YAAY,EAClB,MAAM,kCACD,SAAS,CAAC,MAAM,KACnB,UAAU,EAAE,SAAS,MAExB,CAAA"}
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
name: 'Light Theme',
|
|
4
|
-
colors: {
|
|
5
|
-
primary: '#35A7FF',
|
|
6
|
-
secondary: '#38618C',
|
|
7
|
-
error: '#FFE74C',
|
|
8
|
-
warn: '#FF5964',
|
|
9
|
-
background: '#FFFFFF'
|
|
10
|
-
}
|
|
11
|
-
};
|
|
1
|
+
import { BaseTheme } from './base.theme';
|
|
2
|
+
export const LightTheme = Object.assign(Object.assign({}, BaseTheme), { id: 'LightTheme', name: 'Light Theme' });
|
|
12
3
|
//# sourceMappingURL=light.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"light.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/light.theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"light.theme.js","sourceRoot":"","sources":["../../../../../src/core/theme/themes/light.theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,CAAC,MAAM,UAAU,mCAClB,SAAS,KACZ,EAAE,EAAE,YAAY,EAChB,IAAI,EAAE,aAAa,GACpB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FontWeight, TextDecoration, TextTransform } from './typography.types';
|
|
2
|
+
export interface TextStyle {
|
|
3
|
+
fontFamily?: string;
|
|
4
|
+
fontSize: number;
|
|
5
|
+
fontWeight?: FontWeight;
|
|
6
|
+
fontStyle?: 'italic';
|
|
7
|
+
textTransform?: TextTransform;
|
|
8
|
+
textDecoration?: TextDecoration;
|
|
9
|
+
letterSpacing?: number;
|
|
10
|
+
textIndent?: number;
|
|
11
|
+
lineHeight?: number;
|
|
12
|
+
wordSpacing?: number;
|
|
13
|
+
whiteSpace?: 'nowrap';
|
|
14
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text.model.js","sourceRoot":"","sources":["../../../../src/core/typography/text.model.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export const FontWeightMap = {
|
|
2
|
+
thin: 100,
|
|
3
|
+
'extra-light': 200,
|
|
4
|
+
light: 200,
|
|
5
|
+
normal: 400,
|
|
6
|
+
medium: 500,
|
|
7
|
+
'semi-bold': 600,
|
|
8
|
+
bold: 700,
|
|
9
|
+
'extra-bold': 800,
|
|
10
|
+
black: 900,
|
|
11
|
+
'extra-black': 950
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=typography.records.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typography.records.js","sourceRoot":"","sources":["../../../../src/core/typography/typography.records.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAA+B;IACvD,IAAI,EAAE,GAAG;IACT,aAAa,EAAE,GAAG;IAClB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,WAAW,EAAE,GAAG;IAChB,IAAI,EAAE,GAAG;IACT,YAAY,EAAE,GAAG;IACjB,KAAK,EAAE,GAAG;IACV,aAAa,EAAE,GAAG;CACnB,CAAA"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export declare type classes = 'sanserif' | 'serif' | 'slab' | 'script' | 'display' | 'monospace';
|
|
2
2
|
export declare type families = 'Open-Sans' | 'Times-New-Roman' | 'Noto-Serif-Display';
|
|
3
|
-
export declare type
|
|
3
|
+
export declare type FontWeight = 'thin' | 'extra-light' | 'light' | 'normal' | 'medium' | 'semi-bold' | 'bold' | 'extra-bold' | 'black' | 'extra-black' | number;
|
|
4
4
|
export declare type placement = 'overline' | 'title' | 'underline' | 'body' | 'label' | 'note' | 'footer';
|
|
5
|
-
export declare type
|
|
5
|
+
export declare type TextRole = 'headline-1' | 'headline-2' | 'headline-3' | 'headline-4' | 'headline-5' | 'headline-6' | 'body-1-long' | 'body-1-short' | 'body-2-long' | 'body-2-short' | 'title' | 'subtitle-1' | 'subtitle-2' | 'label' | 'button' | 'caption' | 'overline' | 'paragraph' | 'quote' | 'note';
|
|
6
|
+
export declare type TextDecoration = 'overline' | 'line-through' | 'underline' | 'overline-underline';
|
|
7
|
+
export declare type TextTransform = 'uppercase' | 'lowercase' | 'capitalize';
|
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.8",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+https://github.com/uni-design-system/uni-core.git"
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"scripts": {
|
|
15
15
|
"build": "rm -rf dist/ && yarn build:esm && yarn build:cjs",
|
|
16
16
|
"build:esm": "tsc",
|
|
17
|
-
"build:cjs": "tsc --module CommonJS --outDir dist/cjs"
|
|
17
|
+
"build:cjs": "tsc --module CommonJS --outDir dist/cjs",
|
|
18
|
+
"publish": "yarn build && npm publish"
|
|
18
19
|
},
|
|
19
20
|
"keywords": [
|
|
20
21
|
"ui",
|