pixelize-design-library 1.1.93 → 1.1.94

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.
Files changed (30) hide show
  1. package/dist/Components/Button/Button.d.ts +1 -1
  2. package/dist/Components/Button/Button.js +4 -4
  3. package/dist/Components/Button/ButtonProps.d.ts +1 -0
  4. package/dist/Components/Common/ErrorMessage.js +5 -1
  5. package/dist/Components/Common/FormLabel.js +2 -6
  6. package/dist/Components/Input/TextInput.d.ts +1 -1
  7. package/dist/Components/Input/TextInput.js +11 -12
  8. package/dist/Components/Input/TextInputProps.d.ts +3 -4
  9. package/dist/Components/KaTable/CustomHeader.d.ts +14 -0
  10. package/dist/Components/KaTable/CustomHeader.js +69 -0
  11. package/dist/Components/KaTable/KaTable.d.ts +13 -0
  12. package/dist/Components/KaTable/KaTable.js +111 -0
  13. package/dist/Components/KaTable/KaTableProps.d.ts +23 -0
  14. package/dist/Components/KaTable/KaTableProps.js +2 -0
  15. package/dist/Components/KaTable/SelectionCell.d.ts +8 -0
  16. package/dist/Components/KaTable/SelectionCell.js +38 -0
  17. package/dist/Components/KaTable/SelectionHeader.d.ts +3 -0
  18. package/dist/Components/KaTable/SelectionHeader.js +56 -0
  19. package/dist/Components/KaTable/ka-table.css +27 -0
  20. package/dist/Components/KaTable/useMergedChildComponents.d.ts +14 -0
  21. package/dist/Components/KaTable/useMergedChildComponents.js +224 -0
  22. package/dist/Pages/KaTableExample.d.ts +3 -0
  23. package/dist/Pages/KaTableExample.js +259 -0
  24. package/dist/Pages/button.js +7 -3
  25. package/dist/Pages/input.js +10 -5
  26. package/dist/Theme/Default/fonts.d.ts +35 -0
  27. package/dist/Theme/Default/fonts.js +37 -0
  28. package/dist/Theme/Default/palette.d.ts +145 -6
  29. package/dist/Theme/Default/palette.js +244 -105
  30. package/package.json +1 -1
@@ -10,6 +10,57 @@ declare const palette: {
10
10
  700: string;
11
11
  800: string;
12
12
  900: string;
13
+ opacity: {
14
+ 4: string;
15
+ 8: string;
16
+ 16: string;
17
+ 24: string;
18
+ 32: string;
19
+ 40: string;
20
+ 48: string;
21
+ };
22
+ };
23
+ secondary: {
24
+ 50: string;
25
+ 100: string;
26
+ 200: string;
27
+ 300: string;
28
+ 400: string;
29
+ 500: string;
30
+ 600: string;
31
+ 700: string;
32
+ 800: string;
33
+ 900: string;
34
+ opacity: {
35
+ 4: string;
36
+ 8: string;
37
+ 16: string;
38
+ 24: string;
39
+ 32: string;
40
+ 40: string;
41
+ 48: string;
42
+ };
43
+ };
44
+ tertiary: {
45
+ 50: string;
46
+ 100: string;
47
+ 200: string;
48
+ 300: string;
49
+ 400: string;
50
+ 500: string;
51
+ 600: string;
52
+ 700: string;
53
+ 800: string;
54
+ 900: string;
55
+ opacity: {
56
+ 4: string;
57
+ 8: string;
58
+ 16: string;
59
+ 24: string;
60
+ 32: string;
61
+ 40: string;
62
+ 48: string;
63
+ };
13
64
  };
14
65
  transparent: string;
15
66
  black: string;
@@ -184,6 +235,18 @@ declare const palette: {
184
235
  800: string;
185
236
  900: string;
186
237
  };
