pixelize-design-library 2.2.146 → 2.2.147

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
+ tertiary: {
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
+ gray: {
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
+ };
56
+ backgroundColor: {
57
+ main: string;
58
+ secondary: string;
59
+ tertiary: string;
60
+ quaternary: string;
61
+ light: string;
62
+ medium: string;
63
+ accent: string;
64
+ subtle: string;
65
+ muted: string;
66
+ neutral: string;
67
+ base: string;
68
+ tableHeader: string;
69
+ };
70
+ background: {
71
+ 50: string;
72
+ 100: string;
73
+ 200: string;
74
+ 300: string;
75
+ 400: string;
76
+ 500: string;
77
+ 600: string;
78
+ 700: string;
79
+ 800: string;
80
+ 900: string;
81
+ };
82
+ border: {
83
+ 50: string;
84
+ 100: string;
85
+ 200: string;
86
+ 300: string;
87
+ 400: string;
88
+ 500: string;
89
+ 600: string;
90
+ 700: string;
91
+ 800: string;
92
+ 900: string;
93
+ };
94
+ boxborder: {
95
+ 50: string;
96
+ 100: string;
97
+ 200: string;
98
+ 300: string;
99
+ 400: string;
100
+ 500: string;
101
+ 600: string;
102
+ 700: string;
103
+ 800: string;
104
+ 900: string;
105
+ };
106
+ table: {
107
+ hover: {
108
+ 50: string;
109
+ 100: string;
110
+ 200: string;
111
+ 300: string;
112
+ 400: string;
113
+ 500: string;
114
+ 600: string;
115
+ 700: string;
116
+ 800: string;
117
+ 900: string;
118
+ };
119
+ };
120
+ sidebar: {
121
+ background: {
122
+ 50: string;
123
+ 100: string;
124
+ 200: string;
125
+ 300: string;
126
+ 400: string;
127
+ 500: string;
128
+ 600: string;
129
+ 700: string;
130
+ 800: string;
131
+ 900: string;
132
+ };
133
+ };
134
+ boxShadow: {
135
+ primary: string;
136
+ error: string;
137
+ default: string;
138
+ };
139
+ secondary: {
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,121 @@
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 = "#475569";
20
+ var primary = {
21
+ 50: "#f8fafc",
22
+ 100: "#f1f5f9",
23
+ 200: "#e2e8f0",
24
+ 300: "#cbd5e1",
25
+ 400: "#94a3b8",
26
+ 500: PRIMARY_500,
27
+ 600: "#334155",
28
+ 700: "#1e293b",
29
+ 800: "#172033",
30
+ 900: "#0f172a",
31
+ opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
32
+ };
33
+ var palette = __assign(__assign({}, palette_1.default), { primary: primary, tertiary: __assign({}, primary), gray: {
34
+ 50: "#f8fafc",
35
+ 100: "#f1f5f9",
36
+ 200: "#e2e8f0",
37
+ 300: "#cbd5e1",
38
+ 400: "#94a3b8",
39
+ 500: "#64748b",
40
+ 600: "#475569",
41
+ 700: "#334155",
42
+ 800: "#1e293b",
43
+ 900: "#0f172a",
44
+ }, backgroundColor: {
45
+ main: "#f8fafc",
46
+ secondary: "#f1f5f9",
47
+ tertiary: "#eceff3",
48
+ quaternary: "#e2e8f0",
49
+ light: "#fcfcfd",
50
+ medium: "#e8ecf1",
51
+ accent: "#dfe5eb",
52
+ subtle: "#f5f7fa",
53
+ muted: "#d8dee6",
54
+ neutral: "#eef1f5",
55
+ base: "#fafbfc",
56
+ tableHeader: "#f1f5f9",
57
+ }, background: {
58
+ 50: "#ffffff",
59
+ 100: "#fcfcfd",
60
+ 200: "#f5f7fa",
61
+ 300: "#f1f5f9",
62
+ 400: "#eceff3",
63
+ 500: "#e6eaef",
64
+ 600: "#cfd6df",
65
+ 700: "#94a3b8",
66
+ 800: "#64748b",
67
+ 900: "#475569",
68
+ }, border: {
69
+ 50: "#fcfcfd",
70
+ 100: "#f4f6f8",
71
+ 200: "#eceff3",
72
+ 300: "#e4e8ed",
73
+ 400: "#dce1e7",
74
+ 500: "#d4dae1",
75
+ 600: "#bfc6cf",
76
+ 700: "#929aa3",
77
+ 800: "#6b727a",
78
+ 900: "#51565d",
79
+ }, boxborder: {
80
+ 50: "#fcfcfd",
81
+ 100: "#f3f5f7",
82
+ 200: "#eaeef2",
83
+ 300: "#e2e7ec",
84
+ 400: "#dadfe6",
85
+ 500: "#d2d8e0",
86
+ 600: "#bdc4cd",
87
+ 700: "#90979f",
88
+ 800: "#6a7077",
89
+ 900: "#50555a",
90
+ }, table: {
91
+ hover: {
92
+ 50: "#feffff",
93
+ 100: "#f8fafc",
94
+ 200: "#f3f5f8",
95
+ 300: "#eef1f5",
96
+ 400: "#e9edf2",
97
+ 500: "#e4e9ef",
98
+ 600: "#cfd6df",
99
+ 700: "#a3aab3",
100
+ 800: "#7b8188",
101
+ 900: "#5e6368",
102
+ },
103
+ }, sidebar: {
104
+ background: {
105
+ 50: "#e8eef4",
106
+ 100: "#d1dce8",
107
+ 200: "#334155",
108
+ 300: "#64748b",
109
+ 400: "#475569",
110
+ 500: "#0f172a",
111
+ 600: "#0c1320",
112
+ 700: "#090f18",
113
+ 800: "#060b10",
114
+ 900: "#04070c",
115
+ },
116
+ }, boxShadow: {
117
+ primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
118
+ error: palette_1.default.boxShadow.error,
119
+ default: palette_1.default.boxShadow.default,
120
+ } });
121
+ 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 slate = __assign(__assign(__assign({}, fonts_1.default), { colors: palette_1.default }), common_1.default);
23
+ exports.default = (0, react_1.extendTheme)(__assign(__assign({}, slate), { components: componentStyles_1.componentStyles }));
@@ -2,10 +2,12 @@ import lavender from "./Default/theme";
2
2
  import meadow from "./Meadow/theme";
3
3
  import radiant from "./Radiant/theme";
4
4
  import skyline from "./Skyline/theme";
5
- export { skyline, meadow, radiant, lavender };
5
+ import slate from "./Slate/theme";
6
+ export { skyline, meadow, radiant, lavender, slate };
6
7
  export declare const ThemesList: {
7
8
  skyline: Record<string, any>;
8
9
  meadow: Record<string, any>;
9
10
  radiant: Record<string, any>;
10
11
  lavender: Record<string, any>;
12
+ slate: Record<string, any>;
11
13
  };
@@ -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.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
6
+ exports.ThemesList = 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"));
@@ -12,9 +12,12 @@ var theme_3 = __importDefault(require("./Radiant/theme"));
12
12
  exports.radiant = theme_3.default;
13
13
  var theme_4 = __importDefault(require("./Skyline/theme"));
14
14
  exports.skyline = theme_4.default;
15
+ var theme_5 = __importDefault(require("./Slate/theme"));
16
+ exports.slate = theme_5.default;
15
17
  exports.ThemesList = {
16
18
  skyline: theme_4.default,
17
19
  meadow: theme_2.default,
18
20
  radiant: theme_3.default,
19
21
  lavender: theme_1.default,
22
+ slate: theme_5.default,
20
23
  };
@@ -1,2 +1,2 @@
1
- export type ThemeName = 'skyline' | 'midnight' | 'sunset' | 'lavender';
1
+ export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate";
2
2
  export declare const themes: Record<ThemeName, string>;
@@ -2,8 +2,9 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.themes = void 0;
4
4
  exports.themes = {
5
- skyline: 'skyline',
6
- midnight: 'midnight',
7
- sunset: 'sunset',
8
- lavender: 'lavender',
5
+ lavender: "lavender",
6
+ meadow: "meadow",
7
+ radiant: "radiant",
8
+ skyline: "skyline",
9
+ slate: "slate",
9
10
  };
package/dist/global.css CHANGED
@@ -237,3 +237,7 @@
237
237
  [data-theme="skyline"] {
238
238
  --color-primary-500: #0088cc;
239
239
  }
240
+
241
+ [data-theme="slate"] {
242
+ --color-primary-500: #475569;
243
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.146",
3
+ "version": "2.2.147",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",