@akinon/ui-theme 0.2.0 → 0.3.0
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/colors.d.ts.map +1 -0
- package/dist/{index.d.ts.map → cjs/index.d.ts.map} +1 -1
- package/dist/cjs/theme.d.ts.map +1 -0
- package/dist/esm/colors.d.ts +156 -0
- package/dist/esm/colors.d.ts.map +1 -0
- package/dist/esm/colors.js +159 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.d.ts.map +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/theme.d.ts +40 -0
- package/dist/esm/theme.d.ts.map +1 -0
- package/dist/esm/theme.js +139 -0
- package/package.json +15 -9
- package/dist/colors.d.ts.map +0 -1
- package/dist/index.cjs +0 -1
- package/dist/theme.d.ts.map +0 -1
- /package/dist/{colors.d.ts → cjs/colors.d.ts} +0 -0
- /package/dist/{colors.js → cjs/colors.js} +0 -0
- /package/dist/{index.d.ts → cjs/index.d.ts} +0 -0
- /package/dist/{index.js → cjs/index.js} +0 -0
- /package/dist/{theme.d.ts → cjs/theme.d.ts} +0 -0
- /package/dist/{theme.js → cjs/theme.js} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAkBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;CAYf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAajB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAevD,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAavC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAuFnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CAc3B,CAAC"}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
export declare const neutral: {
|
|
2
|
+
'50': string;
|
|
3
|
+
'75': string;
|
|
4
|
+
'100': string;
|
|
5
|
+
'150': string;
|
|
6
|
+
'200': string;
|
|
7
|
+
'250': string;
|
|
8
|
+
'300': string;
|
|
9
|
+
'350': string;
|
|
10
|
+
'375': string;
|
|
11
|
+
'400': string;
|
|
12
|
+
'500': string;
|
|
13
|
+
'600': string;
|
|
14
|
+
'700': string;
|
|
15
|
+
'800': string;
|
|
16
|
+
'900': string;
|
|
17
|
+
'950': string;
|
|
18
|
+
};
|
|
19
|
+
export declare const ebonyClay: {
|
|
20
|
+
'50': string;
|
|
21
|
+
'100': string;
|
|
22
|
+
'150': string;
|
|
23
|
+
'200': string;
|
|
24
|
+
'300': string;
|
|
25
|
+
'350': string;
|
|
26
|
+
'375': string;
|
|
27
|
+
'400': string;
|
|
28
|
+
'450': string;
|
|
29
|
+
'475': string;
|
|
30
|
+
'500': string;
|
|
31
|
+
'550': string;
|
|
32
|
+
'600': string;
|
|
33
|
+
'700': string;
|
|
34
|
+
'800': string;
|
|
35
|
+
'900': string;
|
|
36
|
+
'950': string;
|
|
37
|
+
};
|
|
38
|
+
export declare const gray: {
|
|
39
|
+
'100': string;
|
|
40
|
+
'200': string;
|
|
41
|
+
'300': string;
|
|
42
|
+
'400': string;
|
|
43
|
+
'500': string;
|
|
44
|
+
'600': string;
|
|
45
|
+
'700': string;
|
|
46
|
+
'800': string;
|
|
47
|
+
'900': string;
|
|
48
|
+
'925': string;
|
|
49
|
+
'950': string;
|
|
50
|
+
};
|
|
51
|
+
export declare const red: {
|
|
52
|
+
'50': string;
|
|
53
|
+
'100': string;
|
|
54
|
+
'200': string;
|
|
55
|
+
'300': string;
|
|
56
|
+
'400': string;
|
|
57
|
+
'500': string;
|
|
58
|
+
'600': string;
|
|
59
|
+
'700': string;
|
|
60
|
+
'800': string;
|
|
61
|
+
'900': string;
|
|
62
|
+
'950': string;
|
|
63
|
+
};
|
|
64
|
+
export declare const green: {
|
|
65
|
+
'50': string;
|
|
66
|
+
'100': string;
|
|
67
|
+
'200': string;
|
|
68
|
+
'300': string;
|
|
69
|
+
'400': string;
|
|
70
|
+
'500': string;
|
|
71
|
+
'600': string;
|
|
72
|
+
'700': string;
|
|
73
|
+
'800': string;
|
|
74
|
+
'900': string;
|
|
75
|
+
'950': string;
|
|
76
|
+
};
|
|
77
|
+
export declare const blue: {
|
|
78
|
+
'50': string;
|
|
79
|
+
'100': string;
|
|
80
|
+
'200': string;
|
|
81
|
+
'300': string;
|
|
82
|
+
'400': string;
|
|
83
|
+
'500': string;
|
|
84
|
+
'600': string;
|
|
85
|
+
'700': string;
|
|
86
|
+
'800': string;
|
|
87
|
+
'900': string;
|
|
88
|
+
'950': string;
|
|
89
|
+
};
|
|
90
|
+
export declare const purple: {
|
|
91
|
+
'50': string;
|
|
92
|
+
'100': string;
|
|
93
|
+
'200': string;
|
|
94
|
+
'300': string;
|
|
95
|
+
'400': string;
|
|
96
|
+
'500': string;
|
|
97
|
+
'600': string;
|
|
98
|
+
'700': string;
|
|
99
|
+
'800': string;
|
|
100
|
+
'900': string;
|
|
101
|
+
'950': string;
|
|
102
|
+
};
|
|
103
|
+
export declare const pink: {
|
|
104
|
+
'50': string;
|
|
105
|
+
'100': string;
|
|
106
|
+
'200': string;
|
|
107
|
+
'300': string;
|
|
108
|
+
'400': string;
|
|
109
|
+
'500': string;
|
|
110
|
+
'600': string;
|
|
111
|
+
'700': string;
|
|
112
|
+
'800': string;
|
|
113
|
+
'900': string;
|
|
114
|
+
'950': string;
|
|
115
|
+
};
|
|
116
|
+
export declare const azure: {
|
|
117
|
+
'50': string;
|
|
118
|
+
'100': string;
|
|
119
|
+
'200': string;
|
|
120
|
+
'300': string;
|
|
121
|
+
'400': string;
|
|
122
|
+
'500': string;
|
|
123
|
+
'600': string;
|
|
124
|
+
'750': string;
|
|
125
|
+
'700': string;
|
|
126
|
+
'800': string;
|
|
127
|
+
'900': string;
|
|
128
|
+
'950': string;
|
|
129
|
+
};
|
|
130
|
+
export declare const orange: {
|
|
131
|
+
'50': string;
|
|
132
|
+
'100': string;
|
|
133
|
+
'200': string;
|
|
134
|
+
'300': string;
|
|
135
|
+
'400': string;
|
|
136
|
+
'500': string;
|
|
137
|
+
'600': string;
|
|
138
|
+
'700': string;
|
|
139
|
+
'800': string;
|
|
140
|
+
'900': string;
|
|
141
|
+
'950': string;
|
|
142
|
+
};
|
|
143
|
+
export declare const akinon: {
|
|
144
|
+
'50': string;
|
|
145
|
+
'100': string;
|
|
146
|
+
'200': string;
|
|
147
|
+
'300': string;
|
|
148
|
+
'400': string;
|
|
149
|
+
'500': string;
|
|
150
|
+
'600': string;
|
|
151
|
+
'700': string;
|
|
152
|
+
'800': string;
|
|
153
|
+
'900': string;
|
|
154
|
+
'950': string;
|
|
155
|
+
};
|
|
156
|
+
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAkBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;CAYf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAajB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
// Tailwind like colors.
|
|
2
|
+
export const neutral = {
|
|
3
|
+
'50': '#ffffff',
|
|
4
|
+
'75': '#fbfcfd',
|
|
5
|
+
'100': '#f5f5f5',
|
|
6
|
+
'150': '#f1f3f9',
|
|
7
|
+
'200': '#e5e5e5',
|
|
8
|
+
'250': '#d6e1e3',
|
|
9
|
+
'300': '#d4d4d4',
|
|
10
|
+
'350': '#c8daec',
|
|
11
|
+
'375': '#bfbfbf',
|
|
12
|
+
'400': '#a3a3a3',
|
|
13
|
+
'500': '#737373',
|
|
14
|
+
'600': '#525252',
|
|
15
|
+
'700': '#404040',
|
|
16
|
+
'800': '#262626',
|
|
17
|
+
'900': '#171717',
|
|
18
|
+
'950': '#0a0a0a'
|
|
19
|
+
};
|
|
20
|
+
export const ebonyClay = {
|
|
21
|
+
'50': '#677084',
|
|
22
|
+
'100': '#5c6880',
|
|
23
|
+
'150': '#58669a',
|
|
24
|
+
'200': '#515c7c',
|
|
25
|
+
'300': '#465178',
|
|
26
|
+
'350': '#43464f',
|
|
27
|
+
'375': '#3f4b5c',
|
|
28
|
+
'400': '#3d4561', // applied from design: filters card bg
|
|
29
|
+
'450': '#333b57',
|
|
30
|
+
'475': '#2b344c',
|
|
31
|
+
'500': '#293245', // applied from design: layout color
|
|
32
|
+
'550': '#262e47',
|
|
33
|
+
'600': '#232b3b', // applied from design: header input bg
|
|
34
|
+
'700': '#1d2331',
|
|
35
|
+
'800': '#171d27',
|
|
36
|
+
'900': '#11171e',
|
|
37
|
+
'950': '#0c111a'
|
|
38
|
+
};
|
|
39
|
+
export const gray = {
|
|
40
|
+
'100': '#f5f5f5',
|
|
41
|
+
'200': '#e5e5e5',
|
|
42
|
+
'300': '#d4d4d4',
|
|
43
|
+
'400': '#a3a3a3',
|
|
44
|
+
'500': '#788195', // applied from design: header text placeholder
|
|
45
|
+
'600': '#525252',
|
|
46
|
+
'700': '#404040',
|
|
47
|
+
'800': '#262626',
|
|
48
|
+
'900': '#3b404c', // applied from design: layout border
|
|
49
|
+
'925': '#36373b',
|
|
50
|
+
'950': '#171717'
|
|
51
|
+
};
|
|
52
|
+
export const red = {
|
|
53
|
+
'50': '#fffaf5',
|
|
54
|
+
'100': '#fcf3eb',
|
|
55
|
+
'200': '#fce0cf',
|
|
56
|
+
'300': '#fac7b1',
|
|
57
|
+
'400': '#f58d7a',
|
|
58
|
+
'500': '#ef4444',
|
|
59
|
+
'600': '#d93636',
|
|
60
|
+
'700': '#b32525',
|
|
61
|
+
'800': '#8f1818',
|
|
62
|
+
'900': '#6b0e0e',
|
|
63
|
+
'950': '#450606'
|
|
64
|
+
};
|
|
65
|
+
export const green = {
|
|
66
|
+
'50': '#fafcf2',
|
|
67
|
+
'100': '#f5fae6',
|
|
68
|
+
'200': '#e5f5c1',
|
|
69
|
+
'300': '#d2ed9d',
|
|
70
|
+
'400': '#a9e05c',
|
|
71
|
+
'500': '#7ed321',
|
|
72
|
+
'600': '#6abf1b',
|
|
73
|
+
'700': '#529e13',
|
|
74
|
+
'800': '#3d800d',
|
|
75
|
+
'900': '#275e07',
|
|
76
|
+
'950': '#163d03'
|
|
77
|
+
};
|
|
78
|
+
export const blue = {
|
|
79
|
+
'50': '#f5fcff',
|
|
80
|
+
'100': '#ebf8ff',
|
|
81
|
+
'200': '#cceafc',
|
|
82
|
+
'300': '#afd9fa',
|
|
83
|
+
'400': '#74b4f7',
|
|
84
|
+
'500': '#3b82f6',
|
|
85
|
+
'600': '#306fdb',
|
|
86
|
+
'700': '#2153b8',
|
|
87
|
+
'800': '#153b94',
|
|
88
|
+
'900': '#0c286e',
|
|
89
|
+
'950': '#051647'
|
|
90
|
+
};
|
|
91
|
+
export const purple = {
|
|
92
|
+
'50': '#fbf7fc',
|
|
93
|
+
'100': '#f5eff8',
|
|
94
|
+
'200': '#ebdef0',
|
|
95
|
+
'300': '#dbc4e3',
|
|
96
|
+
'400': '#c7a1d1',
|
|
97
|
+
'500': '#ad7abb',
|
|
98
|
+
'600': '#915c9d',
|
|
99
|
+
'700': '#72467b',
|
|
100
|
+
'800': '#633e6a',
|
|
101
|
+
'900': '#543659',
|
|
102
|
+
'950': '#341b37'
|
|
103
|
+
};
|
|
104
|
+
export const pink = {
|
|
105
|
+
'50': '#fff7fd',
|
|
106
|
+
'100': '#fcebf7',
|
|
107
|
+
'200': '#facfec',
|
|
108
|
+
'300': '#f7b2df',
|
|
109
|
+
'400': '#f27ec0',
|
|
110
|
+
'500': '#ec4899',
|
|
111
|
+
'600': '#d63c87',
|
|
112
|
+
'700': '#b32965',
|
|
113
|
+
'800': '#8f1b49',
|
|
114
|
+
'900': '#6b0f31',
|
|
115
|
+
'950': '#45061a'
|
|
116
|
+
};
|
|
117
|
+
// This will be our main primary.
|
|
118
|
+
export const azure = {
|
|
119
|
+
'50': '#eef5ff',
|
|
120
|
+
'100': '#d9e8ff',
|
|
121
|
+
'200': '#bcd8ff',
|
|
122
|
+
'300': '#8ec0ff',
|
|
123
|
+
'400': '#599cff',
|
|
124
|
+
'500': '#4482ff', // applied from design: primary button color
|
|
125
|
+
'600': '#1b55f5',
|
|
126
|
+
'750': '#1890ff',
|
|
127
|
+
'700': '#1440e1',
|
|
128
|
+
'800': '#1734b6',
|
|
129
|
+
'900': '#19318f',
|
|
130
|
+
'950': '#142057'
|
|
131
|
+
};
|
|
132
|
+
// This will be our secondary color.
|
|
133
|
+
export const orange = {
|
|
134
|
+
'50': '#fffcf2',
|
|
135
|
+
'100': '#fff8e6',
|
|
136
|
+
'200': '#ffebbf',
|
|
137
|
+
'300': '#fcd997',
|
|
138
|
+
'400': '#fcb44e',
|
|
139
|
+
'500': '#f98003',
|
|
140
|
+
'600': '#e06e02',
|
|
141
|
+
'700': '#ba5202',
|
|
142
|
+
'800': '#963d02',
|
|
143
|
+
'900': '#702900',
|
|
144
|
+
'950': '#471700'
|
|
145
|
+
};
|
|
146
|
+
// Akinon brand color and shades.
|
|
147
|
+
export const akinon = {
|
|
148
|
+
'50': '#fcf2f7',
|
|
149
|
+
'100': '#fae6ef',
|
|
150
|
+
'200': '#f5c4d7',
|
|
151
|
+
'300': '#eda1b9',
|
|
152
|
+
'400': '#de5f77',
|
|
153
|
+
'500': '#d2282e',
|
|
154
|
+
'600': '#bd2025',
|
|
155
|
+
'700': '#9c161a',
|
|
156
|
+
'800': '#7d0e11',
|
|
157
|
+
'900': '#5e080a',
|
|
158
|
+
'950': '#3d0405'
|
|
159
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './theme';
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { theme as antdTheme, ThemeConfig } from 'antd';
|
|
2
|
+
export declare const fontSize = 16;
|
|
3
|
+
type ColorName = 'akinon' | 'azure' | 'orange' | 'red' | 'green' | 'purple' | 'gray' | 'ebonyClay' | 'neutral';
|
|
4
|
+
type Color = {
|
|
5
|
+
[key: string]: string;
|
|
6
|
+
};
|
|
7
|
+
type Colors = Record<ColorName, Color>;
|
|
8
|
+
export type DefaultThemeConfig = ThemeConfig & {
|
|
9
|
+
colors: Colors;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Non-editable akinon theme object.
|
|
13
|
+
* This object contains both our theme values and
|
|
14
|
+
* antd's default theme values.
|
|
15
|
+
*
|
|
16
|
+
* You can use https://ant.design/theme-editor tool
|
|
17
|
+
* to learn about properties and their effects.
|
|
18
|
+
*/
|
|
19
|
+
export declare const theme: DefaultThemeConfig;
|
|
20
|
+
/**
|
|
21
|
+
* Used to access antd's token values from react components.
|
|
22
|
+
* For detailed usage see,
|
|
23
|
+
* https://ant.design/docs/react/customize-theme#consume-design-token
|
|
24
|
+
*/
|
|
25
|
+
export declare const useToken: typeof antdTheme.useToken;
|
|
26
|
+
/**
|
|
27
|
+
* Returns css variable objects for our
|
|
28
|
+
* theme's custom color palette.
|
|
29
|
+
*
|
|
30
|
+
* Outputs css variables like:
|
|
31
|
+
* --color-primary-100: #f0f8ff;
|
|
32
|
+
* --color-body-fg: #ffffff;
|
|
33
|
+
* --color-success-500: #52c41a;
|
|
34
|
+
* --color-{object_key}-{object_key}: {color_value};
|
|
35
|
+
*/
|
|
36
|
+
export declare const getCssVariables: () => {
|
|
37
|
+
[key: string]: string;
|
|
38
|
+
};
|
|
39
|
+
export {};
|
|
40
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAevD,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAavC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAuFnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CAc3B,CAAC"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { theme as antdTheme } from 'antd';
|
|
2
|
+
import { akinon, azure, ebonyClay, gray, green, neutral, orange, purple, red } from './colors';
|
|
3
|
+
// antd works with numbers. use this to convert px to rem.
|
|
4
|
+
export const fontSize = 16;
|
|
5
|
+
const colors = {
|
|
6
|
+
akinon,
|
|
7
|
+
azure,
|
|
8
|
+
orange,
|
|
9
|
+
red,
|
|
10
|
+
green,
|
|
11
|
+
purple,
|
|
12
|
+
gray,
|
|
13
|
+
ebonyClay,
|
|
14
|
+
neutral
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Non-editable akinon theme object.
|
|
18
|
+
* This object contains both our theme values and
|
|
19
|
+
* antd's default theme values.
|
|
20
|
+
*
|
|
21
|
+
* You can use https://ant.design/theme-editor tool
|
|
22
|
+
* to learn about properties and their effects.
|
|
23
|
+
*/
|
|
24
|
+
export const theme = {
|
|
25
|
+
// We use dark algorithm from antd by default,
|
|
26
|
+
// since our applications are dark themed.
|
|
27
|
+
algorithm: antdTheme.darkAlgorithm,
|
|
28
|
+
colors,
|
|
29
|
+
// We also need to override antd styles with
|
|
30
|
+
// our current color palette.
|
|
31
|
+
token: {
|
|
32
|
+
colorTextBase: colors.neutral['100'],
|
|
33
|
+
colorText: colors.neutral['100'],
|
|
34
|
+
colorTextSecondary: colors.gray['500'],
|
|
35
|
+
colorTextPlaceholder: colors.gray['500'],
|
|
36
|
+
colorPrimary: colors.azure['500'],
|
|
37
|
+
colorError: colors.red['500'],
|
|
38
|
+
colorBgLayout: colors.ebonyClay['500'], // effects layout bg
|
|
39
|
+
colorBgContainer: colors.ebonyClay['600'], // effects card bg, table bg, input bg
|
|
40
|
+
colorBgElevated: colors.ebonyClay['400'], // effects dropdown bg, select bg, notification bg
|
|
41
|
+
controlItemBgHover: colors.ebonyClay['200'], // effects item bg in dropdown item when hovered
|
|
42
|
+
controlItemBgActive: colors.ebonyClay['300'], // effects active item bg such in dropdown item
|
|
43
|
+
controlItemBgActiveHover: colors.ebonyClay['300'], // effects active item bg such in dropdown item when hovered
|
|
44
|
+
colorBgSpotlight: colors.ebonyClay['600'], //TODO: bg color of tooltip?
|
|
45
|
+
colorBorder: colors.ebonyClay['700'],
|
|
46
|
+
fontFamily: "'Jost Variable'," + antdTheme.getDesignToken().fontFamily,
|
|
47
|
+
fontSize: fontSize * 0.875
|
|
48
|
+
},
|
|
49
|
+
components: {
|
|
50
|
+
Layout: {
|
|
51
|
+
headerBg: colors.ebonyClay['500'],
|
|
52
|
+
siderBg: colors.ebonyClay['500']
|
|
53
|
+
},
|
|
54
|
+
Dropdown: {
|
|
55
|
+
colorPrimary: colors.neutral['100'], // primary color (azure500) doesn't work well with dropdown bg
|
|
56
|
+
controlPaddingHorizontal: fontSize
|
|
57
|
+
},
|
|
58
|
+
Menu: {
|
|
59
|
+
darkItemBg: colors.ebonyClay['500'],
|
|
60
|
+
darkSubMenuItemBg: colors.ebonyClay['600'],
|
|
61
|
+
darkItemSelectedBg: colors.ebonyClay['700'],
|
|
62
|
+
itemBorderRadius: 0,
|
|
63
|
+
itemMarginBlock: 0,
|
|
64
|
+
itemMarginInline: 0,
|
|
65
|
+
darkItemColor: colors.gray['500'],
|
|
66
|
+
itemHeight: fontSize * 3.25
|
|
67
|
+
},
|
|
68
|
+
Breadcrumb: {
|
|
69
|
+
fontSize: fontSize * 0.625,
|
|
70
|
+
lastItemColor: colors.azure['500']
|
|
71
|
+
},
|
|
72
|
+
Card: {
|
|
73
|
+
colorBgContainer: colors.ebonyClay['450'],
|
|
74
|
+
colorTextDescription: colors.neutral['100'],
|
|
75
|
+
headerFontSize: fontSize * 1.25,
|
|
76
|
+
fontSize: fontSize * 0.875
|
|
77
|
+
},
|
|
78
|
+
Collapse: {
|
|
79
|
+
headerPadding: '0 0 12px',
|
|
80
|
+
// because of ghost prop, we need to use important
|
|
81
|
+
contentPadding: '0 0 24px !important',
|
|
82
|
+
fontSizeIcon: fontSize * 1.65,
|
|
83
|
+
fontSize: fontSize
|
|
84
|
+
},
|
|
85
|
+
Form: {
|
|
86
|
+
itemMarginBottom: 16,
|
|
87
|
+
labelColor: colors.neutral['100'],
|
|
88
|
+
verticalLabelPadding: 4
|
|
89
|
+
},
|
|
90
|
+
Select: {
|
|
91
|
+
colorTextDisabled: colors.ebonyClay['350'],
|
|
92
|
+
colorBgContainerDisabled: colors.gray['925'],
|
|
93
|
+
colorBgContainer: colors.ebonyClay['475'],
|
|
94
|
+
fontSizeLG: fontSize * 0.875,
|
|
95
|
+
colorBorder: colors.ebonyClay['550'],
|
|
96
|
+
lineWidth: 2
|
|
97
|
+
},
|
|
98
|
+
Input: {
|
|
99
|
+
colorBgContainer: colors.ebonyClay['475'],
|
|
100
|
+
fontSizeLG: fontSize * 0.875,
|
|
101
|
+
colorBorder: colors.ebonyClay['550'],
|
|
102
|
+
lineWidth: 2
|
|
103
|
+
},
|
|
104
|
+
InputNumber: {
|
|
105
|
+
colorBgContainer: colors.ebonyClay['475'],
|
|
106
|
+
fontSizeLG: fontSize * 0.875,
|
|
107
|
+
colorBorder: colors.ebonyClay['550'],
|
|
108
|
+
lineWidth: 2
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
/**
|
|
113
|
+
* Used to access antd's token values from react components.
|
|
114
|
+
* For detailed usage see,
|
|
115
|
+
* https://ant.design/docs/react/customize-theme#consume-design-token
|
|
116
|
+
*/
|
|
117
|
+
export const useToken = antdTheme.useToken;
|
|
118
|
+
/**
|
|
119
|
+
* Returns css variable objects for our
|
|
120
|
+
* theme's custom color palette.
|
|
121
|
+
*
|
|
122
|
+
* Outputs css variables like:
|
|
123
|
+
* --color-primary-100: #f0f8ff;
|
|
124
|
+
* --color-body-fg: #ffffff;
|
|
125
|
+
* --color-success-500: #52c41a;
|
|
126
|
+
* --color-{object_key}-{object_key}: {color_value};
|
|
127
|
+
*/
|
|
128
|
+
export const getCssVariables = () => {
|
|
129
|
+
const { colors } = theme;
|
|
130
|
+
const prefix = '--color';
|
|
131
|
+
const result = {};
|
|
132
|
+
for (const [colorType, colorObject] of Object.entries(colors)) {
|
|
133
|
+
for (const [colorShade, colorValue] of Object.entries(colorObject)) {
|
|
134
|
+
const variableName = `${prefix}-${colorType}-${colorShade}`;
|
|
135
|
+
result[variableName] = colorValue;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
return result;
|
|
139
|
+
};
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Akinon UI's default theme values.",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"main": "dist/index.js",
|
|
8
|
-
"module": "dist/index.js",
|
|
7
|
+
"main": "dist/esm/index.js",
|
|
8
|
+
"module": "dist/esm/index.js",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist"
|
|
11
11
|
],
|
|
@@ -14,8 +14,10 @@
|
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"clean-package": "2.2.0",
|
|
17
|
+
"copyfiles": "^2.4.1",
|
|
18
|
+
"rimraf": "^5.0.5",
|
|
17
19
|
"typescript": "^5.2.2",
|
|
18
|
-
"@akinon/vite-config": "
|
|
20
|
+
"@akinon/vite-config": "0.2.0",
|
|
19
21
|
"@akinon/eslint-config": "0.1.0",
|
|
20
22
|
"@akinon/typescript-config": "0.0.0"
|
|
21
23
|
},
|
|
@@ -24,17 +26,21 @@
|
|
|
24
26
|
"react-dom": ">=18"
|
|
25
27
|
},
|
|
26
28
|
"clean-package": "../../../clean-package.config.json",
|
|
27
|
-
"types": "dist/index.d.ts",
|
|
29
|
+
"types": "dist/esm/index.d.ts",
|
|
28
30
|
"exports": {
|
|
29
31
|
".": {
|
|
30
|
-
"types": "./dist/index.d.ts",
|
|
31
|
-
"import": "./dist/index.js",
|
|
32
|
-
"require": "./dist/index.
|
|
32
|
+
"types": "./dist/esm/index.d.ts",
|
|
33
|
+
"import": "./dist/esm/index.js",
|
|
34
|
+
"require": "./dist/cjs/index.js"
|
|
33
35
|
},
|
|
34
36
|
"./package.json": "./package.json"
|
|
35
37
|
},
|
|
36
38
|
"scripts": {
|
|
37
|
-
"build": "
|
|
39
|
+
"build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
|
|
40
|
+
"build:esm": "tsc --outDir dist/esm",
|
|
41
|
+
"build:commonjs": "tsc --module commonjs --outDir dist/cjs",
|
|
42
|
+
"copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
|
|
43
|
+
"clean": "rimraf dist/",
|
|
38
44
|
"lint": "eslint *.ts*",
|
|
39
45
|
"test": "vitest run",
|
|
40
46
|
"test:ui": "vitest --ui",
|
package/dist/colors.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAkBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;CAYf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAajB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
|
package/dist/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("antd"),y={50:"#ffffff",75:"#fbfcfd",100:"#f5f5f5",150:"#f1f3f9",200:"#e5e5e5",250:"#d6e1e3",300:"#d4d4d4",350:"#c8daec",375:"#bfbfbf",400:"#a3a3a3",500:"#737373",600:"#525252",700:"#404040",800:"#262626",900:"#171717",950:"#0a0a0a"},s={50:"#677084",100:"#5c6880",150:"#58669a",200:"#515c7c",300:"#465178",350:"#43464f",375:"#3f4b5c",400:"#3d4561",450:"#333b57",475:"#2b344c",500:"#293245",550:"#262e47",600:"#232b3b",700:"#1d2331",800:"#171d27",900:"#11171e",950:"#0c111a"},g={100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#788195",600:"#525252",700:"#404040",800:"#262626",900:"#3b404c",925:"#36373b",950:"#171717"},C={50:"#fffaf5",100:"#fcf3eb",200:"#fce0cf",300:"#fac7b1",400:"#f58d7a",500:"#ef4444",600:"#d93636",700:"#b32525",800:"#8f1818",900:"#6b0e0e",950:"#450606"},m={50:"#fafcf2",100:"#f5fae6",200:"#e5f5c1",300:"#d2ed9d",400:"#a9e05c",500:"#7ed321",600:"#6abf1b",700:"#529e13",800:"#3d800d",900:"#275e07",950:"#163d03"},u={50:"#fbf7fc",100:"#f5eff8",200:"#ebdef0",300:"#dbc4e3",400:"#c7a1d1",500:"#ad7abb",600:"#915c9d",700:"#72467b",800:"#633e6a",900:"#543659",950:"#341b37"},B={50:"#eef5ff",100:"#d9e8ff",200:"#bcd8ff",300:"#8ec0ff",400:"#599cff",500:"#4482ff",600:"#1b55f5",750:"#1890ff",700:"#1440e1",800:"#1734b6",900:"#19318f",950:"#142057"},S={50:"#fffcf2",100:"#fff8e6",200:"#ffebbf",300:"#fcd997",400:"#fcb44e",500:"#f98003",600:"#e06e02",700:"#ba5202",800:"#963d02",900:"#702900",950:"#471700"},h={50:"#fcf2f7",100:"#fae6ef",200:"#f5c4d7",300:"#eda1b9",400:"#de5f77",500:"#d2282e",600:"#bd2025",700:"#9c161a",800:"#7d0e11",900:"#5e080a",950:"#3d0405"},o=16,e={akinon:h,azure:B,orange:S,red:C,green:m,purple:u,gray:g,ebonyClay:s,neutral:y},t={algorithm:r.theme.darkAlgorithm,colors:e,token:{colorTextBase:e.neutral[100],colorText:e.neutral[100],colorTextSecondary:e.gray[500],colorTextPlaceholder:e.gray[500],colorPrimary:e.azure[500],colorError:e.red[500],colorBgLayout:e.ebonyClay[500],colorBgContainer:e.ebonyClay[600],colorBgElevated:e.ebonyClay[400],controlItemBgHover:e.ebonyClay[200],controlItemBgActive:e.ebonyClay[300],controlItemBgActiveHover:e.ebonyClay[300],colorBgSpotlight:e.ebonyClay[600],colorBorder:e.ebonyClay[700],fontFamily:"'Jost Variable',"+r.theme.getDesignToken().fontFamily,fontSize:o*.875},components:{Layout:{headerBg:e.ebonyClay[500],siderBg:e.ebonyClay[500]},Dropdown:{colorPrimary:e.neutral[100],controlPaddingHorizontal:o},Menu:{darkItemBg:e.ebonyClay[500],darkSubMenuItemBg:e.ebonyClay[600],darkItemSelectedBg:e.ebonyClay[700],itemBorderRadius:0,itemMarginBlock:0,itemMarginInline:0,darkItemColor:e.gray[500],itemHeight:o*3.25},Breadcrumb:{fontSize:o*.625,lastItemColor:e.azure[500]},Card:{colorBgContainer:e.ebonyClay[450],colorTextDescription:e.neutral[100],headerFontSize:o*1.25,fontSize:o*.875},Collapse:{headerPadding:"0 0 12px",contentPadding:"0 0 24px !important",fontSizeIcon:o*1.65,fontSize:o},Form:{itemMarginBottom:16,labelColor:e.neutral[100],verticalLabelPadding:4},Select:{colorTextDisabled:e.ebonyClay[350],colorBgContainerDisabled:e.gray[925],colorBgContainer:e.ebonyClay[475],fontSizeLG:o*.875,colorBorder:e.ebonyClay[550],lineWidth:2},Input:{colorBgContainer:e.ebonyClay[475],fontSizeLG:o*.875,colorBorder:e.ebonyClay[550],lineWidth:2},InputNumber:{colorBgContainer:e.ebonyClay[475],fontSizeLG:o*.875,colorBorder:e.ebonyClay[550],lineWidth:2}}},p=r.theme.useToken,z=()=>{const{colors:n}=t,c="--color",a={};for(const[f,l]of Object.entries(n))for(const[d,b]of Object.entries(l)){const i=`${c}-${f}-${d}`;a[i]=b}return a};exports.fontSize=o;exports.getCssVariables=z;exports.theme=t;exports.useToken=p;
|
package/dist/theme.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAevD,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAavC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAuFnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CAc3B,CAAC"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|