238
+ background: {
239
+ 50: string;
240
+ 100: string;
241
+ 200: string;
242
+ 300: string;
243
+ 400: string;
244
+ 500: string;
245
+ 600: string;
246
+ 700: string;
247
+ 800: string;
248
+ 900: string;
249
+ };
187
250
  backgroundColor: {
188
251
  main: string;
189
252
  secondary: string;
@@ -199,14 +262,90 @@ declare const palette: {
199
262
  tableHeader: string;
200
263
  };
201
264
  text: {
202
- heading: string;
203
- body: string;
204
- subtle: string;
205
- input: string;
265
+ 50: string;
266
+ 100: string;
267
+ 200: string;
268
+ 300: string;
269
+ 400: string;
270
+ 500: string;
271
+ 600: string;
272
+ 700: string;
273
+ 800: string;
274
+ 900: string;
275
+ };
276
+ header: {
277
+ 50: string;
278
+ 100: string;
279
+ 200: string;
280
+ 300: string;
281
+ 400: string;
282
+ 500: string;
283
+ 600: string;
284
+ 700: string;
285
+ 800: string;
286
+ 900: string;
287
+ };
288
+ placeholder: {
289
+ 50: string;
290
+ 100: string;
291
+ 200: string;
292
+ 300: string;
293
+ 400: string;
294
+ 500: string;
295
+ 600: string;
296
+ 700: string;
297
+ 800: string;
298
+ 900: string;
299
+ };
300
+ boxborder: {
301
+ 50: string;
302
+ 100: string;
303
+ 200: string;
304
+ 300: string;
305
+ 400: string;
306
+ 500: string;
307
+ 600: string;
308
+ 700: string;
309
+ 800: string;
310
+ 900: string;
206
311
  };
207
312
  border: {
208
- default: string;
209
- light: string;
313
+ 50: string;
314
+ 100: string;
315
+ 200: string;
316
+ 300: string;
317
+ 400: string;
318
+ 500: string;
319
+ 600: string;
320
+ 700: string;
321
+ 800: string;
322
+ 900: string;
323
+ };
324
+ table: {
325
+ hover: {
326
+ 50: string;
327
+ 100: string;
328
+ 200: string;
329
+ 300: string;
330
+ 400: string;
331
+ 500: string;
332
+ 600: string;
333
+ 700: string;
334
+ 800: string;
335
+ 900: string;
336
+ };
337
+ };
338
+ disabled: {
339
+ 50: string;
340
+ 100: string;
341
+ 200: string;
342
+ 300: string;
343
+ 400: string;
344
+ 500: string;
345
+ 600: string;
346
+ 700: string;
347
+ 800: string;
348
+ 900: string;
210
349
  };
211
350
  };
212
351
  export default palette;
