@ciromaciel/dashboard-kit 1.7.1 → 1.7.2

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/theme.js +16 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ciromaciel/dashboard-kit",
3
- "version": "1.7.1",
3
+ "version": "1.7.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "description": "The components every dashboard shares: table, empty state, loading state, destructive confirm, danger zone and wordmark.",
package/src/theme.js CHANGED
@@ -165,14 +165,14 @@ export const panelTheme = createTheme({
165
165
  Menu: {
166
166
  defaultProps: { shadow: 'none', width: 210, withinPortal: true, radius: 0 },
167
167
  styles: theme => ({
168
- dropdown: { border: `1px solid ${theme.colors.gray[2]}` },
168
+ dropdown: { border: `1px solid var(--mantine-color-gray-2)` },
169
169
  item: { fontSize: rem(13), fontWeight: 500 },
170
170
  label: { fontSize: rem(10), fontWeight: 800, textTransform: 'uppercase', letterSpacing: '1.5px' },
171
171
  }),
172
172
  },
173
173
  Popover: {
174
174
  defaultProps: { shadow: 'none', radius: 0 },
175
- styles: theme => ({ dropdown: { border: `1px solid ${theme.colors.gray[2]}` } }),
175
+ styles: theme => ({ dropdown: { border: `1px solid var(--mantine-color-gray-2)` } }),
176
176
  },
177
177
 
178
178
  // --- DATA ---
@@ -192,11 +192,11 @@ export const panelTheme = createTheme({
192
192
  fontWeight: 800,
193
193
  textTransform: 'uppercase',
194
194
  letterSpacing: '1.5px',
195
- color: theme.colors.gray[5],
196
- borderBottom: `1px solid ${theme.colors.gray[2]}`,
195
+ color: "var(--mantine-color-gray-5)",
196
+ borderBottom: `1px solid var(--mantine-color-gray-2)`,
197
197
  whiteSpace: 'nowrap',
198
198
  },
199
- td: { borderBottom: `1px solid ${theme.colors.gray[2]}`, fontSize: rem(13), color: theme.colors.gray[7] },
199
+ td: { borderBottom: `1px solid var(--mantine-color-gray-2)`, fontSize: rem(13), color: "var(--mantine-color-gray-7)" },
200
200
  }),
201
201
  },
202
202
  Badge: {
@@ -272,7 +272,7 @@ export const panelTheme = createTheme({
272
272
  defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
273
273
  styles: (theme, props) => ({
274
274
  label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
275
- input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
275
+ input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
276
276
  }),
277
277
  },
278
278
  /**
@@ -290,35 +290,35 @@ export const panelTheme = createTheme({
290
290
  defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
291
291
  styles: (theme, props) => ({
292
292
  label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
293
- input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
293
+ input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
294
294
  }),
295
295
  },
296
296
  Textarea: {
297
297
  defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
298
298
  styles: (theme, props) => ({
299
299
  label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
300
- input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
300
+ input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
301
301
  }),
302
302
  },
303
303
  Select: {
304
304
  defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
305
305
  styles: (theme, props) => ({
306
306
  label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
307
- input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
307
+ input: props.variant === 'unstyled' ? {} : { border: `1px solid var(--mantine-color-gray-2)` },
308
308
  }),
309
309
  },
310
310
  NumberInput: {
311
311
  defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
312
312
  styles: theme => ({
313
313
  label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
314
- input: { border: `1px solid ${theme.colors.gray[2]}` },
314
+ input: { border: `1px solid var(--mantine-color-gray-2)` },
315
315
  }),
316
316
  },
317
317
  Autocomplete: {
318
318
  defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
319
319
  styles: theme => ({
320
320
  label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
321
- input: { border: `1px solid ${theme.colors.gray[2]}` },
321
+ input: { border: `1px solid var(--mantine-color-gray-2)` },
322
322
  }),
323
323
  },
324
324
  /**
@@ -343,7 +343,7 @@ export const panelTheme = createTheme({
343
343
  styles: theme => ({
344
344
  label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
345
345
  input: {
346
- border: `1px solid ${theme.colors.gray[2]}`,
346
+ border: `1px solid var(--mantine-color-gray-2)`,
347
347
  minHeight: rem(36),
348
348
  display: 'flex',
349
349
  alignItems: 'center',
@@ -356,7 +356,7 @@ export const panelTheme = createTheme({
356
356
  defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
357
357
  styles: theme => ({
358
358
  label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
359
- input: { border: `1px solid ${theme.colors.gray[2]}` },
359
+ input: { border: `1px solid var(--mantine-color-gray-2)` },
360
360
  }),
361
361
  },
362
362
  SegmentedControl: {
@@ -381,10 +381,10 @@ export const panelTheme = createTheme({
381
381
  fontFamily: 'var(--mantine-font-family-monospace)',
382
382
  fontSize: rem(10),
383
383
  fontWeight: 700,
384
- color: theme.colors.gray[5],
384
+ color: "var(--mantine-color-gray-5)",
385
385
  backgroundColor: theme.white,
386
- border: `1px solid ${theme.colors.gray[2]}`,
387
- borderBottomColor: theme.colors.gray[2],
386
+ border: `1px solid var(--mantine-color-gray-2)`,
387
+ borderBottomColor: "var(--mantine-color-gray-2)",
388
388
  boxShadow: 'none',
389
389
  borderRadius: 0,
390
390
  },