pixelize-design-library 2.2.152 → 2.2.153

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.
@@ -0,0 +1,370 @@
1
+ declare const palette: {
2
+ primary: {
3
+ 50: string;
4
+ 100: string;
5
+ 200: string;
6
+ 300: string;
7
+ 400: string;
8
+ 500: string;
9
+ 600: string;
10
+ 700: string;
11
+ 800: string;
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
+ gray: {
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
+ };
35
+ backgroundColor: {
36
+ main: string;
37
+ secondary: string;
38
+ tertiary: string;
39
+ quaternary: string;
40
+ light: string;
41
+ medium: string;
42
+ accent: string;
43
+ subtle: string;
44
+ muted: string;
45
+ neutral: string;
46
+ base: string;
47
+ tableHeader: string;
48
+ };
49
+ background: {
50
+ 50: string;
51
+ 100: string;
52
+ 200: string;
53
+ 300: string;
54
+ 400: string;
55
+ 500: string;
56
+ 600: string;
57
+ 700: string;
58
+ 800: string;
59
+ 900: string;
60
+ };
61
+ border: {
62
+ 50: string;
63
+ 100: string;
64
+ 200: string;
65
+ 300: string;
66
+ 400: string;
67
+ 500: string;
68
+ 600: string;
69
+ 700: string;
70
+ 800: string;
71
+ 900: string;
72
+ };
73
+ boxborder: {
74
+ 50: string;
75
+ 100: string;
76
+ 200: string;
77
+ 300: string;
78
+ 400: string;
79
+ 500: string;
80
+ 600: string;
81
+ 700: string;
82
+ 800: string;
83
+ 900: string;
84
+ };
85
+ table: {
86
+ hover: {
87
+ 50: string;
88
+ 100: string;
89
+ 200: string;
90
+ 300: string;
91
+ 400: string;
92
+ 500: string;
93
+ 600: string;
94
+ 700: string;
95
+ 800: string;
96
+ 900: string;
97
+ };
98
+ };
99
+ sidebar: {
100
+ background: {
101
+ 50: string;
102
+ 100: string;
103
+ 200: string;
104
+ 300: string;
105
+ 400: string;
106
+ 500: string;
107
+ 600: string;
108
+ 700: string;
109
+ 800: string;
110
+ 900: string;
111
+ };
112
+ };
113
+ boxShadow: {
114
+ primary: string;
115
+ error: string;
116
+ default: string;
117
+ };
118
+ secondary: {
119
+ 50: string;
120
+ 100: string;
121
+ 200: string;
122
+ 300: string;
123
+ 400: string;
124
+ 500: string;
125
+ 600: string;
126
+ 700: string;
127
+ 800: string;
128
+ 900: string;
129
+ opacity: {
130
+ 4: string;
131
+ 8: string;
132
+ 16: string;
133
+ 24: string;
134
+ 32: string;
135
+ 40: string;
136
+ 48: string;
137
+ };
138
+ };
139
+ tertiary: {
140
+ 50: string;
141
+ 100: string;
142
+ 200: string;
143
+ 300: string;
144
+ 400: string;
145
+ 500: string;
146
+ 600: string;
147
+ 700: string;
148
+ 800: string;
149
+ 900: string;
150
+ opacity: {
151
+ 4: string;
152
+ 8: string;
153
+ 16: string;
154
+ 24: string;
155
+ 32: string;
156
+ 40: string;
157
+ 48: string;
158
+ };
159
+ };
160
+ transparent: string;
161
+ black: string;
162
+ white: string;
163
+ semantic: {
164
+ success: {
165
+ 50: string;
166
+ 100: string;
167
+ 200: string;
168
+ 300: string;
169
+ 400: string;
170
+ 500: string;
171
+ 600: string;
172
+ 700: string;
173
+ 800: string;
174
+ 900: string;
175
+ };
176
+ error: {
177
+ 50: string;
178
+ 100: string;
179
+ 200: string;
180
+ 300: string;
181
+ 400: string;
182
+ 500: string;
183
+ 600: string;
184
+ 700: string;
185
+ 800: string;
186
+ 900: string;
187
+ };
188
+ warning: {
189
+ 50: string;
190
+ 100: string;
191
+ 200: string;
192
+ 300: string;
193
+ 400: string;
194
+ 500: string;
195
+ 600: string;
196
+ 700: string;
197
+ 800: string;
198
+ 900: string;
199
+ };
200
+ info: {
201
+ 50: string;
202
+ 100: string;
203
+ 200: string;
204
+ 300: string;
205
+ 400: string;
206
+ 500: string;
207
+ 600: string;
208
+ 700: string;
209
+ 800: string;
210
+ 900: string;
211
+ };
212
+ };
213
+ red: {
214
+ 50: string;
215
+ 100: string;
216
+ 200: string;
217
+ 300: string;
218
+ 400: string;
219
+ 500: string;
220
+ 600: string;
221
+ 700: string;
222
+ 800: string;
223
+ 900: string;
224
+ };
225
+ orange: {
226
+ 50: string;
227
+ 100: string;
228
+ 200: string;
229
+ 300: string;
230
+ 400: string;
231
+ 500: string;
232
+ 600: string;
233
+ 700: string;
234
+ 800: string;
235
+ 900: string;
236
+ };
237
+ yellow: {
238
+ 50: string;
239
+ 100: string;
240
+ 200: string;
241
+ 300: string;
242
+ 400: string;
243
+ 500: string;
244
+ 600: string;
245
+ 700: string;
246
+ 800: string;
247
+ 900: string;
248
+ };
249
+ green: {
250
+ 50: string;
251
+ 100: string;
252
+ 200: string;
253
+ 300: string;
254
+ 400: string;
255
+ 500: string;
256
+ 600: string;
257
+ 700: string;
258
+ 800: string;
259
+ 900: string;
260
+ };
261
+ teal: {
262
+ 50: string;
263
+ 100: string;
264
+ 200: string;
265
+ 300: string;
266
+ 400: string;
267
+ 500: string;
268
+ 600: string;
269
+ 700: string;
270
+ 800: string;
271
+ 900: string;
272
+ };
273
+ blue: {
274
+ 50: string;
275
+ 100: string;
276
+ 200: string;
277
+ 300: string;
278
+ 400: string;
279
+ 500: string;
280
+ 600: string;
281
+ 700: string;
282
+ 800: string;
283
+ 900: string;
284
+ };
285
+ cyan: {
286
+ 50: string;
287
+ 100: string;
288
+ 200: string;
289
+ 300: string;
290
+ 400: string;
291
+ 500: string;
292
+ 600: string;
293
+ 700: string;
294
+ 800: string;
295
+ 900: string;
296
+ };
297
+ purple: {
298
+ 50: string;
299
+ 100: string;
300
+ 200: string;
301
+ 300: string;
302
+ 400: string;
303
+ 500: string;
304
+ 600: string;
305
+ 700: string;
306
+ 800: string;
307
+ 900: string;
308
+ };
309
+ pink: {
310
+ 50: string;
311
+ 100: string;
312
+ 200: string;
313
+ 300: string;
314
+ 400: string;
315
+ 500: string;
316
+ 600: string;
317
+ 700: string;
318
+ 800: string;
319
+ 900: string;
320
+ };
321
+ text: {
322
+ 50: string;
323
+ 100: string;
324
+ 200: string;
325
+ 300: string;
326
+ 400: string;
327
+ 500: string;
328
+ 600: string;
329
+ 700: string;
330
+ 800: string;
331
+ 900: string;
332
+ };
333
+ header: {
334
+ 50: string;
335
+ 100: string;
336
+ 200: string;
337
+ 300: string;
338
+ 400: string;
339
+ 500: string;
340
+ 600: string;
341
+ 700: string;
342
+ 800: string;
343
+ 900: string;
344
+ };
345
+ placeholder: {
346
+ 50: string;
347
+ 100: string;
348
+ 200: string;
349
+ 300: string;
350
+ 400: string;
351
+ 500: string;
352
+ 600: string;
353
+ 700: string;
354
+ 800: string;
355
+ 900: string;
356
+ };
357
+ disabled: {
358
+ 50: string;
359
+ 100: string;
360
+ 200: string;
361
+ 300: string;
362
+ 400: string;
363
+ 500: string;
364
+ 600: string;
365
+ 700: string;
366
+ 800: string;
367
+ 900: string;
368
+ };
369
+ };
370
+ export default palette;
@@ -0,0 +1,127 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var palette_1 = __importDefault(require("../Default/palette"));
18
+ var buildBrandTokens_1 = require("../buildBrandTokens");
19
+ var PRIMARY_500 = "#0f9d8a"; // teal-emerald core (balanced, not too green/blue)
20
+ var primary = {
21
+ 50: "#e6f7f5",
22
+ 100: "#c2ebe6",
23
+ 200: "#8eddd4",
24
+ 300: "#5acfc2",
25
+ 400: "#2fb7a9",
26
+ 500: PRIMARY_500,
27
+ 600: "#0c8575",
28
+ 700: "#096b5e",
29
+ 800: "#065248",
30
+ 900: "#043b35",
31
+ opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
32
+ };
33
+ var palette = __assign(__assign({}, palette_1.default), { primary: primary,
34
+ // 🌫️ Neutral gray (slightly cool to match teal)
35
+ gray: {
36
+ 50: "#f6f8f8",
37
+ 100: "#edf2f2",
38
+ 200: "#dce5e5",
39
+ 300: "#c3d2d2",
40
+ 400: "#9fb3b3",
41
+ 500: "#7c9191",
42
+ 600: "#5e7070",
43
+ 700: "#475555",
44
+ 800: "#2f3a3a",
45
+ 900: "#1f2626",
46
+ },
47
+ // 🌊 Background system (very subtle teal tint)
48
+ backgroundColor: {
49
+ main: "#f7fbfb",
50
+ secondary: "#eef7f6",
51
+ tertiary: "#e5f1ef",
52
+ quaternary: "#dcebea",
53
+ light: "#fcfefe",
54
+ medium: "#e2efee",
55
+ accent: "#d5e7e5",
56
+ subtle: "#f4f9f9",
57
+ muted: "#cfe2e0",
58
+ neutral: "#e2efee",
59
+ base: "#fafdfd",
60
+ tableHeader: "#eef7f6",
61
+ }, background: {
62
+ 50: "#ffffff",
63
+ 100: "#fbfefe",
64
+ 200: "#eef7f6",
65
+ 300: "#e5f1ef",
66
+ 400: "#dcebea",
67
+ 500: "#d2e4e2",
68
+ 600: "#bdd1cf",
69
+ 700: "#96a9a7",
70
+ 800: "#707f7e",
71
+ 900: "#545f5f",
72
+ }, border: {
73
+ 50: "#fafeff",
74
+ 100: "#edf5f4",
75
+ 200: "#ddebea",
76
+ 300: "#cde1df",
77
+ 400: "#bdd6d4",
78
+ 500: "#accbc9",
79
+ 600: "#99b7b5",
80
+ 700: "#788f8e",
81
+ 800: "#5b6e6d",
82
+ 900: "#455454",
83
+ }, boxborder: {
84
+ 50: "#fafeff",
85
+ 100: "#ecf4f3",
86
+ 200: "#d9e7e5",
87
+ 300: "#c6dad8",
88
+ 400: "#b3cdcb",
89
+ 500: "#a0c0be",
90
+ 600: "#8dadab",
91
+ 700: "#6e8786",
92
+ 800: "#546868",
93
+ 900: "#3f5050",
94
+ }, table: {
95
+ hover: {
96
+ 50: "#fbfefe",
97
+ 100: "#f0f7f7",
98
+ 200: "#e6f1f1",
99
+ 300: "#dceaea",
100
+ 400: "#d2e3e3",
101
+ 500: "#c8dcdc",
102
+ 600: "#b4c7c7",
103
+ 700: "#909f9f",
104
+ 800: "#6c7777",
105
+ 900: "#525b5b",
106
+ },
107
+ },
108
+ // 🌑 Sidebar (deep teal-black)
109
+ sidebar: {
110
+ background: {
111
+ 50: "#eaf4f3",
112
+ 100: "#cfe3e1",
113
+ 200: "#3e6f6a",
114
+ 300: "#5a8c86",
115
+ 400: "#2f5a55",
116
+ 500: "#0e1f1e", // charcoal teal (instead of near-black)
117
+ 600: "#0b1918",
118
+ 700: "#081312",
119
+ 800: "#060e0d",
120
+ 900: "#040908",
121
+ },
122
+ }, boxShadow: {
123
+ primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
124
+ error: palette_1.default.boxShadow.error,
125
+ default: palette_1.default.boxShadow.default,
126
+ } });
127
+ exports.default = palette;
@@ -0,0 +1,2 @@
1
+ declare const _default: Record<string, any>;
2
+ export default _default;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var react_1 = require("@chakra-ui/react");
18
+ var palette_1 = __importDefault(require("./palette"));
19
+ var fonts_1 = __importDefault(require("../fonts"));
20
+ var common_1 = __importDefault(require("../common"));
21
+ var componentStyles_1 = require("../componentStyles");
22
+ var emerald = __assign(__assign(__assign({}, fonts_1.default), { colors: palette_1.default }), common_1.default);
23
+ exports.default = (0, react_1.extendTheme)(__assign(__assign({}, emerald), { components: componentStyles_1.componentStyles }));
@@ -16,102 +16,108 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  var palette_1 = __importDefault(require("../Default/palette"));
18
18
  var buildBrandTokens_1 = require("../buildBrandTokens");
19
- var PRIMARY_500 = "#c9653f"; // slightly darker + warmer terracotta
19
+ var PRIMARY_500 = "#cf4e3a"; // warm red (terracotta leaning)
20
20
  var primary = {
21
- 50: "#fceee8",
22
- 100: "#f6d4c3",
23
- 200: "#eea98e",
24
- 300: "#e57f5a",
25
- 400: "#d8653f",
26
- 500: PRIMARY_500, // #c9653f
27
- 600: "#b35433",
28
- 700: "#924129",
29
- 800: "#70301d",
30
- 900: "#4f2012",
21
+ 50: "#fdf1ee",
22
+ 100: "#f8d3cc",
23
+ 200: "#f1a69a",
24
+ 300: "#e97969",
25
+ 400: "#dc5d4d",
26
+ 500: PRIMARY_500,
27
+ 600: "#b84533",
28
+ 700: "#983628",
29
+ 800: "#75281e",
30
+ 900: "#531a14",
31
31
  opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
32
32
  };
33
- var palette = __assign(__assign({}, palette_1.default), { primary: primary, gray: {
34
- 50: "#f7f7f6",
35
- 100: "#eeeeec",
36
- 200: "#dddcd9",
37
- 300: "#c6c4c0",
38
- 400: "#a9a7a2",
39
- 500: "#8a8883",
40
- 600: "#6a6863",
41
- 700: "#504e49",
42
- 800: "#373530",
43
- 900: "#24221e",
44
- }, backgroundColor: {
45
- main: "#f8f3ee",
46
- secondary: "#f1e6dc",
47
- tertiary: "#e9dbcf",
48
- quaternary: "#e1cfc2",
49
- light: "#fdfaf7",
50
- medium: "#e6d6c9",
51
- accent: "#dcc6b7",
52
- subtle: "#f5eee7",
53
- muted: "#d6c0b0",
54
- neutral: "#e6d6c9",
55
- base: "#fbf8f5",
56
- tableHeader: "#f1e6dc",
33
+ var palette = __assign(__assign({}, palette_1.default), { primary: primary,
34
+ // 🌫️ Neutral gray (slightly warm, not pink)
35
+ gray: {
36
+ 50: "#f8f6f5",
37
+ 100: "#efeae7",
38
+ 200: "#e2dad5",
39
+ 300: "#cec2bb",
40
+ 400: "#b3a39a",
41
+ 500: "#928077",
42
+ 600: "#6e6058",
43
+ 700: "#534841",
44
+ 800: "#39312c",
45
+ 900: "#27211d",
46
+ },
47
+ // 🧴 Warm background system (subtle red undertone)
48
+ backgroundColor: {
49
+ main: "#fdf8f6",
50
+ secondary: "#f6ebe7",
51
+ tertiary: "#efdfd9",
52
+ quaternary: "#e8d3cc",
53
+ light: "#fffafa",
54
+ medium: "#ecdcd6",
55
+ accent: "#e2cbc3",
56
+ subtle: "#fbf4f1",
57
+ muted: "#d9c2ba",
58
+ neutral: "#ecdcd6",
59
+ base: "#fefbfa",
60
+ tableHeader: "#f6ebe7",
57
61
  }, background: {
58
62
  50: "#ffffff",
59
- 100: "#fcf8f4",
60
- 200: "#f4ece4",
61
- 300: "#ede3da",
62
- 400: "#e6dacf",
63
- 500: "#decfc3",
64
- 600: "#cbbcae",
65
- 700: "#a19386",
66
- 800: "#7a6d63",
67
- 900: "#5c534c",
63
+ 100: "#fdf9f7",
64
+ 200: "#f6ebe7",
65
+ 300: "#efdfd9",
66
+ 400: "#e8d3cc",
67
+ 500: "#e0c7bf",
68
+ 600: "#cab2aa",
69
+ 700: "#a38f88",
70
+ 800: "#7c6c66",
71
+ 900: "#5e514c",
68
72
  }, border: {
69
- 50: "#fefcfb",
70
- 100: "#f4ede6",
71
- 200: "#ebdfd5",
72
- 300: "#e2d3c8",
73
- 400: "#d9c7bb",
74
- 500: "#cfb9ac",
75
- 600: "#b9a99c",
76
- 700: "#91857c",
77
- 800: "#6f655e",
78
- 900: "#544c46",
73
+ 50: "#fffafa",
74
+ 100: "#f6ede9",
75
+ 200: "#eddeda",
76
+ 300: "#e4cfc9",
77
+ 400: "#dbc0b9",
78
+ 500: "#d1b1a9",
79
+ 600: "#bda098",
80
+ 700: "#94817b",
81
+ 800: "#70635e",
82
+ 900: "#564b47",
79
83
  }, boxborder: {
80
- 50: "#fefcfb",
81
- 100: "#f3ece6",
82
- 200: "#e9dfd6",
83
- 300: "#dfd3c9",
84
- 400: "#d5c7bc",
85
- 500: "#cabaae",
86
- 600: "#b5a79b",
87
- 700: "#8e837b",
88
- 800: "#6c625c",
89
- 900: "#524a44",
84
+ 50: "#fffafa",
85
+ 100: "#f5ece8",
86
+ 200: "#ebdbd6",
87
+ 300: "#e1cbc5",
88
+ 400: "#d7bbb4",
89
+ 500: "#cdaaa3",
90
+ 600: "#b99993",
91
+ 700: "#907a75",
92
+ 800: "#6d5e5a",
93
+ 900: "#534844",
90
94
  }, table: {
91
95
  hover: {
92
96
  50: "#fffefe",
93
- 100: "#f8f2ec",
94
- 200: "#f1e7df",
95
- 300: "#eadfd6",
96
- 400: "#e3d6cc",
97
- 500: "#dccdc2",
98
- 600: "#c8b9ac",
99
- 700: "#9f948a",
100
- 800: "#787069",
101
- 900: "#5b5550",
97
+ 100: "#faf2ef",
98
+ 200: "#f4e6e1",
99
+ 300: "#eedad4",
100
+ 400: "#e7cdc6",
101
+ 500: "#e1c1b9",
102
+ 600: "#caaea6",
103
+ 700: "#a28d87",
104
+ 800: "#7b6e69",
105
+ 900: "#5d5450",
102
106
  },
103
- }, sidebar: {
107
+ },
108
+ // 🌑 Sidebar (deep warm red-brown)
109
+ sidebar: {
104
110
  background: {
105
- 50: "#efe6df",
106
- 100: "#dcc8bb",
107
- 200: "#6f5546",
108
- 300: "#8e6d5c",
109
- 400: "#5d4436",
110
- 500: "#160d08", // deeper espresso tone
111
- 600: "#120a06",
112
- 700: "#0d0704",
113
- 800: "#090503",
114
- 900: "#050302",
111
+ 50: "#f3e9e6",
112
+ 100: "#e0c9c2",
113
+ 200: "#7a5147",
114
+ 300: "#9a6a5f",
115
+ 400: "#5e3c34",
116
+ 500: "#170c09", // deep warm red-black
117
+ 600: "#120906",
118
+ 700: "#0d0604",
119
+ 800: "#090403",
120
+ 900: "#050201",
115
121
  },
116
122
  }, boxShadow: {
117
123
  primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
@@ -0,0 +1,370 @@
1
+ declare const palette: {
2
+ primary: {
3
+ 50: string;
4
+ 100: string;
5
+ 200: string;
6
+ 300: string;
7
+ 400: string;
8
+ 500: string;
9
+ 600: string;
10
+ 700: string;
11
+ 800: string;
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
+ gray: {
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
+ };
35
+ backgroundColor: {
36
+ main: string;
37
+ secondary: string;
38
+ tertiary: string;
39
+ quaternary: string;
40
+ light: string;
41
+ medium: string;
42
+ accent: string;
43
+ subtle: string;
44
+ muted: string;
45
+ neutral: string;
46
+ base: string;
47
+ tableHeader: string;
48
+ };
49
+ background: {
50
+ 50: string;
51
+ 100: string;
52
+ 200: string;
53
+ 300: string;
54
+ 400: string;
55
+ 500: string;
56
+ 600: string;
57
+ 700: string;
58
+ 800: string;
59
+ 900: string;
60
+ };
61
+ border: {
62
+ 50: string;
63
+ 100: string;
64
+ 200: string;
65
+ 300: string;
66
+ 400: string;
67
+ 500: string;
68
+ 600: string;
69
+ 700: string;
70
+ 800: string;
71
+ 900: string;
72
+ };
73
+ boxborder: {
74
+ 50: string;
75
+ 100: string;
76
+ 200: string;
77
+ 300: string;
78
+ 400: string;
79
+ 500: string;
80
+ 600: string;
81
+ 700: string;
82
+ 800: string;
83
+ 900: string;
84
+ };
85
+ table: {
86
+ hover: {
87
+ 50: string;
88
+ 100: string;
89
+ 200: string;
90
+ 300: string;
91
+ 400: string;
92
+ 500: string;
93
+ 600: string;
94
+ 700: string;
95
+ 800: string;
96
+ 900: string;
97
+ };
98
+ };
99
+ sidebar: {
100
+ background: {
101
+ 50: string;
102
+ 100: string;
103
+ 200: string;
104
+ 300: string;
105
+ 400: string;
106
+ 500: string;
107
+ 600: string;
108
+ 700: string;
109
+ 800: string;
110
+ 900: string;
111
+ };
112
+ };
113
+ boxShadow: {
114
+ primary: string;
115
+ error: string;
116
+ default: string;
117
+ };
118
+ secondary: {
119
+ 50: string;
120
+ 100: string;
121
+ 200: string;
122
+ 300: string;
123
+ 400: string;
124
+ 500: string;
125
+ 600: string;
126
+ 700: string;
127
+ 800: string;
128
+ 900: string;
129
+ opacity: {
130
+ 4: string;
131
+ 8: string;
132
+ 16: string;
133
+ 24: string;
134
+ 32: string;
135
+ 40: string;
136
+ 48: string;
137
+ };
138
+ };
139
+ tertiary: {
140
+ 50: string;
141
+ 100: string;
142
+ 200: string;
143
+ 300: string;
144
+ 400: string;
145
+ 500: string;
146
+ 600: string;
147
+ 700: string;
148
+ 800: string;
149
+ 900: string;
150
+ opacity: {
151
+ 4: string;
152
+ 8: string;
153
+ 16: string;
154
+ 24: string;
155
+ 32: string;
156
+ 40: string;
157
+ 48: string;
158
+ };
159
+ };
160
+ transparent: string;
161
+ black: string;
162
+ white: string;
163
+ semantic: {
164
+ success: {
165
+ 50: string;
166
+ 100: string;
167
+ 200: string;
168
+ 300: string;
169
+ 400: string;
170
+ 500: string;
171
+ 600: string;
172
+ 700: string;
173
+ 800: string;
174
+ 900: string;
175
+ };
176
+ error: {
177
+ 50: string;
178
+ 100: string;
179
+ 200: string;
180
+ 300: string;
181
+ 400: string;
182
+ 500: string;
183
+ 600: string;
184
+ 700: string;
185
+ 800: string;
186
+ 900: string;
187
+ };
188
+ warning: {
189
+ 50: string;
190
+ 100: string;
191
+ 200: string;
192
+ 300: string;
193
+ 400: string;
194
+ 500: string;
195
+ 600: string;
196
+ 700: string;
197
+ 800: string;
198
+ 900: string;
199
+ };
200
+ info: {
201
+ 50: string;
202
+ 100: string;
203
+ 200: string;
204
+ 300: string;
205
+ 400: string;
206
+ 500: string;
207
+ 600: string;
208
+ 700: string;
209
+ 800: string;
210
+ 900: string;
211
+ };
212
+ };
213
+ red: {
214
+ 50: string;
215
+ 100: string;
216
+ 200: string;
217
+ 300: string;
218
+ 400: string;
219
+ 500: string;
220
+ 600: string;
221
+ 700: string;
222
+ 800: string;
223
+ 900: string;
224
+ };
225
+ orange: {
226
+ 50: string;
227
+ 100: string;
228
+ 200: string;
229
+ 300: string;
230
+ 400: string;
231
+ 500: string;
232
+ 600: string;
233
+ 700: string;
234
+ 800: string;
235
+ 900: string;
236
+ };
237
+ yellow: {
238
+ 50: string;
239
+ 100: string;
240
+ 200: string;
241
+ 300: string;
242
+ 400: string;
243
+ 500: string;
244
+ 600: string;
245
+ 700: string;
246
+ 800: string;
247
+ 900: string;
248
+ };
249
+ green: {
250
+ 50: string;
251
+ 100: string;
252
+ 200: string;
253
+ 300: string;
254
+ 400: string;
255
+ 500: string;
256
+ 600: string;
257
+ 700: string;
258
+ 800: string;
259
+ 900: string;
260
+ };
261
+ teal: {
262
+ 50: string;
263
+ 100: string;
264
+ 200: string;
265
+ 300: string;
266
+ 400: string;
267
+ 500: string;
268
+ 600: string;
269
+ 700: string;
270
+ 800: string;
271
+ 900: string;
272
+ };
273
+ blue: {
274
+ 50: string;
275
+ 100: string;
276
+ 200: string;
277
+ 300: string;
278
+ 400: string;
279
+ 500: string;
280
+ 600: string;
281
+ 700: string;
282
+ 800: string;
283
+ 900: string;
284
+ };
285
+ cyan: {
286
+ 50: string;
287
+ 100: string;
288
+ 200: string;
289
+ 300: string;
290
+ 400: string;
291
+ 500: string;
292
+ 600: string;
293
+ 700: string;
294
+ 800: string;
295
+ 900: string;
296
+ };
297
+ purple: {
298
+ 50: string;
299
+ 100: string;
300
+ 200: string;
301
+ 300: string;
302
+ 400: string;
303
+ 500: string;
304
+ 600: string;
305
+ 700: string;
306
+ 800: string;
307
+ 900: string;
308
+ };
309
+ pink: {
310
+ 50: string;
311
+ 100: string;
312
+ 200: string;
313
+ 300: string;
314
+ 400: string;
315
+ 500: string;
316
+ 600: string;
317
+ 700: string;
318
+ 800: string;
319
+ 900: string;
320
+ };
321
+ text: {
322
+ 50: string;
323
+ 100: string;
324
+ 200: string;
325
+ 300: string;
326
+ 400: string;
327
+ 500: string;
328
+ 600: string;
329
+ 700: string;
330
+ 800: string;
331
+ 900: string;
332
+ };
333
+ header: {
334
+ 50: string;
335
+ 100: string;
336
+ 200: string;
337
+ 300: string;
338
+ 400: string;
339
+ 500: string;
340
+ 600: string;
341
+ 700: string;
342
+ 800: string;
343
+ 900: string;
344
+ };
345
+ placeholder: {
346
+ 50: string;
347
+ 100: string;
348
+ 200: string;
349
+ 300: string;
350
+ 400: string;
351
+ 500: string;
352
+ 600: string;
353
+ 700: string;
354
+ 800: string;
355
+ 900: string;
356
+ };
357
+ disabled: {
358
+ 50: string;
359
+ 100: string;
360
+ 200: string;
361
+ 300: string;
362
+ 400: string;
363
+ 500: string;
364
+ 600: string;
365
+ 700: string;
366
+ 800: string;
367
+ 900: string;
368
+ };
369
+ };
370
+ export default palette;
@@ -0,0 +1,127 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var palette_1 = __importDefault(require("../Default/palette"));
18
+ var buildBrandTokens_1 = require("../buildBrandTokens");
19
+ var PRIMARY_500 = "#d16a7e"; // muted warm rose (not neon pink)
20
+ var primary = {
21
+ 50: "#fdf2f5",
22
+ 100: "#f9d6de",
23
+ 200: "#f2aaba",
24
+ 300: "#ea7f96",
25
+ 400: "#de627d",
26
+ 500: PRIMARY_500,
27
+ 600: "#b9556b",
28
+ 700: "#984558",
29
+ 800: "#763646",
30
+ 900: "#552634",
31
+ opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
32
+ };
33
+ var palette = __assign(__assign({}, palette_1.default), { primary: primary,
34
+ // 🌫️ Neutral gray (slightly warm, avoids purple tint)
35
+ gray: {
36
+ 50: "#f9f7f7",
37
+ 100: "#f1ecec",
38
+ 200: "#e4dada",
39
+ 300: "#d0c1c1",
40
+ 400: "#b4a2a2",
41
+ 500: "#927f7f",
42
+ 600: "#6e5e5e",
43
+ 700: "#534747",
44
+ 800: "#3a3030",
45
+ 900: "#272020",
46
+ },
47
+ // 🌸 Background system (soft rose tint)
48
+ backgroundColor: {
49
+ main: "#fdf8fa",
50
+ secondary: "#f6ecef",
51
+ tertiary: "#efe0e5",
52
+ quaternary: "#e8d4db",
53
+ light: "#fffafb",
54
+ medium: "#ecd9df",
55
+ accent: "#e2c7cf",
56
+ subtle: "#fbf4f7",
57
+ muted: "#d9bfc6",
58
+ neutral: "#ecd9df",
59
+ base: "#fefbfd",
60
+ tableHeader: "#f6ecef",
61
+ }, background: {
62
+ 50: "#ffffff",
63
+ 100: "#fdf9fb",
64
+ 200: "#f6ecef",
65
+ 300: "#efe0e5",
66
+ 400: "#e8d4db",
67
+ 500: "#e0c8d0",
68
+ 600: "#cab3bc",
69
+ 700: "#a38f97",
70
+ 800: "#7c6b73",
71
+ 900: "#5e5157",
72
+ }, border: {
73
+ 50: "#fffafb",
74
+ 100: "#f6edef",
75
+ 200: "#eddcdf",
76
+ 300: "#e4ccd0",
77
+ 400: "#dbbcc1",
78
+ 500: "#d1acb2",
79
+ 600: "#bd9aa0",
80
+ 700: "#948086",
81
+ 800: "#706266",
82
+ 900: "#564a4d",
83
+ }, boxborder: {
84
+ 50: "#fffafb",
85
+ 100: "#f5ecef",
86
+ 200: "#ebdade",
87
+ 300: "#e1c9ce",
88
+ 400: "#d7b9bf",
89
+ 500: "#cda8af",
90
+ 600: "#b9979e",
91
+ 700: "#90777f",
92
+ 800: "#6d5a61",
93
+ 900: "#534347",
94
+ }, table: {
95
+ hover: {
96
+ 50: "#fffefe",
97
+ 100: "#faf2f5",
98
+ 200: "#f4e6ea",
99
+ 300: "#eedadf",
100
+ 400: "#e7cdd4",
101
+ 500: "#e1c1c9",
102
+ 600: "#caaeb6",
103
+ 700: "#a28d94",
104
+ 800: "#7b6e73",
105
+ 900: "#5d5457",
106
+ },
107
+ },
108
+ // 🌑 Sidebar (charcoal rose, not black)
109
+ sidebar: {
110
+ background: {
111
+ 50: "#f3eaed",
112
+ 100: "#e0c9cf",
113
+ 200: "#7a4f57",
114
+ 300: "#9a6a73",
115
+ 400: "#5e3a41",
116
+ 500: "#1a1013", // rose-tinted charcoal
117
+ 600: "#140c0e",
118
+ 700: "#0f0809",
119
+ 800: "#0a0506",
120
+ 900: "#060303",
121
+ },
122
+ }, boxShadow: {
123
+ primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
124
+ error: palette_1.default.boxShadow.error,
125
+ default: palette_1.default.boxShadow.default,
126
+ } });
127
+ exports.default = palette;
@@ -0,0 +1,2 @@
1
+ declare const _default: Record<string, any>;
2
+ export default _default;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var react_1 = require("@chakra-ui/react");
18
+ var palette_1 = __importDefault(require("./palette"));
19
+ var fonts_1 = __importDefault(require("../fonts"));
20
+ var common_1 = __importDefault(require("../common"));
21
+ var componentStyles_1 = require("../componentStyles");
22
+ var rosewood = __assign(__assign(__assign({}, fonts_1.default), { colors: palette_1.default }), common_1.default);
23
+ exports.default = (0, react_1.extendTheme)(__assign(__assign({}, rosewood), { components: componentStyles_1.componentStyles }));
@@ -3,11 +3,15 @@ import meadow from "./Meadow/theme";
3
3
  import radiant from "./Radiant/theme";
4
4
  import skyline from "./Skyline/theme";
5
5
  import slate from "./Slate/theme";
6
- export { skyline, meadow, radiant, lavender, slate };
6
+ import emerald from "./Emerald/theme";
7
+ import rosewood from "./Rosewood/theme";
8
+ export { skyline, meadow, radiant, lavender, slate, emerald, rosewood };
7
9
  export declare const ThemesList: {
8
10
  skyline: Record<string, any>;
9
11
  meadow: Record<string, any>;
10
12
  radiant: Record<string, any>;
11
13
  lavender: Record<string, any>;
12
14
  slate: Record<string, any>;
15
+ emerald: Record<string, any>;
16
+ rosewood: Record<string, any>;
13
17
  };
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ThemesList = exports.slate = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
6
+ exports.ThemesList = exports.rosewood = exports.emerald = exports.slate = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
7
7
  var theme_1 = __importDefault(require("./Default/theme"));
8
8
  exports.lavender = theme_1.default;
9
9
  var theme_2 = __importDefault(require("./Meadow/theme"));
@@ -14,10 +14,16 @@ var theme_4 = __importDefault(require("./Skyline/theme"));
14
14
  exports.skyline = theme_4.default;
15
15
  var theme_5 = __importDefault(require("./Slate/theme"));
16
16
  exports.slate = theme_5.default;
17
+ var theme_6 = __importDefault(require("./Emerald/theme"));
18
+ exports.emerald = theme_6.default;
19
+ var theme_7 = __importDefault(require("./Rosewood/theme"));
20
+ exports.rosewood = theme_7.default;
17
21
  exports.ThemesList = {
18
22
  skyline: theme_4.default,
19
23
  meadow: theme_2.default,
20
24
  radiant: theme_3.default,
21
25
  lavender: theme_1.default,
22
26
  slate: theme_5.default,
27
+ emerald: theme_6.default,
28
+ rosewood: theme_7.default,
23
29
  };
@@ -1,2 +1,2 @@
1
- export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate";
1
+ export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate" | "emerald" | "rosewood";
2
2
  export declare const themes: Record<ThemeName, string>;
@@ -7,4 +7,6 @@ exports.themes = {
7
7
  radiant: "radiant",
8
8
  skyline: "skyline",
9
9
  slate: "slate",
10
+ emerald: "emerald",
11
+ rosewood: "rosewood",
10
12
  };
package/dist/global.css CHANGED
@@ -241,3 +241,11 @@
241
241
  [data-theme="slate"] {
242
242
  --color-primary-500: #475569;
243
243
  }
244
+
245
+ [data-theme="emerald"] {
246
+ --color-primary-500: #0f9d8a;
247
+ }
248
+
249
+ [data-theme="rosewood"] {
250
+ --color-primary-500: #d16a7e;
251
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.152",
3
+ "version": "2.2.153",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",