@@ -2,68 +2,119 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var palette = {
4
4
  primary: {
5
- 50: "#ecddfb",
6
- 100: "#d6b7f6",
7
- 200: "#be8ef0",
8
- 300: "#aa6ae9",
9
- 400: "#944cde",
5
+ 50: "#f5edfc",
6
+ 100: "#e0c8f7",
7
+ 200: "#d1aef3",
8
+ 300: "#bb89ee",
9
+ 400: "#ae72ea",
10
10
  500: "#9A4FE5",
11
- 600: "#8b48d8",
12
- 700: "#7a3ccc",
13
- 800: "#6933b2",
14
- 900: "#59299a",
11
+ 600: "#8c48d0",
12
+ 700: "#6d38a3",
13
+ 800: "#552v7e",
14
+ 900: "#412160",
15
+ opacity: {
16
+ 4: "#9A4FE50a",
17
+ 8: "#9A4FE514",
18
+ 16: "#9A4FE529",
19
+ 24: "#9A4FE53d",
20
+ 32: "#9A4FE552",
21
+ 40: "#9A4FE566",
22
+ 48: "#9A4FE57a",
23
+ }
24
+ },
25
+ secondary: {
26
+ 50: "#e8e8e9",
27
+ 100: "#b7b8bb",
28
+ 200: "#94989b",
29
+ 300: "#63666d",
30
+ 400: "#454951",
31
+ 500: "#161b25",
32
+ 600: "#141922",
33
+ 700: "#10131a",
34
+ 800: "#0c0f14",
35
+ 900: "#090b10",
36
+ opacity: {
37
+ 4: "#161b250a",
38
+ 8: "#161b2514",
39
+ 16: "#161b2529",
40
+ 24: "#161b253d",
41
+ 32: "#161b2552",
42
+ 40: "#161b2566",
43
+ 48: "#161b257a",
44
+ }
45
+ },
46
+ tertiary: {
47
+ 50: "#e8e8e9",
48
+ 100: "#b7b8bb",
49
+ 200: "#94989b",
50
+ 300: "#63666d",
51
+ 400: "#454951",
52
+ 500: "#161b25",
53
+ 600: "#141922",
54
+ 700: "#10131a",
55
+ 800: "#0c0f14",
56
+ 900: "#090b10",
57
+ opacity: {
58
+ 4: "#161b250a",
59
+ 8: "#161b2514",
60
+ 16: "#161b2529",
61
+ 24: "#161b253d",
62
+ 32: "#161b2552",
63
+ 40: "#161b2566",
64
+ 48: "#161b257a",
65
+ }
15
66
  },
16
67
  transparent: "transparent",
17
68
  black: "#000",
18
69
  white: "#fff",
19
70
  semantic: {
20
71
  success: {
21
- 50: "#e9fdf1",
22
- 100: "#c8f7d8",
23
- 200: "#a5f1bd",
24
- 300: "#84e7a2",
25
- 400: "#60d987",
26
- 500: "#23B85C",
27
- 600: "#1dbb51",
28
- 700: "#189946",
29
- 800: "#14753a",
30
- 900: "#0f5b2f",
72
+ 50: "#e9f8ef",
73
+ 100: "#bbe9cc",
74
+ 200: "#9adeb4",
75
+ 300: "#6ccf92",
76
+ 400: "#4fc67d",
77
+ 500: "#23b85c",
78
+ 600: "#20a754",
79
+ 700: "#198341",
80
+ 800: "#136533",
81
+ 900: "#0f4d27",
31
82
  },
32
83
  error: {
33
- 50: "#fff5f2",
34
- 100: "#fee8e1",
35
- 200: "#fdd0c8",
36
- 300: "#fca9a0",
37
- 400: "#f9897c",
38
- 500: "#F2463A",
39
- 600: "#c32e23",
40
- 700: "#a6261d",
41
- 800: "#8a1f18",
42
- 900: "#701812",
84
+ 50: "#feedeb",
85
+ 100: "#fbc6c2",
86
+ 200: "#f9aaa4",
87
+ 300: "#f6837b",
88
+ 400: "#f56b61",
89
+ 500: "#f2463a",
90
+ 600: "#dc4035",
91
+ 700: "#ac3229",
92
+ 800: "#852720",
93
+ 900: "#661d18",
43
94
  },
44
95
  warning: {
45
- 50: "#fffaf5",
46
- 100: "#fff0e0",
47
- 200: "#fedcc0",
48
- 300: "#fec59e",
49
- 400: "#fdaf7c",
50
- 500: "#FB8F3D",
51
- 600: "#db6d1e",
52
- 700: "#b75d18",
53
- 800: "#924c13",
54
- 900: "#6e3b0e",
96
+ 50: "#fff4ef",
97
+ 100: "#ffddce",
98
+ 200: "#ffccb7",
99
+ 300: "#ffb596",
100
+ 400: "#ffa781",
101
+ 500: "#Ff9162",
102
+ 600: "#e88459",
103
+ 700: "#b56746",
104
+ 800: "#8c5036",
105
+ 900: "#6b3d29",
55
106
  },
56
107
  info: {
57
- 50: "#f1fcfe",
58
- 100: "#dcf6fb",
59
- 200: "#c0ecf7",
60
- 300: "#9eddef",
61
- 400: "#7fd0e6",
62
- 500: "#5FC4DE",
63
- 600: "#3bbfd2",
64
- 700: "#309db0",
65
- 800: "#257d8d",
66
- 900: "#1a5d6c",
108
+ 50: "#eff9fc",
109
+ 100: "#cdedf5",
110
+ 200: "#b5e4f0",
111
+ 300: "#94d7e9",
112
+ 400: "#7fd0e5",
113
+ 500: "#5FC4de",
114
+ 600: "#56b2ea",
115
+ 700: "#438b9e",
116
+ 800: "#346c78",
117
+ 900: "#28525d",
67
118
  },
68
119
  },
69
120
  gray: {
@@ -79,64 +130,64 @@ var palette = {
79
130
  900: "#171923",
80
131
  },
81
132
  red: {
82
- 50: "#fff5f5",
83
- 100: "#fed7d7",
84
- 200: "#feb2b2",
85
- 300: "#fc8181",
86
- 400: "#f56565",
87
- 500: "#e53e3e",
88
- 600: "#c53030",
89
- 700: "#9b2c2c",
90
- 800: "#822727",
91
- 900: "#63171b",
133
+ 50: "#feedeb",
134
+ 100: "#fbc6c2",
135
+ 200: "#f9aaa4",
136
+ 300: "#f6837b",
137
+ 400: "#f56b61",
138
+ 500: "#f2463a",
139
+ 600: "#dc4035",
140
+ 700: "#ac3229",
141
+ 800: "#852720",
142
+ 900: "#661d18",
92
143
  },
93
144
  orange: {
94
- 50: "#fffaf0",
95
- 100: "#feebc8",
96
- 200: "#fbd38d",
97
- 300: "#f6ad55",
98
- 400: "#ed8936",
99
- 500: "#dd6b20",
100
- 600: "#c05621",
101
- 700: "#9c4221",
102
- 800: "#7b341e",
103
- 900: "#652b19",
145
+ 50: "#fff4ef",
146
+ 100: "#ffddce",
147
+ 200: "#ffccb7",
148
+ 300: "#ffb596",
149
+ 400: "#ffa781",
150
+ 500: "#Ff9162",
151
+ 600: "#e88459",
152
+ 700: "#b56746",
153
+ 800: "#8c5036",
154
+ 900: "#6b3d29",
104
155
  },
105
156
  yellow: {
106
- 50: "#fffff0",
107
- 100: "#fefcbf",
108
- 200: "#faf089",
109
- 300: "#f6e05e",
110
- 400: "#ecc94b",
111
- 500: "#d69e2e",
112
- 600: "#b7791f",
113
- 700: "#975a16",
114
- 800: "#744210",
115
- 900: "#5f370e",
157
+ 50: "#fefbec",
158
+ 100: "#fdf1c5",
159
+ 200: "#fbeba9",
160
+ 300: "#fae281",
161
+ 400: "#f9dc69",
162
+ 500: "#f7d343",
163
+ 600: "#e1c03d",
164
+ 700: "#af9630",
165
+ 800: "#887425",
166
+ 900: "#68591c",
116
167
  },
117
168
  green: {
118
- 50: "#f0fff4",
119
- 100: "#c6f6d5",
120
- 200: "#9ae6b4",
121
- 300: "#68d391",
122
- 400: "#48bb78",
123
- 500: "#38a169",
124
- 600: "#2f855a",
125
- 700: "#276749",
126
- 800: "#22543d",
127
- 900: "#1c4532",
169
+ 50: "#e9f8ef",
170
+ 100: "#bbe9cc",
171
+ 200: "#9adeb4",
172
+ 300: "#6ccf92",
173
+ 400: "#4fc67d",
174
+ 500: "#23b85c",
175
+ 600: "#20a754",
176
+ 700: "#198341",
177
+ 800: "#136533",
178
+ 900: "#0f4d27",
128
179
  },
129
180
  teal: {
130
- 50: "#e6fffa",
131
- 100: "#b2f5ea",
132
- 200: "#81e6d9",
133
- 300: "#4fd1c5",
134
- 400: "#38b2ac",
135
- 500: "#319795",
136
- 600: "#2c7a7b",
137
- 700: "#285e61",
138
- 800: "#234e52",
139
- 900: "#1d4044",
181
+ 50: "#eff9fc",
182
+ 100: "#cdedf5",
183
+ 200: "#b5e4f0",
184
+ 300: "#94d7e9",
185
+ 400: "#7fd0e5",
186
+ 500: "#5FC4de",
187
+ 600: "#56b2ea",
188
+ 700: "#438b9e",
189
+ 800: "#346c78",
190
+ 900: "#28525d",
140
191
  },
141
192
  blue: {
142
193
  50: "#ebf8ff",
@@ -186,6 +237,18 @@ var palette = {
186
237
  800: "#702459",
187
238
  900: "#521b41",
188
239
  },
240
+ background: {
241
+ 50: "#ffffff",
242
+ 100: "#fefefe",
243
+ 200: "#fdfdfd",
244
+ 300: "#fcfcfc",
245
+ 400: "#fcfcfc",
246
+ 500: "#fbfbfb",
247
+ 600: "#e4e4e4",
248
+ 700: "#b2b2b2",
249
+ 800: "#8a8a8a",
250
+ 900: "#696969",
251
+ },
189
252
  backgroundColor: {
190
253
  main: "#f8f9fa",
191
254
  secondary: "#f1f1f1",
@@ -201,14 +264,90 @@ var palette = {
201
264
  tableHeader: "#F6F6F6",
202
265
  },
203
266
  text: {
204
- heading: "#161B25",
205
- body: "#555A64",
206
- subtle: "#434853",
207
- input: "#717680", // input default
267
+ 50: "#eeeff0",
268
+ 100: "#cacccf",
269
+ 200: "#b1b3b8",
270
+ 300: "#8d9097",
271
+ 400: "#777b83",
272
+ 500: "#555a64",
273
+ 600: "#4d525b",
274
+ 700: "#3c4047",
275
+ 800: "#2f3237",
276
+ 900: "#24262a",
277
+ },
278
+ header: {
279
+ 50: "#ecedec",
280
+ 100: "#c5c6ca",
281
+ 200: "#a9abb0",
282
+ 300: "#81848c",
283
+ 400: "#696b75",
284
+ 500: "#434853",
285
+ 600: "#3d424c",
286
+ 700: "#30333b",
287
+ 800: "#25282e",
288
+ 900: "#1c1e23",
289
+ },
290
+ placeholder: {
291
+ 50: "#f1f1f2",
292
+ 100: "#d3d5d8",
293
+ 200: "#bec0c5",
294
+ 300: "#a0a3aa",
295
+ 400: "#8d9199",
296
+ 500: "#717680",
297
+ 600: "#676b74",
298
+ 700: "#50545b",
299
+ 800: "#3e4146",
300
+ 900: "#2f3236",
301
+ },
302
+ boxborder: {
303
+ 50: "#fbfbfb",
304
+ 100: "#f2f3f4",
305
+ 200: "#ecedee",
306
+ 300: "#e4e5e7",
307
+ 400: "#dee0e2",
308
+ 500: "#d6d8db",
309
+ 600: "#c3c5c7",
310
+ 700: "#98999b",
311
+ 800: "#767778",
312
+ 900: "#5a5b5c",
208
313
  },
209
314
  border: {
210
- default: "#D6D8DB",
211
- light: "#E8E8E8",
315
+ 50: "#fdfdfd",
316
+ 100: "#f8f8f8",
317
+ 200: "#f4f4f4",
318
+ 300: "#f0f0f0",
319
+ 400: "#ededed",
320
+ 500: "#e8e8e8",
321
+ 600: "#d3d3d3",
322
+ 700: "#a5a5a5",
323
+ 800: "#808080",
324
+ 900: "#616161",
325
+ },
326
+ table: {
327
+ hover: {
328
+ 50: "#fefefe",
329
+ 100: "#fcfcfc",
330
+ 200: "#fbfbfb",
331
+ 300: "#f9f9f9",
332
+ 400: "#f8f8f8",
333
+ 500: "#f6f6f6",
334
+ 600: "#e0e0e0",
335
+ 700: "#afafaf",
336
+ 800: "#878787",
337
+ 900: "#676767",
338
+ }
212
339
  },
340
+ disabled: {
341
+ 50: "#fcfcfc",
342
+ 100: "#f7f7f7",
343
+ 200: "#f3f3f3",
344
+ 300: "#ededed",
345
+ 400: "#e9e9e9",
346
+ 500: "#e4e4e4",
347
+ 600: "#cfcfcf",
348
+ 700: "#a2a2a2",
349
+ 800: "#7d7d7d",
350
+ 900: "#606060",
351
+ }
213
352
  };
214
353
  exports.default = palette;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.93",
3
+ "version": "1.1.94",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",